我用 webpack 离线插件制作了一个 PWA,并进行了如下配置:
所以服务工作者正在工作,我可以在Chrome开发工具中看到它。 Chrome识别了PWA,并且当我导航到我的URL(由Heroku托管在https中)时,Chrome会在移动设备上提示安装建议。 然后我将应用程序安装到我的Android手机上,登录并像往常一样使用它。当我离线时,一切仍然正常运行,我可以在整个应用程序中导航,我可以将其最小化并重新打开,到目前为止一切都很好。 当我关闭我的应用程序(使用任务管理器)时,我处于离线状态,然后打开它,它会提示白色页面或无连接提示。 有什么提示吗? 此外,它是如何工作的?每次我单击已安装的PWA时,它都会检查我是否连接并下载(如果存在)应用程序的更新版本?
// Put it in the end to capture all the HtmlWebpackPlugin's
// assets manipulations and do leak its manipulations to HtmlWebpackPlugin
new OfflinePlugin({
ServiceWorker: {
events: true,
},
relativePaths: false,
publicPath: '/',
appShell: '/',
// No need to cache .htaccess. See http://mxs.is/googmp,
// this is applied before any match in `caches` section
excludes: ['.htaccess'], // index.html
caches: {
main: [':rest:'],
// All chunks marked as `additional`, loaded after main section
// and do not prevent SW to install. Change to `optional` if
// do not want them to be preloaded at all (cached only when first loaded)
additional: ['*.chunk.js'],
},
// Removes warning for about `additional` section usage
safeToUseOptionalCaches: true,
autoUpdate: true,
}),
new WebpackPwaManifest({
name: 'my_app_name',
short_name: 'my_app_short_name',
description: 'my_app_description',
background_color: '#364150',
theme_color: '#b1624d',
icons: [
{
src: path.resolve('app/images/icon-512x512.png'),
sizes: [72, 96, 120, 128, 144, 152, 167, 180, 192, 384, 512],
},
],
}),
所以服务工作者正在工作,我可以在Chrome开发工具中看到它。 Chrome识别了PWA,并且当我导航到我的URL(由Heroku托管在https中)时,Chrome会在移动设备上提示安装建议。 然后我将应用程序安装到我的Android手机上,登录并像往常一样使用它。当我离线时,一切仍然正常运行,我可以在整个应用程序中导航,我可以将其最小化并重新打开,到目前为止一切都很好。 当我关闭我的应用程序(使用任务管理器)时,我处于离线状态,然后打开它,它会提示白色页面或无连接提示。 有什么提示吗? 此外,它是如何工作的?每次我单击已安装的PWA时,它都会检查我是否连接并下载(如果存在)应用程序的更新版本?