如果我在主屏幕上添加我的 PWA,Service Worker 的离线缓存不起作用
Service worker's offline caching is not working if I add my PWA on home screen
我做了一个 PWA。目前部署在 heroku 上。 URL - https://plain-js-pwa.herokuapp.com/。
我的 PWA 安装服务工作者和 manifest.json 文件。如果我在移动 phone 上的 chrome 上打开它并将我的 phone 设置为飞行模式,那么刷新 url 仍然会显示我的应用程序。这是预期的,因为我的服务人员正在进行离线缓存。
但是当我将我的 PWA 添加到主屏幕并尝试在飞行模式下打开它时它不起作用。这可能是我的第一个 PWA,所以请帮助我。我正在从 'sw-precache-webpack-plugin'.
生成我的服务工作者文件
我的 manifest.json 文件是:
{
"name": "VanillaJS-webpack App",
"short_name": "VanillaJS-webpack App",
"description": null,
"dir": "auto",
"lang": "en-US",
"display": "standalone",
"orientation": "any",
"start_url": "/?homescreen=1",
"background_color": "#ee6e73",
"icons": [
{
"src": "android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
从主屏幕加载时,它的工作方式应该与从浏览器加载时相同。
在您的示例中,快速调试似乎表明问题与查询字符串有关:https://plain-js-pwa.herokuapp.com/?homescreen=1
添加查询字符串时它不会脱机工作(与从主屏幕或其他方式加载无关)。如果不查看您的 service worker 配置,很可能您需要指示您的 service worker 忽略使用 ignoreSearch
(https://developer.mozilla.org/en-US/docs/Web/API/Cache/match)或 ignoreUrlParametersMatching
(如果使用 sw-precache
)的查询字符串参数。
我做了一个 PWA。目前部署在 heroku 上。 URL - https://plain-js-pwa.herokuapp.com/。
我的 PWA 安装服务工作者和 manifest.json 文件。如果我在移动 phone 上的 chrome 上打开它并将我的 phone 设置为飞行模式,那么刷新 url 仍然会显示我的应用程序。这是预期的,因为我的服务人员正在进行离线缓存。
但是当我将我的 PWA 添加到主屏幕并尝试在飞行模式下打开它时它不起作用。这可能是我的第一个 PWA,所以请帮助我。我正在从 'sw-precache-webpack-plugin'.
生成我的服务工作者文件我的 manifest.json 文件是:
{
"name": "VanillaJS-webpack App",
"short_name": "VanillaJS-webpack App",
"description": null,
"dir": "auto",
"lang": "en-US",
"display": "standalone",
"orientation": "any",
"start_url": "/?homescreen=1",
"background_color": "#ee6e73",
"icons": [
{
"src": "android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
从主屏幕加载时,它的工作方式应该与从浏览器加载时相同。
在您的示例中,快速调试似乎表明问题与查询字符串有关:https://plain-js-pwa.herokuapp.com/?homescreen=1
添加查询字符串时它不会脱机工作(与从主屏幕或其他方式加载无关)。如果不查看您的 service worker 配置,很可能您需要指示您的 service worker 忽略使用 ignoreSearch
(https://developer.mozilla.org/en-US/docs/Web/API/Cache/match)或 ignoreUrlParametersMatching
(如果使用 sw-precache
)的查询字符串参数。