web-dev-qa-db-fra.com

Progressive Web App - Service Worker ne servant pas start_URL

Jouait avec l'application Web progressive. J'ai essayé de faire fonctionner la bannière d'installation de l'application Web, mais je continue de recevoir service worker does not successfully serve the manifest's start_url après avoir débogué avec Lighthouse (image ci-dessous). Actuellement, j'héberge mon site Web à l'aide d'Azure.

NOUVEAU: J'ai vérifié tout mon cache, start_url, ainsi que mon technicien de service pour voir tout ce qui correspond. Mais cela me donne toujours la même erreur.

enter image description here

Je ne sais pas si c'est mon start_url ou mon service-workerproblème. Voici mon code.

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

Cache de mon navigateur:

enter image description here

javascriptvisual-studiowebprogressive-web-apps
19
Mohamad Azrie

Noté de Enregistrer un travailleur de service ,

Si nous enregistrons le fichier de l'agent de service à /example/sw.js, le technicien ne verrait que les événements fetch pour les pages dont l'URL commence par /example/ (c'est à dire. /example/page1/, /example/page2/).

En ligne avec l'erreur affichée et donnée dans ce documentation , vérifiez les points suivants:

  1. Définissez un start_url propriété dans votre manifest.json fichier.
  2. Assurez-vous que votre technicien de service met correctement en cache une ressource qui correspond à la valeur de start_url.

Vérifiez également cela tutoriel et voyez si cela vous aidera.

6
Teyam