“未定义窗口”服务工作者答案

【问题标题】："window is not defined" service worker“未定义窗口”服务工作者
【发布时间】：2018-09-14 19:43:19
【问题描述】：

我正在尝试为我的 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');
    }
  });
});

我在控制台看到这个错误：Uncaught ReferenceError: window is not defined

如何解决这个问题？

【问题讨论】：

您是否能够使用设置为“异常中断”的调试器来找出正在执行的行以及在什么上下文中？乍一看，您的注册脚本听起来像是在 ServiceWorker 上下文中执行的（window 不可用）。
@Dai 它停在这一行 window.addEventListener('beforeinstallprompt', function(e)。我不知道它是否相关，但在 Application 选项卡中，服务工作者没有显示文件名但显示（索引）。我正在使用 django 并将服务工作者呈现为模板。

标签： javascript django service-worker

【解决方案1】：

我正在编写代码：

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

在 service_worker.js 文件中。服务工作者无权访问像 window 或 document 这样的 DOM 元素。一旦我将上述代码放在与 html 文件关联的单独 js 文件中，它就可以工作了。我是 PWA 和服务工作者概念的新手，这似乎是一个新手错误。如果对其他人有帮助，我将发布此答案。

【讨论】：

@Vishal 我丢失了代码。您需要任何特定部分的帮助吗？
我找到了解决方案。谢谢。
@Vishal 你能分享你得到的解决方案吗