DJANGO PWA 安装到主屏幕不起作用

如何解决DJANGO PWA 安装到主屏幕不起作用

我正在尝试使用我的 DJANGO 应用按照本网站 (https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen) 上的说明制作 PWA“安装到主屏幕”按钮。

我在站点上安装了 SSL，在我看来 Service Worker 安装正确，我收到了“Service Worker 已注册”消息。但是，当我单击该按钮时，没有任何反应，+ 号没有像它应该的那样出现在 URL 栏中。

我不知道是什么导致了错误，因为没有任何不正常工作的明显迹象。

我的 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>

我的 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"
}

我的 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;
    });
  });
});

还有我的 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)),);
});