Dynami c Загрузка кеша в Service Worker - PullRequest
1 голос
/ 07 августа 2020

Добрый день, StackOverflow!

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

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

это происходит на моем локальном сервере, удаленном p c и смартфонах (как на веб-странице, так и в приложении PWA)

Если я удалю сгенерированный кеш, он вернется в нормальное состояние. Что делать в этой ситуации?

вот мой sw. js файл:

const dynamicCacheName = 'ver-v1';
// activate event
self.addEventListener('activate', evt => {
  evt.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys
        .filter(key => key !== dynamicCacheName)
        .map(key => caches.delete(key))
      );
    })
  );
});
// fetch event
self.addEventListener('fetch', evt => {
  evt.respondWith(
    caches.match(evt.request).then(cacheRes => {
      return cacheRes || fetch(evt.request).then(fetchRes => {
        return caches.open(dynamicCacheName).then(cache => {
          cache.put(evt.request.url, fetchRes.clone());
          return fetchRes;
        })
      });
    })
  );
});

Ответы [ 2 ]

0 голосов
/ 14 августа 2020

Добрый день. Я использовал Workbox, и теперь он работает, но кеш слишком велик для использования.

Вот что я сделал:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

if (workbox) {
  const CACHE_PREFIX = 'v01';

  workbox.setConfig({
    clientsClaim: true,
    debug: true,
    skipWaiting: true
  });
  workbox.core.setLogLevel(workbox.core.LOG_LEVELS.warn);

  // Javascript and CSS rule
  workbox.routing.registerRoute(
    new RegExp('^.*(?:js|css)'),
    new workbox.strategies.NetworkFirst(
      { cacheName: `${CACHE_PREFIX}-asset` }
    ),
  );

  // Main rule
  workbox.routing.registerRoute(
    new RegExp('^.*(?:)'),
    new workbox.strategies.NetworkFirst(
      { cacheName: `${CACHE_PREFIX}-main` }
    ),
  );

} else {
  console.log(`Boo! Workbox didn't load ?`);
}
0 голосов
/ 07 августа 2020

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

Просто намек. Вы можете отображать и кэшировать ответы в своем сервис-воркере. Вы можете перехватывать запросы и обслуживать разные версии на основе запроса, прежде чем они будут отправлены в сеть. Например, вы можете проверить, есть ли токен-носитель в заголовке вашего запроса. Если это так, и он актуален / действителен, то вы обслуживаете кешированную аутентифицированную версию, если нет, то версию publi c.

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

...