我可以在服务人员中捕获 404 吗？

Question

Basically, I have an online app that uses a htaccess file to silently redirect all requests in a given /folder/ to the same html. Then, to decide what to show the user, the page calls

var page_name = location.href.split('/').pop();

This works well online, but could I use a ServiceWorker to support this folder/file model while the page is offline? Or will I always get the page cannot be found error unless I explicitly cache the URLs?

Answer 1

What you describe can be accomplished using the App Shell model .

Your service worker's exact code might look a little different, and tools like Workbox can automate some of this for you, but a very basic, "vanilla" example of a service worker that accomplishes this is:

self.addEvenListener('install', (event) => {
  const cacheShell = async () => {
    const cache = await caches.open('my-cache');
    await cache.add('/shell.html');
  };

  event.waitUntil(cacheShell());
});

self.addEventListener('fetch', (event) => {
  // If this is a navigation request...
  if (event.request.mode === 'navigate') {
    // ...respond with the cached shell HTML.
    event.respondWith(caches.match('/shell.html'));
    return;
  }

  // Any other caching/response logic can go here.
});

Regardless of what the location.href value is, when this service worker is in control, the App Shell HTML will be used to fulfill all navigation requests.