小编Ark*_*osh的帖子

我打算将django项目转换为Progressive Web App.我无法弄清楚在我的django项目中将service_worker.js和manifest.json文件放在何处.我尝试过以下方法:

我的项目/

|__app1

|__app2

|__manage.py

|__manifest.json

|__service_worker.js

然后尝试使用相对路径../../../service_worker.js从html文件注册服务工作者.那没用.它显示了这个错误:"在获取脚本时收到了错误的HTTP响应代码(404)."

我尝试的另一种方法是将service_worker.js和manifest.json放在静态文件夹中:

我的项目/

|__app1/
    |__static/
        |__app1/
            |__service_worker.js
            |__manifest.json

|__app2

|__manage.py

并使用{%static'app1/service_worker.js'%}访问那些.此方法的问题在于已注册的service_worker.js的范围仅限于该静态文件夹.我在一个stackoverflow回答中看到,我可以明确地将服务工作者的范围设置为{scope:'/'}.但是,我认为可能有一种我想念的更好的方法.如果有人有解决方案,请告诉我.

我使用 Angular Guidelines创建了一个 PWA 。我在拦截应用安装横幅时遇到问题。我正在使用此代码将其推迟到稍后的时间：

let deferredPrompt;
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;
  console.log("Intercepting the app install banner prompt");

  setTimeout(function() {
    deferredPrompt.prompt();
  }, 20000);

  // 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'); …

我正在使用 Angular 7 创建 PWA 应用程序。我正在决定如何在本地存储一些数据并有两个选择：

1. 本地存储
2. 索引数据库

本地存储的优点是

1. 同步
2. 返回字符串

locstorages的缺点

1. ServiceWorker 无法访问本地存储
2. 不安全

IndexedDB 的优点是

1. 比本地存储更多的存储空间
2. 可以存储和检索对象
3. 基于承诺

IndexedDB 的缺点

1. 在 Firefox 私人会话中不可用

现在，如果我使用 IndexedDB 来存储数据，来自 Firefox Private 会话的用户将无法使用我的网站，如果我使用 localstorage，我将无法利用 ServiceWorker。

您如何克服 IndexedDB 和 LocalStorage 的上述问题？

我正在尝试为我的django项目注册服务工作者.这是我用于注册的代码:

<!-- register service worker -->
<script type="text/javascript">
  if('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register("{% url 'sw.js' %}").then(function(registration) {
        console.log("Service worker registered.");
        console.log("Registered at: "+registration.scope);
      });
    });
  }
</script>

这是我的service_worker.js中的代码:

// App install banner
window.addEventListener('beforeinstallprompt', function(e) {
  e.userChoice.then(function(choiceResult) {
    console.log(choiceResult.outcome);

    if(choiceResult.outcome == 'dismissed') {
      console.log('User cancelled home screen install');
    } else {
      console.log('User added to home screen');
    }
  });
});

我在控制台中看到此错误:"未捕获的ReferenceError:窗口未定义"

如何解决这个问题？