英文:
After each Package.json update app cannot load newly hashed index.js Vite PWA
问题
我刚刚安装了vite-plugin-pwa并按照文档进行了配置，以下是我的配置内容：
VitePWA( {
injectRegister: 'auto',
registerType: 'autoUpdate',
devOptions: {
enabled: true
},
strategies: 'generateSW',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,mp3}'],
sourcemap: true
},
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
manifest: {
name: 'Litreach',
short_name: 'Cluiche Litrithe',
start_url: "/",
display: "standalone",
lang: "ga",
description: 'Cluiche litrithe ina mbíonn ar an imreoir 5 focal a litriú gach lá. Cluintear na focail a rá sna 3 canúintí agus bíonn 5 iarracht agat an focal a litriú i gceart.',
theme_color: '#ffffff',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
"purpose": "maskable"
},
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
"purpose": "any"
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
}
],
dir: "ltr",
orientation: "portrait",
display_override: [
"standalone"
],
categories: [
"education",
"games"
]
}
})
然而，每当我增加package.json的版本号后，下次加载应用程序时应用程序会崩溃。当我检查网络键时，我可以看到应用程序正在尝试加载index.js?oldHashNumber，唯一的方法是手动按下浏览器上的刷新按钮才能加载应用程序。
我认为这可能与Service Worker或我的PWA配置有关。
我应该尝试销毁Service Worker及其所有缓存然后重新开始吗？
如果是这样，应该如何操作？
英文:
I have just installed the vite-plugin-pwa and followed the documentation and have the following in my config
VitePWA( {
injectRegister: 'auto',
registerType: 'autoUpdate',
devOptions: {
enabled: true
},
strategies: 'generateSW',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,mp3}'],
sourcemap: true
},
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
manifest: {
name: 'Litreach',
short_name: 'Cluiche Litrithe',
start_url: "/",
display: "standalone",
lang: "ga",
description: 'Cluiche litrithe ina mbíonn ar an imreoir 5 fhocal a litriú gach lá. Cluintear na focail a rá sna 3 canúintí agus bíonn 5 iarracht agat an focal a litriú i gceart.',
theme_color: '#ffffff',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
"purpose": "maskable"
},
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
"purpose": "any"
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
}
],
dir: "ltr",
orientation: "portrait",
display_override: [
"standalone"
],
categories: [
"education",
"games"
]
}
})
However each time I bump the the package.json version number, the next time I go to load the app the application falls over. When I inspect the Network key I can see that the app is trying to load index.js?oldHashNumber and the only way I can get the app to load is manually pressing the refresh button on the browser.
I believe there is some problem with the Service Worker or my PWA configuration.
Should I try to destroy the Service Worker and all their caches and start again?
If so how should I do this?
答案1
得分: 1
我遇到了相同的问题，我发现有一个设置可以控制预缓存清单中包含的文件的最大大小。
https://vite-pwa-org.netlify.app/guide/faq.html#missing-assets-from-sw-precache-manifest
在我的情况下，js捆绑包超过了2mb，并设置
injectManifest: {
maximumFileSizeToCacheInBytes: 6000000
}
对我有帮助。
英文:
I had the same issue and I found out that there is a setting that controls the max size of files included in precache manifest.
https://vite-pwa-org.netlify.app/guide/faq.html#missing-assets-from-sw-precache-manifest
In my case js bundle was exceeding 2mb and setting
injectManifest: {
maximumFileSizeToCacheInBytes: 6000000
}
helped me.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论