Как правильно реализовать резервный режим в автономном режиме с помощью workbox? - PullRequest
Новая
       28

Как правильно реализовать резервный режим в автономном режиме с помощью workbox?

0 голосов
/ 27 ноября 2018

Я внедряю 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/, но если я посещаю любой URL в объеме, который я определил ранее для "pages-cache" как https://website.com/articles/231/ это не вернет страницу / offline, поскольку она не находится в пользовательском кэше, и я получу обычную ошибку браузера.

Существует проблема в том, как обрабатываются ошибки, когда существует определенный маршрут кэширования по рабочему ящику.

Это лучший метод для применения в автономном режиме отступать?как я могу отследить ошибки по этим путям: '/ article' & '/ posts' и отобразить офлайн-страницу?

Пожалуйста, обратитесь также к этому ответу , где есть другойПодход к применению фалька с рабочей коробкой, я попробовал, а также те же результаты.Не уверен, что именно для этого подходит.

1 Ответ

0 голосов
/ 03 декабря 2018

Я нашел способ сделать это правильно с рабочим столом.Для каждого маршрута я хотел бы добавить запасной метод, подобный следующему: 

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
);

Более подробная информация в документации по рабочему ящику здесь: Предоставить запасной ответ на маршрут

...