漸進式 Web 應用程序 - Service Worker 不提供 start_URL

Question

正在玩漸進式網絡應用程序。 我試圖使 Web 應用程序安裝橫幅正常工作，但在我使用 Lighthouse（下圖）進行調試后，我一直收到service worker does not successfully serve the manifest's start_url 。 目前我正在使用 azure 托管我的網站。

新：我檢查了我的所有緩存、start_url 以及我的服務工作者，以查看所有內容是否匹配。 但它仍然給我同樣的錯誤。

我不確定這是我的start_url還是我的service-worker問題。 下面是我的代碼。

manifest.json

  {
   "short_name": "MY EXPERTS",
   "name": "MYEXPERT",
   "icons": [
    {
      "src": "Images/petronas_logo_192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "Images/petronas_logo_192.png",
      "type": "image/png",
      "sizes": "512x512"
    }
 ],

 "background_color": "#FFFFFF",
 "theme_color": "#67BCFF",
 "display": "standalone",
 "start_url": "/Home/Index"
}

AddServiceWorker.js

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').
    then(function (registration) {
        // Registration was successful``
        console.log('ServiceWorker registration successful with scope: ', 
registration.scope);
    }).catch(function (err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

service-worker.js

 self.addEventListener('install', e => {
 e.waitUntil(
    caches.open('airhorner').then(cache => {
        return cache.addAll([
            '/',
            '/?utm_source=homescreen',
            '/Home/About',
            '/Home/Index',
            '/Home/Contact'
        ])
            .then(() => self.skipWaiting());
    })
  )
});

self.addEventListener('activate', event => {
 event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
        return response || fetch(event.request);
    })
  );
});

我的瀏覽器緩存：

Answer 1

從注冊服務工作者注意到，

如果我們在/example/sw.js注冊 service worker 文件，那么 service worker 只會看到 URL 以/example/開頭的頁面的fetch事件（即/example/page1/ ， /example/page2/ ）。

根據顯示的錯誤並在本文檔中給出，請檢查以下內容：

1. 在manifest.json文件中定義一個start_url屬性。
2. 確保您的 Service Worker 正確緩存了與start_url值匹配的資源。

另外，請查看本教程，看看它是否對您有所幫助。

Answer 2

您應該在"start_url"提供 url，如果您使用的是本地主機，它應該包含下一個： "start_url": "http://localhost:8080/index.html" ,

Answer 3

請注意……您在上面注意到頁面是通過“https”提供的。 但是，如果其他一切都正確，並且沒有使用 https，您將收到相同的錯誤消息。

Answer 4

伙計們，一直在為同樣的問題苦苦掙扎，只是發現我的 html 鏈接標簽丟失了，請確保您指示您的清單文件位於網站標題的位置：

<link rel="manifest" href="/manifest.json">

Answer 5

已回答

• 轉到您的公用文件夾，
• 轉到您的manifest.json文件，
• 現在將"start_url": "/",到 json 對象。
• 請參閱下面的示例。

{ "name": "Occasionally Frustrated", "short_name": "Occasionally Frustrated", "start_url": "/", "display": "standalone" }