漸進式 Web 應用程序“無法脫機工作”錯誤

Question

我已經按照所有可用的指南和示例編寫了一個漸進式 Web 應用程序，但是由於某種原因，當我單擊“ Add to homescreen按鈕時，我不斷收到這個神秘的錯誤：

Site cannot be installed: does not work offline

我的 PWA 和示例之間的主要區別在於，我的 PWA 純粹是在域的非根路徑中運行，所以我不得不在不同位置為配置添加額外的路徑，因此應用程序僅限於非根文件夾。

Google Lighthouse站點也沒有多大幫助，給出了非常相似的信息。

誰能建議這個錯誤可能是由什么引起的？

Answer 1

所以我花了幾個小時，但我最終發現在連接到 serviceworker 時，您需要在客戶端 JavaScript 中指定一個必需的scope參數，如果它不在根 ( / ) 路徑上運行。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js?v2', {
        scope: '.' // <--- THIS BIT IS REQUIRED
    }).then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

您可以在此處查看工作產品：

• 應用程序： https : //stampy.me/pwgen/
• 清單文件： https : //stampy.me/pwgen/manifest.json
• ServiceWorker 文件： https : //stampy.me/pwgen/sw.js
• 應用腳本： https : //stampy.me/pwgen/script.js （PWA 代碼滾動到底部）

我希望我的痛苦可以拯救別人一些時間。

Answer 2

更新：

看起來谷歌也接受了快速黑客攻擊，警告又回來了。

因此，自 Chrome93 (AUG-2021) 以來，快速破解將不再起作用：

self.addEventListener('fetch', function(event) {})

“暫時”工作的解決方案（因為我們永遠不知道 Google 稍后會添加什么要求）

我找到了一篇很好的文章，其中提供了一些解決方案，作者提供的第一個是 Network-Falling-Back-To-Cache 策略：

您的 Service Worker 將首先嘗試從您的服務器檢索資源。 然后當它不能這樣做時——例如，因為你處於離線狀態——從緩存中檢索它（如果它存在的話）。

   self.addEventListener('fetch', function(event) {
   event.respondWith(async function() {
      try{
        var res = await fetch(event.request);
        var cache = await caches.open('cache');
        cache.put(event.request.url, res.clone());
        return res;
      }
      catch(error){
        return caches.match(event.request);
       }
     }());
 });

您可以在文章中找到所有信息和替代解決方案：

https://javascript.plainenglish.io/your-pwa-is-going-to-break-in-august-2021-34982f329f40

我希望這會對未來的游客有所幫助。

原答案：

您還需要在 service worker 文件中定義fetch偵聽器：

this.addEventListener('fetch', function (event) {
    // it can be empty if you just want to get rid of that error
});

Answer 3

這與其說是評論不如說是回答。

如果我在沒有互聯網連接的情況下安裝應用程序后調用該應用程序，似乎即使是“固定”應用程序也會生成“互聯網連接不可用”錯誤。