失败：服务工作者无法成功提供清单的start_url

Question

我正在为我的网站创建PWA，这条错误消息耗费了我很多时间。我将非常感谢您提供的任何帮助。

使用React-redux + webpack + babel + OfflinePlugin

sw.js在构建文件夹

中生成

main..js（构建文件夹）容器注册表脚本。

下面我的Manifest.json：

{   “名字”：“测试”，   “short_name”：“测试”，   “description”：“测试”，   “图标”：[     {       “src”：“favicon_48x48.png”，       “尺寸”：“48x48”，       “type”：“image / png”，       “密度”：1.0     }，     {       “src”：“favicon_96x96.png”，       “尺寸”：“96x96”，       “type”：“image / png”，       “密度”：2.0     }，     {       “src”：“favicon_144x144.png”，       “尺寸”：“144x144”，       “type”：“image / png”，       “密度”：3.0     }，     {       “src”：“favicon_192x192.png”，       “尺寸”：“192x192”，       “type”：“image / png”，       “密度”：4.0     }，     {       “src”：“favicon_192x192.png”，       “尺寸”：“512x512”，       “type”：“image / png”，       “密度”：4.0     }   ]   “theme_color”：“＃317EFB”，   “start_url”：“/”，   “显示”：“独立”，   “background_color”：“＃FFFFFF”，   “方向”：“任何” }

查看我目录结构的以下图片： Directory structure - 1

Directory structure - 2

请同时查找google lighhouse审核报告图片：Lighthouse Audit report

请帮忙。提前谢谢。

Answer 1

当我的清单文件没有被服务工作者缓存时，我遇到了这个问题。 Lighthouse离线运行测试，如果清单文件未缓存，则自然无法读取start_url。

我会查看您的服务工作者文件，并确保将manifest.json或manifest.webmanifest添加到缓存中。

Answer 2

问题出在UglifyJS。 Service Worker无法加载到缓存中。已手动解决。

更改     serviceWorkerLoader：<script>${loadMinified(path.join(__dirname, './service-worker-prod.js'), 'utf-8')}</script> 至     serviceWorkerLoader：<script>${loadMinified(path.join(__dirname, './service-worker-prod.js'))}</script>