如何使用 service-worker + angular 修复“未捕获（承诺）不良预缓存响应”错误答案

【问题标题】：How to fix 'Uncaught (in promise) bad-precaching-response' error with service-worker + angular如何使用 service-worker + angular 修复“未捕获（承诺）不良预缓存响应”错误
【发布时间】：2020-01-18 15:32:46
【问题描述】：

使用 jhipster-6.2 生成的项目，我在将 Spring + Angular 应用程序转变为渐进式 Web 应用程序 (PWA) 时遇到了问题。我的服务人员成功注册，但在我的应用程序部署到生产环境后不会提供离线功能。在我的控制台中，我得到了一个bad-precaching-response，似乎至少有一个 CSS 文件。对于本地部署，缓存可以工作。

为了成功注册我的 service-worker，我取消了 index.html 中与 serviceWorker 相关的代码的注释，这样我就有了这个：

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/service-worker.js')
                    .then(function () {
                        console.log('Service Worker Registered');
                    });
            });
        }
    </script>

我通过 Workbox 插件成功生成了我的 service worker：

new WorkboxPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true
        })

我的 webapp 目录中有我的 manifest.webapp：

{
  "name": "<truncated>",
  "short_name": "<truncated>",
  "icons": [
        <truncated>
    ],
  "theme_color": "#000000",
  "background_color": "#e0e0e0",
  "start_url": ".",
  "display": "standalone",
  "orientation": "portrait"
}

使用本地部署时，Workbox 会按预期进行缓存。但是，它在生产中失败了。

当我通过 Heroku 部署时，我强制使用 https。在完成上述步骤后首次部署后，我必须更新我的内容安全策略以包含worker-src 'self' https://storage.googleapis.com/* blob:。虽然这解决了我最初的安全问题，但现在在我的控制台中使用实时生产部署时出现此错误：

Uncaught (in promise) bad-precaching-response: 
bad-precaching-response :: [{"url":"https://<truncated>/swagger-ui/dist/css/typography.css?__WB_REVISION__=d41d8cd98f00b204e9800998ecf8427e",
"status":404}]

当我点击该链接时，我会进入一个由于 CSP 违规而返回 404 的页面：

Refused to load the script 'https://linkhelp.clients.google.com/tbproxy/lh/wm?sourceid=wm&url=https%3A%2F%<truncated>.herokuapp.com%2Fswagger-ui%2Fdist%2Fcss%2Ftypography.css%3F&hl=en&site=<truncated>.herokuapp.com&error=http404&js=true' 
because it violates the following Content Security Policy directive: 
"script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com https://linkhelp.clients.google.com/* https://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js blob:". 
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我相信如果有来自 url 的任何 400 响应，服务人员不会缓存任何内容（有充分的理由），这意味着我的服务人员在生产中根本没有工作。但是，尽管将linkhelp 资源列入白名单，错误仍然发生。我担心我在调整安全设置方面走错了路，并且可能会遗漏一些关于 service-worker 的基本知识，而我是新手。

我查阅了一些指南，通过谷歌搜索找到了一些 jhipster pwa 或类似的变体，但最终都在同一个地方。这些指南包括：

预期结果：生产部署允许离线功能，就像本地部署一样。 Lighthouse 审核成功。

实际结果：产品部署不允许离线功能。 Lighthouse 审核失败。

【问题讨论】：

标签： angular webpack jhipster service-worker progressive-web-apps

【解决方案1】：

通过在对webpack/webpack.prod.js 中的WorkboxPlugin.GenerateSW 的调用中将exclude: [/swagger-ui/] 添加到配置中，从工作箱预缓存清单中排除swagger-ui。大多数用户不会访问该页面，因此最好将其从预缓存中排除。

new WorkboxPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: true,
  exclude: [/swagger-ui/]
})

这样，完美分数中唯一缺少的是apple-touch-icon

【讨论】：

太棒了，先生。离线功能现已建立。当我查看 Workbox 的文档时，我看到了 ignoreURLParametersMatching 和 globIgnores 但错过了 exclude 参数。感谢您的知识、敏锐的眼光和快速的帮助。