Почему рабочий ящик и vue не обслуживают файлы из кеша? - PullRequest
Новая
       104

Почему рабочий ящик и vue не обслуживают файлы из кеша?

1 голос
/ 22 января 2020

Мой случай довольно прост. Я хочу отобразить пользовательскую автономную страницу, когда я обновляю sh страницу и у меня нет сетевого подключения.

Поэтому я создаю приложение vue, используя cli с рабочим окном pwa.

Вот как vue .config. js выглядит так: 

module.exports = {
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'public/service-worker.js',
      swDest: 'service-worker.js',
    }
  }
};

Я добавляю это содержимое в public/offline.html: 

<html>I'm the offline page</html>

В public/service-worker.js я делаю иметь этот код: 

// public/service-worker.js

const offlinePage = '/offline.html';
workbox.setConfig({
  debug: true
});

workbox.core.setCacheNameDetails({ prefix: 'my-app' });

self.addEventListener('message', event => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

const customHandler = async args => {
  console.log('in customHandler!!1 route');
  return (await caches.match(offlinePage));
};

workbox.routing.registerRoute('/', customHandler);

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

и выполнить эту команду: 

npm run build &&  http-server -p 3001 dist

Теперь я go в браузере на localhost: 3001 и приложение работает: Service worker has been registered.

Также я вижу, что страница /offline кэшируется.

enter image description here

Проблема заключается в том, что я включаю флажок "Автономный" и refre sh.

Я получил 404. а не офлайн-страницу.

enter image description here

И самое странное, что У меня ничего нет в кеш-памяти .

enter image description here

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

1 Ответ

0 голосов
/ 22 января 2020

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

FetchEvent для "http://localhost: 3001 / " привел к сетевой ошибке: объект, который не был Ответом, был передан в responseWith ().

Это должно означать что-то не так с вашим оператором возврата: 

return (await caches.match(offlinePage))

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

const customHandler = async args => {
  console.log('in customHandler!!1 route');
  return (await caches.match(offlinePage));
};

workbox.routing.registerRoute('/', customHandler);

Из вашего кода это означает: мне все равно, я в сети или в автономном режиме, я верну кешированный.

Я не Я хорошо знаком с рабочей коробкой, но я пытаюсь исправить эту ошибку, основываясь на этом Cache.match : 

const customHandler = async args => {
  try {
    // try to load the index.html first
    return await fetch(args.event.request)
  } catch {
    // get cache name since it auto-generated from workbox
    let cache = await caches.open(workbox.core.cacheNames.precache)

    // get url name this can't just be '/offline' since workbox add some auto-generated name
    let url = workbox.precaching.getCacheKeyForURL(offlinePage)

    return caches.match(url)
  }
};
...