angular - Angular Service Worker 获取错误

Question

关于我们带有服务人员的 Angular 6 Web 应用程序：我们在service worker通过 Chrome 访问我们的 QA 网站时遇到了这个相关错误 - Site can't be reached。

临时修复是打开并f12 dev console选择复选框，然后刷新页面以访问该站点。Update on reloadBypass for network

这是 F12 开发控制台中显示的错误：

我们注意到的一件明显的事情是我们index.html页面的路径，这是错误的。它试图在域根目录引用 index.html - 即https://mydomain.myserver.com/index.html - 而它应该引用https://mydomain.myserver.com/mytestwebsite/index.html。

也许我们的 ngsw 配置文件有问题：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/api/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "6h"
      }
    },
    {
      "name": "custom-server",
      "urls": [
        "**/CustomServer.aspx?**"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "1d"
      }
    }
  ]
}

任何有关设置 Angular 服务人员的最佳方式的建议都值得赞赏。

Answer 1

您可以通过更改 app.module.ts 中的路径来克服这个问题。像这样

ServiceWorkerModule.register('/mytestwebsite/ngsw-worker.js', {
  enabled: environment.production
})

这会将 Service Worker 安装的范围更改为您的部署文件夹。

没有上述修改的默认worker激活安装在父url上

https://mydomain.myserver.com/index.html so when you enter https://mydomain.myserver.com/ngsw-worker.js it will return the file. 

您需要工作人员在https://mydomain.myserver.com/mytestwebsite/路径上工作。因此更改 service worker 的安装路径将解决问题。