Question

我正在将PWA实施到我的项目中，已经设置了serviceworker.js，并且正在使用workbox.js进行缓存路由和策略。

1-当用户首次访问该网站时，我会在安装事件中将离线页面添加到缓存：

/**
 * Add on install
 */
self.addEventListener('install', (event) => {
  const urls = ['/offline/'];
  const cacheName = workbox.core.cacheNames.runtime;
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)))
});

2-使用特定的正则表达式捕获和缓存页面，例如：

https://website.com/posts/the-first-post

https://website.com/posts/

https://website.com/articles/

workbox.routing.registerRoute(
  new RegExp('/posts|/articles'),
  workbox.strategies.staleWhileRevalidate({
     cacheName: 'pages-cache' 
  })
);

3-当没有互联网连接时，捕获错误并显示离线页面。

/**
 * Handling Offline Page fallback
 */
this.addEventListener('fetch', event => {
  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('/offline/');
          })
    );
  }
  else{
        // Respond with everything else if we can
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

现在，如果我访问例如https://website.com/contact-us/，但到目前为止，这对我仍然有效，但是如果我访问了之前为 “页面缓存” 定义的范围内的任何网址像https://website.com/articles/231/一样，由于它不在用户缓存中，因此它不会返回/ offline页面，而且我会收到常规的浏览器错误。

当工作箱有特定的缓存路线时，如何处理错误会出现问题。

这是申请离线后备广告的最佳方法吗？如何从以下路径中捕获错误：“ / articles”和“ / posts”并显示离线页面？

另外请参考this answer 将法拉克与Workbox结合使用的方法，我也尝试过结果。不确定哪种方法是正确的。

Answer 1

我找到了一种使用Workbox的方法。对于每条路线，我都会添加一个备用方法，如下所示：

const offlinePage = '/offline/';
/**
 * Pages to cache
 */
workbox.routing.registerRoute(/\/posts.|\/articles/,
  async ({event}) => {
    try {
      return await workbox.strategies.staleWhileRevalidate({
          cacheName: 'cache-pages'
      }).handle({event});
    } catch (error) {
      return caches.match(offlinePage);
    }
  }
);

在使用网络优先策略的情况下，此方法是

/**
 * Pages to cache (networkFirst)
 */
var networkFirst = workbox.strategies.networkFirst({
  cacheName: 'cache-pages' 
});

const customHandler = async (args) => {
  try {
    const response = await networkFirst.handle(args);
    return response || await caches.match(offlinePage);
  } catch (error) {
    return await caches.match(offlinePage);
  }
};

workbox.routing.registerRoute(
  /\/posts.|\/articles/, 
  customHandler
);

此处的工作箱文档中有更多详细信息：Provide a fallback response to a route

什么是通过Workbox实施离线回退的正确方法

1 个答案: