Question

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

要成功注册我的服务工作者，我在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插件成功生成了我的服务工作者：

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

我的manifest.webapp在我的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资源列入白名单，该错误仍然会发生。我担心我在调整安全性设置时走了一条错误的路，并且可能会缺少服务人员的一些基本知识，这是我的新手。

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

与服务人员相关的教程，网址为https://angular.io
https://blog.ippon.tech/build-a-pwa-in-jhipster/
https://developer.okta.com/blog/2017/05/09/progressive-web-applications-with-angular-and-spring-boot
https://www.smashingmagazine.com/2018/09/pwa-angular-6/

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

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

Answer 1

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

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

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

如何使用服务人员+角

1 个答案: