Internet连接丢失时PWA黑屏（死机白屏）？答案

【问题标题】：PWA blank screen (white screen of death) when Internet Connection lost?Internet连接丢失时PWA黑屏（死机白屏）？
【发布时间】：2020-01-04 19:48:04
【问题描述】：

我创建了一个 PWA 应用程序（角度），它工作正常。

问题是：

用户在桌面上安装 PWA 或在 i 上添加到主屏幕，它工作正常，但在 Internet 连接丢失后（或单击后退按钮后）它显示空白页，剩下的解决方案是重新安装 PWA。（桌面 chrome，iOS 会出现这个问题）。

问题出在哪里？或者我可以把哪部分代码放在这里？

更新：

{   "index": "/",   "assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/*.css",
"/*.js"
]
}   }, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/",
"/profiles/",
"/*.(eot|svg|cur|webp|png|gif|otf|ttf|woff|woff2|ani)"
]
}   }] }

【问题讨论】：

您的 PWA 已通过使用 Lighthouse 工具的所有测试作为有效 PWA？用户正在一个必需的 HTTPS 站点上进行测试？用户之前从未测试过您的应用（他们的缓存中没有任何旧内容）？
@Mathias 例如第一次测试这个 pwa 并且所有页面都显示并且工作但突然互联网离线，例如按下菜单页面变为白色并且没有显示任何内容。
@Mathias Lighthouse 很好。所需的 HTTPS 网站没问题。
可能是您的 Service Worker 没有缓存加载页面所需的所有内容。
@IanC 是否有关于启用加载页面缓存的评论？我认为缓存已启用。请添加更多提示？

标签： javascript angularjs angular google-chrome progressive-web-apps

【解决方案1】：

我找到的唯一解决方案是在 Service Worker 的帮助下考虑离线页面。因此，每当互联网中断或离线时， PWA 被重定向到离线页面。

【讨论】：