PWA Service Worker更新策略问题及Instagram内置浏览器白屏求解

• 直接调用skipWaiting的逻辑存在天然缺陷：该方法会让新安装的Service Worker立刻接管所有已打开的旧版本页面，跳过等待阶段。如果此时旧页面仍在运行、需要加载按需引入的JS/CSS chunk，或是请求未哈希后缀的静态资源，新Service Worker的缓存规则中已经没有对应旧资源，会直接返回404导致页面报错崩溃，触发白屏。
• Instagram InAppBrowser的内核适配问题：其内置WebView对Service Worker的controllerchange事件支持不完善，常规浏览器中skipWaiting后可以通过监听该事件触发页面自动刷新，但是在IG内嵌浏览器中该事件经常无法触发，旧页面不会主动重载，新旧资源混用直接导致白屏。

通用更新策略调整 #

• 不要无差别触发skipWaiting，默认仅在新Service Worker安装完成后给用户弹出更新提示，用户主动点击确认后再调用skipWaiting，同时手动触发页面刷新，避免新旧版本资源混用。
• 所有静态资源都添加内容哈希后缀（例如main.7a2f9c.js），旧版本静态资源至少保留3个版本迭代周期再下线，保证运行中的旧版本页面可以正常请求到所需资源。
• 破坏性API变更完全可以正常推进：所有对外接口添加版本号（例如/api/v1/order/list），旧版本接口保留1~2个月的兼容期，同时可以在旧版本前端代码中加入强更逻辑，当检测到后端接口已下线时，强制弹出升级提示引导用户刷新页面。

Instagram InAppBrowser特殊适配 #

• 检测到运行环境为IG内嵌浏览器时，直接关闭skipWaiting强制更新逻辑，改为每次页面冷启动时主动调用registration.update()检查Service Worker更新，更新完成后在用户下一次打开页面时自然生效，不干扰当前使用。
• 如果必须做强制更新，在IG内嵌浏览器中不要依赖Service Worker的生命周期事件，直接前端弹出遮罩层引导用户手动下拉刷新页面，完成版本升级。

• SSR可以降低白屏概率：SSR页面的首屏内容由服务端直接返回，不需要完全依赖Service Worker缓存的前端资源即可渲染，即使前端JS加载异常，也不会出现完全空白的情况。
• SSR无法彻底解决版本不兼容问题：如果客户端激活（hydrate）阶段需要的静态资源和当前Service Worker的缓存规则不匹配，还是会出现交互失效、功能报错的问题，仍需要配合上述更新策略一起使用。

内容的提问来源于stack exchange，提问作者Hashtag3232