1

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

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

镀铬版本：版本 61.0.3163.100

// 应用程序.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'
            ]);
        })
    );
});
4

1 回答 1

1

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

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

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

于 2017-10-26T16:53:29.073 回答