sw-precache-webpack-plugin webpack service worker 默认模板

Question

我正在使用 sw-precache-webpack-plugin 为我的项目生成一个服务工作者，我可以在缓存存储中看到我所有的字体、js 和 css 文件，但看不到索引 / html 文件，当我离线时它不起作用。当我尝试添加到 App 清单上的主页时，我也得到了 'site cannot be installed: no matching service worker detected.'。

我的堆栈是一个通用的 React + redux 应用程序，索引文件使用 Express + ejs。我不确定是不是因为我使用的是 ejs 而不是默认的 html 文件，但它似乎找不到该文件。有什么方法可以指定模板吗？我的 sw-precache-webpack-plugin webpack 设置是：

new SWPrecacheWebpackPlugin({
 cacheId: 'tester',
 filename: 'my-service-worker.js',
 directoryIndex: '/',
}),

如有任何建议，我们将不胜感激

Answer 1

您在插件配置中缺少缓存策略规范。

plugins: [
    new SWPrecacheWebpackPlugin({
        cacheId: 'tester',
        filename: 'my-service-worker.js',
        runtimeCaching: [
        {
            urlPattern: '/',
            handler: 'cacheFirst',
        }
        ]
    })
]

文档：https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject

sw-precache-webpack-plugin webpack service worker 默认模板

sw-precache-webpack-plugin webpack service worker default template

javascript

ejs

express

webpack

sw-precache