web-dev-qa-db-ja.com

プログレッシブWebアプリ-Service Workerがstart_URLを提供していない

プログレッシブWebアプリで遊んでいた。 Webアプリのインストールバナーを機能させようとしていますが、Lighthouseを使用してデバッグした後、service worker does not successfully serve the manifest's start_urlを受信し続けます（下図）。現在、Azureを使用してWebサイトをホストしています。

NEW：すべてのキャッシュ、start_url、およびサービスワーカーをチェックして、すべてが一致することを確認しました。しかし、それでも同じエラーが発生します。

enter image description here

start_urlなのか、service-workerproblemなのかわかりません。以下は私のコードです。

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);
    })
  );
});

ブラウザーのキャッシュ：

enter image description here

javascriptvisual-studiowebprogressive-web-apps
19
Mohamad Azrie

サービスワーカーの登録 からメモ

サービスワーカーファイルを/example/sw.jsに登録すると、サービスワーカーは、/example/で始まるURLのページ（/example/page1/、/example/page2/）のfetchイベントのみを表示します。

表示されたエラーとインラインで、この ドキュメント で指定されている場合、以下を確認します。

  1. start_urlファイルでmanifest.jsonプロパティを定義します。
  2. サービスワーカーがstart_urlの値に一致するリソースを適切にキャッシュするようにしてください。

また、これを確認してください tutorial そして、それがあなたを助けるかどうか確かめてください。

6
Teyam