mercredi 9 décembre 2020

PWA : Lighthouse start url warning

I am developing a simple progressive web application. It contains simple index.html and a couple of js file in same directory. I implemented first network cache strategy for PWA. I am using Lighthouse for verification. In Lighthouse report, it warn about "start_url" to me for first network strategy. When i try first cache strategy, Lighthouse report is okey for "start_url". I confused in this case. In application tab, manifest file does not have any error and index.html contains manifest file. It is working for case 1. I suspected manifest start_url because of that i tested "start_url" with "./","/",".","/index.html","https://127.0.0.1:443","https://198.168.xx.xx:443". These are not worked. When i test manually, application is working. Has anyone encountered this kind of problem before?

Thanks,

Lighthouse Warning:

start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker

Fetch Mechanism Case 1(First Cache) and Case 2(First Network):

self.addEventListener("fetch", event => {
    event.respondWith(
        caches.open(CACHE_NAME).then(function (cache) {
          return cache.match(event.request).then(function (response) {
            var fetchPromise = fetch(event.request).then(function (networkResponse) {
              cache.put(event.request, networkResponse.clone());
              return networkResponse;
            })

            // Case 1: First Cache -> Lighthouse report ok
            //return response || fetchPromise ;
            // Case 2: First Network -> -> Lighthouse report warn about "start_url"
            return  fetchPromise || response ;
          });
        })
    )
});

Install:

const toCache = [
    '/',
    '/index.html',
    '/main.js',
    ...
];
self.addEventListener("install", e => {
    e.waitUntil(
        caches.open(CACHE_NAME).then(function (cache) {
            return cache.addAll(toCache).then(self.skipWaiting());
        }));
});

Manifest:

{
    "start_url": ".",
    "background_color" : "#6dcdb1",
    "theme_color": "#6dcdb1",
    ...
}



Aucun commentaire:

Enregistrer un commentaire