Мой работник службы кэширует текстовые / HTML-документы, такие как страница индекса, как это остановить? - PullRequest
Новая
       83

Мой работник службы кэширует текстовые / HTML-документы, такие как страница индекса, как это остановить?

0 голосов
/ 16 июня 2019

Я пытаюсь, чтобы мой PWA отвечал страницей offline.html, когда устройство находится в автономном режиме, и я рассматриваю ошибку при извлечении домашней страницы как офлайн, но, поскольку мой работник службы кэширует запросы text / html, мой PWA использует кэш для выборки домашней страницы каждый развремя.

Я использую workbox для генерации моего PWA, и я попытался удалить документ из файла workbox-config.js.

Код

workbox-config.js 

module.exports = {
    globDirectory: 'build/',
    globPatterns: [
        '**/*.{png,ico,css,js}',
    ],
    swDest: 'build\\sw.js',
    swSrc: 'src/sw.js',
    injectionPointRegexp: /(const precacheManifest = )\[\](;)/,
};

Обработчик получения в сервисном работнике 

self.addEventListener('fetch', (event) => {
    console.log('fetch event', event.request.url);
    // request.mode = navigate isn't supported in all browsers
    // so include a check for Accept: text/html header.
    // if (event.request.method === 'GET') {
    //  console.log(event.request.url, event.request.headers.get('accept'));
    // }
    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) => {
                console.log(123, error);
                // Return the offline page
                return caches.match('/offline.html');
            }),
        );
    }
    else {
        event.respondWith(
            caches.match(event.request)
                .then((response) => {
                    if (response) {
                        console.log('Found ', event.request.url, ' in cache');
                        return response;
                    }

                    return fetch(event.request);
                }),
        );
    }
});

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

current_output

вот URL: https://smartcopy -195fd.firebaseapp.com

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Во-первых, вам необходимо предварительно кэшировать автономную страницу 

workbox.precaching.precacheAndRoute([
  'offline.html'
]);

Чтобы ваша домашняя страница никогда не кэшировалась, вам необходимо настроить ее для использования только сетевой стратегии: 

workbox.routing.registerRoute(
  new RegExp('index.html'),
  new workbox.strategies.NetworkOnly({
      cacheName: 'htmlcache'
    })
);

Наконец, когда при выборке не удается найти домашнюю страницу, т. Е. Вы находитесь в автономном режиме, вам нужно ответить из кэша 

workbox.routing.setCatchHandler(({event}) => {
      return caches.match(workbox.precaching.getCacheKeyForURL('offline.html'));
});
0 голосов
/ 16 июня 2019

Если вы не хотите кэшировать ваш HTML-файл, вы можете использовать этот код.HTML является типом документа, поэтому мы можем использовать его, игнорируя запрос 

self.addEventListener("fetch", function (event) {
  //ignore these request
  if (event.request.destination === "document") {
      return;
  }
});
...