时间戳

首页 > 解决方案 > PWA serviceWorker 并不总是注册

javascript - PWA serviceWorker 并不总是注册

问题描述

我们有内部构建的 CMS，最近我们向其中添加了 PWA。现在，当访问主页 www.ourdomain.com 时一切正常，但是当访问一篇文章时，我们是一个新闻网站，类似于 www.ourdomain.com/section/article 会出现一条消息：

注册 ServiceWorker 失败：获取脚本时收到错误的 HTTP 响应代码 (404)。

首先范围是

./

在那种情况下，ServiceWorker 根本没有注册。

现在我将范围更改为

/

而不是它是为主页注册的，而不是为任何文章注册的。我浏览了文档，阅读了问题和答案，但似乎无法解决这个问题。顺便说一句，PWA 可以很好地安装在移动设备上并且运行良好。

标签： javascriptservice-workerprogressive-web-apps

解决方案

您的服务工作者 js 文件最好位于应用程序的公共根目录中，因为您刚刚开始使用 PWA，并且指定正确的范围至关重要，这是从Google PWA 指南安装服务工作者的完美示例。

  1. main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service worker registration failed, error:', error);
  });
}
  1. service-worker.js

期望您拥有/service-worker.js并且在您的根目录中，并且如果您开始使用清单，您将呈现与您的start_urlmain.js相同的范围

您可以在您的应用程序公共根目录上尝试上述安装片段。

推荐阅读