Angular Service Worker提取错误

Question

关于与服务人员一起使用Angular 6 Web应用程序：通过Chrome访问我们的质量检查网站-service worker时，我们遇到了与此Site can't be reached相关的错误。

一个临时解决方法是打开f12 dev console并选择Update on reload和Bypass for network复选框，然后刷新页面以访问该站点。

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

我们注意到的一个显而易见的事情是进入index.html页面的路径，这是错误的。它正在尝试在域根目录（即https://mydomain.myserver.com/index.html）上引用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安装的范围更改为您的部署文件夹。

未进行上述修改的默认工作程序激活安装在父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/路径上工作。因此，更改服务工作者的安装路径将解决此问题。