关于 javascript：如何正确注册一个基本的渐进式 Web 应用服务工作者？


How to properly register a basic progressive web app service worker?

我正在尝试在我的网络应用程序上注册一个服务工作者，我在页面底部添加了这个脚本：

1
2
3
4
5
6
7
8
9
10
// this part is the service worker:
     if('serviceWorker' in navigator){
        // Register service worker
        console.log('Service Worker is supported');
        navigator.serviceWorkerContainer.register('service-worker.js').then(function(reg){
        console.log("Service Worker registration succeeded. Scope is"+reg.scope);
        }).catch(function(err){
            console.error("Service Worker registration failed with error"+err);
        });
    }

在我的服务器上的同一个文件夹中，我创建了一个文件 service-worker.js:

1
2
3
4
5
6
7
8
9
10
11
console.log('Started', self);
self.addEventListener('install', function(event) {
  self.skipWaiting();
  console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
self.addEventListener('push', function(event) {
  console.log('Push message received', event);
});

当我在 chrome 开发人员应用程序上检查它时，我点击了 Service Worker，但没有任何显示。

当我运行 lighthouse 报告时，它给了我一个关于 Registers a Service Worker 的错误。

我正在寻找一个简单的设置来为我的渐进式 Web 应用程序提供下载按钮，这实际上只是一个带有一些图像和几个 iframe 的简单网页。

我错过了什么？

相关讨论

以下代码将注册服务工作者。

1
2
3
4
5
6
7
8
9
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);
  });
}

有关详细信息，请查看 Google 的 Service Worker 简介。

我能够解决我的问题，我能够使用 mozilla/serviceworker-cookbook 中的这些文件正确设置一个非常基本的服务工作者。

我删除了我的旧代码，并将这些文件 index.js 和 service-worker.js 上传到我的服务器上，然后我将 <script src="./index.js"> 添加到了我的主页上，它运行良好。

这里没有多少信息可以解决您的问题。有很多事情可能是错误的。
但是尝试在下面的行中添加一个正斜杠，因为我认为你错过了它 -

之前：

navigator.serviceWorkerContainer.register('service-worker.js')

之后：

navigator.serviceWorkerContainer.register('/service-worker.js')