我正在使用 Webpack 来编译我的站点,并使用Workbox Webpack 插件来编译 service worker。
尽管 Workbox 创建的清单包含指向正确块名称数组的链接(具有该特定构建的正确哈希),但 Chrome DevTools 似乎并未将块包含在预缓存列表中(DevTools > Application > Cache Storage) .
这是我的插件配置:
new GenerateSW({
swDest: '../service-worker.js',
globDirectory: 'priv/static',
globPatterns: ['**/*.{js,css,png,svg,jpg,gif,woff2}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/js.intercomcdn.com\/[a-zA-Z0-9-/_.]*(js|woff)/,
handler: 'NetworkFirst'
}, {
urlPattern: /^https:\/\/fonts\.googleapis\.com/,
handler: 'NetworkFirst',
options: {
cacheName: 'google-fonts-stylesheets'
}
},
{
urlPattern: /^https:\/\/fonts\.gstatic\.com/,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts-webfonts',
cacheableResponse: {
statuses: [0, 200]
},
expiration: {
maxEntries: 5,
maxAgeSeconds: 60 * 60 * 24 * 365, // one year
}
}
},
{
urlPattern: /^https:\/\/logo.clearbit.com/,
handler: 'NetworkFirst'
}, {
urlPattern: /^https:\/\/www.gravatar.com\/avatar\//,
handler: 'NetworkFirst'
}
]
})
shell中有关于不需要包含globDirectory
和的警告globPatterns
,因为Webpack在编译时已经跟踪文件。但是,根据此处的建议,应通过此配置选项缓存 Webpack 不知道的其他资产。我没有使用webpack-dev-server
,而是通过Phoenix框架为该站点提供服务。
查看/service-worker.js
从 Workbox 生成的内容,它正在导入一个清单,其中包含对正确块的引用。但它们只是没有被加载到缓存存储中的预缓存中:
importScripts(
"/js/precache-manifest.94f30538f0c03a9278244eabf2ce9e52.js" // This points to a manifest with the correct chunk names/hashes
);
可能值得注意的是,DevTools 中的 Network 选项卡确实(ServiceWorker)
在Size
块名称列中显示。但是当这些脚本没有出现在缓存存储中时,我如何相信这一点?
更奇怪的是,如果我删除对globDirectory
和的引用globPatterns
,Webpack 块文件确实会出现在缓存存储中。但是,问题在于我有一些 Webpack 不知道我想使用 Workbox 进行预缓存的资产。
使用的插件版本是 4.xx 更高版本的插件不允许使用参数globDirectory
和globPatterns
.