CDN服务工作者

Question

我正在尝试设置一个使用西南前疼痛的服务工作者来缓存CDNJS中的资产，以便脱机使用。不幸的是，这似乎不起作用。到目前为止，我的情况如下：

在index.html中加载任何脚本之前

<script type='text/javascript'>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/js/service_worker.js')
      .then(function() {
        console.log("Service Worker Registered")
      })
  }
</script>

下面是我用来生成服务工作者的Gulp任务：

const config = require('../config')
const gulp = require('gulp')
const swPrecache = require('sw-precache')

gulp.task('serviceWorker', (callback) => {

  swPrecache.write(config.build.serviceWorker, {
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/cdnjs\.cloudflare\.com/,
        handler: 'networkFirst'
      }
    ]
  }, callback)
})

当我运行这个应用程序时，我看到Service Worker Registered登录到控制台。但是，如果我断开了wifi的连接，应用程序就无法加载脚本。我做错了什么？

​

​

Answer 1

您正在某个JS路径/js/service_worker.js注册服务工作人员。在这里，作用域限制服务工作人员仅控制该路径/js/下的指定内容。

I suggest you to register service worker at root level i.www.example.com/然后您就可以控制在此域下服务的所有页面。

Answer 2

我认为您的问题在于的作用域。

服务工作人员只有其所在目录的最大范围。也就是说，它不能加载文件/请求/响应，这些文件/请求/响应是从其结构的某个位置或更高的位置(仅在下面)提取的。

因此，如果将服务工作人员的位置更改为web项目的根，则会触发fetch事件，并从缓存加载资产。

在“注册A服务工作者”一节中将对此作进一步解释。https://developers.google.com/web/fundamentals/getting-started/primers/service-workers