为什么服务人员离线模式不起作用

Question

我正在尝试为该应用提供离线访问。但是代码不起作用。

正在创建缓存并存储所有文件，但是当我在离线模式下重新加载页面时，仅加载数据，没有应用任何样式。

chrome 版本：版本 61.0.3163.100

// app.js

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(function () {
            console.log('service worker reistered');
        });
}

// 服务工作者js

self.addEventListener('install', function (event) {
      event.waitUntil(
        caches.open('static').then(function (cache) {
            return cache.addAll([
                '/',
                'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
                'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',
                '/index.html',
                '/styles.css',
                '/app.js'
            ]);
        })
    );
});

Answer 1

您的service-worker.js 中需要一个fetch 处理程序。当您将项目添加到 install 处理程序内的缓存时，您不会通过从缓存中提供项目来响应 fetch 事件。

有一些使用install、activate 和fetch 事件来预缓存和服务内容缓存优先的基本示例，例如this sample。

对于更自动化的解决方案，我的建议是，将像 Workbox（我正在研究的）这样的工具集成到您的 Web 应用程序的构建过程中，以便自动预缓存您需要的本地资源并保持最新。它可以代表您生成服务工作者文件。