angularjs - 为什么service-worker的self.addEventListener在angularjs中不起作用

Question

我现在尝试在我的 angularjs 项目中首先将 service-worker 离线使用。我的项目是由 yeoman 搭建的，将这些行放入 service-worker 中，如下所示。

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching App Shell');
      return cache.addAll(filesToCache);
    })
  );
});

并在我的index.jade

中调用并注册服务 worker

script.
    if('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('app/service-worker.js')
            .then(function() { 
                console.log('Service Worker Registered'); 
            })
            .catch(function(err) {
                console.log('ServiceWorker registration failed: ', err);
            });
    }

我收到了Service Worker Registered消息，但问题是每当应用程序运行时，service-worker中的所有addEventListener都不会被触发。

self.addEventListener('install', function(e) 

self.addEventListener('activate', function(event) {

self.addEventListener('fetch', function(e) {

请帮助我解决我错过的编码问题。

Answer 1

您注册的Service Worker位于app/service-worker.js，这意味着有效的scope您的 Service Worker 的名称是 app/。只有位于 app/ 下的页面才会受此 Service Worker 控制。

您应该确保您注册的 Service Worker 文件是从与您需要的最大范围相对应的路径提供的。如果您将 service-worker.js 文件上移一级路径，并将其注册为 service-worker.js 而不是 app/service-worker.js ，它的有效范围将包含当前页面以及子路径之外的任何页面。