PWA仅能在桌面端Chrome运行？HTTPS下添加至主屏幕启动白屏如何解决

• manifest配置错误：HTTPS环境下manifest.json中配置的start_url、scope字段和实际部署路径不匹配，比如写死了HTTP协议地址，或者相对路径层级错误，导致主屏幕启动时访问的入口地址无效，直接返回空内容。
• service worker缓存异常：HTTPS环境下service worker正常注册运行，HTTP环境（非localhost）下浏览器禁止注册service worker，两者的资源加载逻辑完全不同。如果service worker的预缓存列表里的入口资源路径错误、缓存内容为空，或者缓存策略拦截了正常的页面请求，就会导致主屏幕启动时拿到无效响应，出现白屏。
• 混合内容被拦截：页面内存在硬编码的HTTP资源请求（脚本、样式、静态资源等），HTTPS环境下浏览器会默认拦截这类混合内容，导致页面依赖资源加载失败无法正常渲染，HTTP环境下不存在混合内容限制所以运行正常。
• scope权限不匹配：manifest配置的scope和service worker注册的scope不一致，主屏幕启动时PWA的运行范围超出了权限限制，导致页面加载被浏览器拦截。

• 核查manifest配置：打开HTTPS部署的页面，通过Chrome DevTools的Application面板进入Manifest标签，确认start_url和scope字段为HTTPS协议的正确路径，点击start_url对应的链接可正常访问页面。
• 核查service worker缓存：在Application面板的Service Workers标签确认worker正常激活后，进入Cache Storage查看预缓存的入口HTML文件是否存在，路径是否匹配，响应内容是否为完整的页面代码。可临时注销worker、清除所有站点缓存后重新添加主屏幕测试，如果白屏问题消失即可定位为缓存配置错误，调整worker的预缓存资源列表即可。
• 核查资源加载状态：手机开启USB调试连接电脑，通过Chrome远程调试功能，点击主屏幕图标启动PWA时查看Network面板，排查是否存在404/500的资源请求、被标记为blocked:mixed-content的拦截请求、或service worker返回空响应的异常请求。
• 核查混合内容：点击浏览器地址栏的站点信息按钮，确认站点没有“加载不安全内容”的提示，所有内部资源请求均为相对路径或HTTPS协议地址。

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