jekyll + service worker failure : service worker does not successfully serve the manifest's start_url

4
votes

can't set up the service worker for jekyll-powered project site, Lighthouse refusing start_url value and giving an error Unable to fetch start URL via service worker

app->manifest output shows root /

tried ./index.html as well - same results. is there a way to pass the audit?


manifest.json:


{
  "name": "outcast",
  "short_name": "outcast",
  "icons": [
    {
      "src": "/assets/images/splsh192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/assets/images/splsh512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "lang": "en-US",
  "display": "standalone",
  "background_color": "#131313",
  "theme_color": "#f62e1a",
  "start_url": "/",
  "serviceworker": {
   "src": "sw.js",
   "scope": "/",
   "update_via_cache": "none"
 }
}

sw.js

2
google-chrome-devtoolsjekyllservice-workerworkboxlighthouse
You have an error in your fetch handler in the service worker. You can see it by opening the Chrome DevTools loading your site, and then enabling offline. – abraham
@abraham console gets green after 2-3 reloads, can not figure this out as well. used following as reference jamesiv.es/jekyll/amp/2017/05/09/… – charlie137

2 Answers

2
votes

replacing fetch handler in sw.js with the code from official guide fixed the issue. still debugging undefined cache

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});
0
votes

You can try that way. I had a similar problem:

self.addEventListener("fetch", function(event) {
  event.respondWith(
    fetch(event.request).catch(function(error) {
      console.log(
        "[Service Worker] Network request Failed. Serving content from cache: " +
          error
      );
      //Check to see if you have it in the cache
      //Return response
      //If not in the cache, then return error page
      return caches
        .open(
          "https://your.website"
        )
        .then(function(cache) {
          return cache.match(event.request).then(function(matching) {
            var report =
              !matching || matching.status == 404
                ? Promise.reject("no-match")
                : matching;
            return report;
          });
        });
    })
  );
});