javascript - 如何正确注册一个基本的渐进式网络应用服务 worker ？

Question

我想在我的网络应用程序上注册一个服务 worker ，我在我的页面底部添加了这个脚本:

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

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

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 Workers，但没有任何显示。

当我运行灯塔报告时，它给我一个关于注册服务 worker 的错误。

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

我错过了什么？

Answer 1

以下代码将注册服务 worker 。

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's Introduction to Service worker更多细节。