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頁面的路徑，這是錯誤的。 它正在嘗試在域根目錄處引用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
})

這會將服務工作者安裝的范圍更改為您的部署文件夾。

未進行上述修改的默認工作程序激活安裝在父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/路徑上工作。 因此，更改服務工作者的安裝路徑將解決此問題。