無法安裝站點：未檢測到匹配的服務工作者

Question

嘿，我正在嘗試編寫我的第一個 pwa 並遇到以下問題：

當我啟動我的 web 應用程序時，出現以下錯誤：

無法安裝站點：未檢測到匹配的服務工作者。 您可能需要重新加載頁面，或者檢查當前頁面的 service worker 是否也控制清單中的 start URL

我認為我的清單 url 是正確的，因為這個鏈接

清單.json

"start_url": ".",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#29BDBB",
"background_color": "#29BDBB"

我這樣注冊我的軟件：

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(reg) {
    console.log('Successfully registered service worker', reg);
}).catch(function(err) {
    console.warn('Error whilst registering service worker', err);
});
}

我從這里得到了我的 sw

所以我正在嘗試制作一個簡單的 web 應用程序，我可以用firebase托管它。

有什么問題？ 謝謝你的幫助

Answer 1

將 Service Worker 腳本文件放在您網站的根目錄並將start_url設置為/ ，或者將其放在您想要的任何位置並使用scope屬性和Service-Worker-Allowed HTTP 標頭，如我的其他答案。

Answer 2

以防萬一其他使用 Angular8+ 的人發生這種情況。 您可能需要將注冊策略更改為：

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

默認情況下，它被設置為registerWhenStable ，當沒有掛起的任務時， like setTimeout()等。通過將其更改為registerImmediately ，它會盡快注冊您的服務工作者。

只是想我會分享這個並在這里添加它，因為這讓我失去了幾天的時間來解決它。

Answer 3

create react app service worker 只在生產中生效，所以構建它並在本地提供它以測試 service worker 是否正常工作。

如果還沒有，請先安裝 serve npm： npm i serve -g

那么...

npm run build

serve -s build

也有可能一旦服務工作者成功注冊，但可能不會調用beforeinstallprompt東西。 如果是這種情況，請使用beforeinstallprompt類的主機發布應用程序，該主機將通過https為站點提供服務，然后在那里嘗試beforeinstallprompt 。

Answer 4

嘗試進行以下更改：

• 在manifest.json中， start_url和scope設置如下（或根據您的喜好）：

   "start_url": "/", "scope": "."

• sw.js文件位於項目根目錄，以 start_url 為參考。

Answer 5

為了我的工作，將庫“@angular/service-worker”：“^7.2.15”更新到版本，“@angular/service-worker”：“^ 8.2.3”

還放置： ServiceWorkerModule.register ('ngsw-worker.js', {enabled: environment.production, registrationStrategy: 'registerImmediately'}),

Answer 6

解決此問題的一種方法是在 service worker 包含后添加查詢參數。 所以通常你 html 看起來像這樣。

<script src="https://example.com"></script> 

你可以修改它看起來像這樣

<script src="https://example.com?v=1.1"></script>