I am trying to follow the instructions on this site (https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen) with my DJANGO app to make a PWA "Install to home screen' button.
I have SSL installed on the site, and it seems to me that the service worker is installed properly, I got the "Service Worker Registered" message back. However when I click the button nothing happens, the + sign does not appear in the URL bar as it should.
I have no idea what is causing the error, as there is no clear sign of anything not working properly.
My index.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A2HS demo</title>
<link href="{% static 'css/index.css' %}" rel="stylesheet">
<script src="{% static 'js/index.js' %}" defer></script>
<link rel="manifest" href="{% static 'manifest.json' %}">
</head>
<body>
<button class="add-button">Add to home screen</button>
</body>
</html>
My manifest.json:
{
"short_name": "Test site",
"name": "Test site",
"theme_color": "#062440",
"background_color": "#F7F8F9",
"display": "fullscreen",
"icons": [
{
"src": "assets/logo.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/index.html"
}
My index.js
// Register service worker to control making site work offline
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/static/js/service-worker.js')
.then(() => { console.log('Service Worker Registered'); });
}
// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', () => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
And my service-worker.js:
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open('fox-store').then((cache) => cache.addAll([
'/index.html',
'/static/css/index.css',
'/static/js/index.js',
])),
);
});
self.addEventListener('fetch', (e) => {
console.log(e.request.url);
e.respondWith(
caches.match(e.request).then((response) => response || fetch(e.request)),
);
});
question from:
https://stackoverflow.com/questions/65841148/django-pwa-install-to-home-screen-not-working 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
