如何在AngularJS应用程序中实现服务工作者以获得离线体验

Question

我正在尝试在我的一个AngularJS应用程序中实现一个服务工作者.基于教程(主要是MDN),我提出了以下实现来将它与AngularJS合并.

首先,因为app.run()似乎是正确的地方.我在我的run块中有以下代码:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('workerFile.js')
  .then(function(reg) {
    console.log('Registration done');
  },function(error) {
    console.log('Registration failed with ' + error);
  });
}

我的服务工作者文件如下:

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        'index.html'
      ]);
    })
  );
});

和

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
  );
});

完成此操作后,我希望我的index.html文件可以缓存并脱机使用.但那还没有发生.在线时,每次为服务器提供文件(在提琴手中看到).

我尝试过更改this为self工作文件.这没有用.此外,我正在测试它,localhost所以我认为它不应该有不安全的浏览问题.我对JavaScript中的Workers概念很陌生,因此没有足够的选项可以尝试.

有人能指出我的错误吗？显然,互联网上的文章并不多.

PS:我参观了这个问题:没多大帮助.

更新:再看一下文档,我相信它在注册时与scope属性有关.我该如何定义此属性以包含我的整个应用程序？我尝试过使用{scope: '/'}它似乎不起作用.