Question

I have a very simple test site with 6 pages: temp1.html, temp2.html, temp3.html, temp4.html, temp11.html pages and an offline.html. All page links are hard coded. There is no routing. I am pre-caching all the files except temp11.html.

I want offline.html to be displayed when temp11.html is selected and the network is offline. I get the usual Chrome dinosaur when the network is offline and I browse to temp11.html Other preached pages are served offline as expected.

Any suggestions welcomed.

sw.js

-------------------
/* Welcome to your Workbox-powered service worker! */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.0.0-beta.0/workbox-sw.js");

/*

 * The workboxSW.precacheAndRoute() method efficiently caches and responds to

 * requests for URLs in the manifest.

 */

self.__precacheManifest = [
  {
    "url": "offline.html",
    "revision": "0e4b2f63e24f0e31badb470bf5812104"
  },
  {
    "url": "temp1.html",
    "revision": "be08f4cb03aa40aaf0bafbaa620efa48"
  },

  {
    "url": "temp2.html",
    "revision": "91fa624804aaaa7209545ca718b76230"
  },

  {
    "url": "temp3.html",
    "revision": "4e8753d5fc6ab011b813cac6e9a82e7b"
  },

  {
    "url": "temp4.html",
    "revision": "3f09411bc88c33dab4413aa3d467c20e"
  }

].concat(self.__precacheManifest || []);

workbox.precaching.suppressWarnings();

workbox.precaching.precacheAndRoute(self.__precacheManifest, {});


// Use a stale-while-revalidate strategy for all other requests.
//workbox.routing.setDefaultHandler(
//  workbox.strategies.staleWhileRevalidate()
//);

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
workbox.routing.setCatchHandler(({event}) => {

  // Use event, request, and url to figure out how to respond.

  // One approach would be to use request.destination, see

  // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c

  switch (event.request.destination) {

default:
      // If we don't have a fallback, just return an error response.

      return Response.error();
  }
});

Answer 1

通过更改sw.js的底部，它现在可以工作了。

离线时，当我输入不在此网站的缓存中的.html网址时，会生成HTML状态代码200。 test101.html。然后调用offline.html。

联机时的行为也相同。我认为这是正确的行为。

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.

 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.

 */


importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.0.0-beta.0/workbox-sw.js");

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 */
self.__precacheManifest = [
  {
    "url": "offline.html",
    "revision": "0e4b2f63e24f0e31badb470bf5812104"
  },
  {
    "url": "temp1.html",
    "revision": "be08f4cb03aa40aaf0bafbaa620efa48"
  },
  {
    "url": "temp2.html",
    "revision": "91fa624804aaaa7209545ca718b76230"
  },
  {
    "url": "temp3.html",
    "revision": "4e8753d5fc6ab011b813cac6e9a82e7b"
  },
  {
    "url": "temp4.html",
    "revision": "3f09411bc88c33dab4413aa3d467c20e"
  }
].concat(self.__precacheManifest || []);

workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
//    
//new bottom section     
//
    workbox.routing.registerRoute(
      new RegExp('/*.html'),
      async ({event}) => {
        try {
          return await workbox.strategies.networkFirst().handle({event});
        } catch (error) {
          return caches.match('/offline.html');
        }
      }
    );

Google workbox Offline page to replace Dinosaur page for very simple site

1 个答案: