Workbox advanced recipes example with Gulp

145 views Asked by At

I'm desperately trying to generate a serviceworker with Gulp and the Workbox generateSW library to serve an "offline.html" page when there is no connection.

I tried to use the advanced recipe "offline page only" given in the workbox documentation, but without success (https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offline_page_only).

The idea is to write with the Gulp Workbox generateSW library, an equivalent of this vanilla function:

   this.addEventListener('fetch', event => {
  // request.mode = navigate isn't supported in all browsers
  // so include a check for Accept: text/html header.
  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        // Respond with everything else if we can
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

I've no problem to use the lib to cache the offline page, but i couldn't find the syntax to generate the fetch part.

Could someone help me? Thank you very much.

0

There are 0 answers