Как заставить Service Worker кэшировать данные из API и обновлять кеш при необходимости - PullRequest
Новая
       140

Как заставить Service Worker кэшировать данные из API и обновлять кеш при необходимости

0 голосов
/ 11 июля 2020

Я преобразовал свое приложение React в PWA, и оно работает частично нормально.

Я последовал этому руководству: https://medium.com/@toricpope / transform-a-react-app-into-a-прогрессив- web-app-pwa-dea336bd96e6

Однако в этой статье показано только, как кэшировать данные stati c, и мне также нужно хранить данные, полученные с сервера, я мог бы сделать это, следуя инструкциям первый ответ этого сообщения: Как я могу кэшировать данные из API в Cache Storage в React PWA? и вставляя адреса firebase, где данные хранятся, в массив urlsToCache, заполненный файлами, которые должны быть сохранены в кеше.

Пока все хорошо, однако после того, как данные будут сохранены в кеше, приложение перестает получать данные с сервера и загружает страницу только с данными из кеша, даже если сервер обновлено. Это то, что мне нужно исправить.

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

Я пытаюсь следовать этому руководству, но безуспешно: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#serving -предложения

Это мой рабочий. js файл: 

var CACHE_NAME = 'pwa-task-manager';
var urlsToCache = [
  '/',
  '/completed',
  '/index.html',
  '/static/js/main.chunk.js',
  '/static/js/0.chunk.js',
  '/static/js/1.chunk.js',
  '/static/js/bundle.js',
  '/calculadora',
  'https://calc-marmo.firebaseio.com/clientes.json',
  'https://calc-marmo.firebaseio.com/adm.json',
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update a service worker
self.addEventListener('activate', event => {
  var cacheWhitelist = ['pwa-task-manager'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 16 июля 2020

Похоже, вам нужна стратегия Сначала сеть , которая не упоминается в кулинарной книге. Эта стратегия похожа на возврат сети к кэшу , но дополнительно всегда сохраняет ответ в кеше.

Пояснение: https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_first_network_falling_back_to_cache

Код образец (если вы не используете workbox): https://gist.github.com/JMPerez/8ca8d5ffcc0cc45a8b4e1c279efd8a94

...