Question

我正在尝试为该应用提供离线访问权限。但是代码没有用。

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

chrome版本：版本61.0.3163.100

// app.js

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

// service worker 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

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

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

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

为什么服务工作者离线模式不起作用

1 个答案: