Angular Service Worker 离线支持在部署在 tomcat 上时不起作用答案

【问题标题】：Angular Service Worker offline support not working when deployed on tomcatAngular Service Worker 离线支持在部署在 tomcat 上时不起作用
【发布时间】：2019-12-19 22:51:39
【问题描述】：

我有一个 Angular 应用程序，我们正在 tomcat 上部署它（使用战争）。我正在使用 angular-sw 向应用程序添加离线支持。使用上下文路径访问应用程序（比如展示应用程序）

我现在面临的问题是，当我尝试使用以下网址访问应用程序（使用 chrome 开发工具的离线模式）时，它工作正常：

http://localhost:8080/showcase-app/

http://localhost:8080/showcase-app/index.html（重定向到http://localhost:8080/showcase-app/）

当我按 F5 时，我得到 http 504

如果我尝试http://localhost:8080/showcase-app，则会引发 504 错误

我觉得它与路由有关，但不确定究竟是什么问题。

这是我生成的 ngsw.json 文件（删除不必要的 css 和 js url）

{
  "configVersion": 1,
  "timestamp": 1565693252354,
  "index": "/showcase-app/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/showcase-app/favicon.ico",
        "/showcase-app/index.html",
        "/showcase-app/main-es2015.f5103b4162e6ae00889a.js",
        "/showcase-app/main-es5.0b19cc7e5eb478145768.js",
        "/showcase-app/polyfills-es2015.e35a976998ea3f8206df.js",
        "/showcase-app/polyfills-es5.6e97d82e42cdf0e046a3.js",
        "/showcase-app/runtime-es2015.3d53808bc2188f4243c7.js",
        "/showcase-app/runtime-es5.f1b869bd6638a324a133.js",
        "/showcase-app/scripts.385aa2cec8cdc651bfad.js",
        "/showcase-app/styles.5b950d38f1d7a3ba6506.css",
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [
        "/showcase-app/CardObject.f4ac54620cd0f92eb623.png"
      ],
      "patterns": []
    }
  ],
  "dataGroups": [],
  "hashTable": {
    "/showcase-app/CardObject.f4ac54620cd0f92eb623.png": "425c1e1cfed36bea7d7d3637fa95c147bd5480d3"
  },
  "navigationUrls": [
    {
      "positive": true,
      "regex": "^\\/.*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

我正在使用 Angular 8

【问题讨论】：

我认为这个问题与 PWA 无关。这个问题很可能是因为您在子 url 中进行部署。可能你需要在 base 和 .htaccess 中指定这个
@SGalea，您能再澄清一下吗？我需要在哪里指定什么？我正在使用 Apache tomcat 服务器，但不确定 .htaccess 文件是否可用。
在 stackblitz.com 上复制该问题，因为我只是在猜测。问题是您的 index.html 位于展示应用程序下，您有一些自定义设置，我们还需要了解这些自定义设置以帮助您
PWA 也不能很好地工作，除非 https。尝试直接部署在localhost:8080下不带子文件夹开始排查。
我试图在 stackblitz.com 上重现该问题，但我认为它与 tomcat 部署有关。我也不能直接在tomcat下部署，因为它尝试单独部署所有子文件夹

标签： java angular angular-service-worker

【解决方案1】：

根据此文档，您需要 https 才能与服务人员一起工作...无论如何，如果您在本地 tomcat 中尝试它，它将起作用...

https://developers.google.com/web/fundamentals/primers/service-workers/#you_need_https

发现于：https://stackoverflow.com/a/56376214/5360905

【讨论】：