Сервисный работник захватывает все - PullRequest
Новая
       2

Сервисный работник захватывает все

0 голосов
/ 15 февраля 2020

Я только недавно начал возиться с работниками сферы обслуживания, и у меня возникла ситуация, когда независимо от того, какие файлы я советую добавить в кеш, он добавляет все . Теперь это обычно означало бы меньше работы для автономного приложения, но я немного запутался. Таким образом, кажется, что кэш имеет два метода добавления запросов к нему, .add() и .addAll(), причем последний способен принимать массив запросов, но даже с помощью .add() с жестко закодированным запросом, абсолютно все запросы, похоже, попадают в кеш.

Код, который у меня есть, выглядит следующим образом: 

    if ('serviceWorker' in navigator) {
        //console.log('CLIENT: service worker registration in progress.');
        navigator.serviceWorker.register('/sw.js').then(function() {
            //console.log('CLIENT: service worker registration complete.');
        }, function() {
            //console.log('CLIENT: service worker registration failure.');
    });
    } else {
        console.log('CLIENT: service worker is not supported.');
    }

... это происходит на реальной странице, вызывающей работника сервиса и работника сервиса сам по себе: 

var cacheName = 'cache';

self.addEventListener('install', (e) => {
    console.log('[Service Worker] Install');
var appShellFiles = [
];

e.waitUntil(
    caches.open(cacheName).then((cache) => {
          console.log('[Service Worker] Caching all: app shell and content');
      return cache.add('assets/images/boy.svg').then(function() {
        // requests have been added to the cache
        console.log('added')
      });
    })
  );
});

self.addEventListener('fetch', (e) => {
    e.respondWith(
      caches.match(e.request).then((r) => {
            console.log('[Service Worker] Fetching resource: '+e.request.url);
        return r || fetch(e.request).then((response) => {
                  return caches.open(cacheName).then((cache) => {
            console.log('[Service Worker] Caching new resource: '+e.request.url);
            cache.put(e.request, response.clone());
            return response;
          });
        });
      })
    );
  });

self.addEventListener('activate', (e) => {
    e.waitUntil(
      caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
          if(key !== cacheName) {
            return caches.delete(key);
          }
        }));
      })
    );
  });

... но здесь .add('assets/images/boy.svg') был .addAll(appShellFiles), который сам по себе содержал отдельные файлы, но, казалось, игнорировал список и все еще кэшировал все. Чего мне не хватает?

1 Ответ

1 голос
/ 16 февраля 2020

Это очень просто. Посмотрите на этот код: 

self.addEventListener('fetch', (e) => {
    e.respondWith(
      caches.match(e.request).then((r) => {
            console.log('[Service Worker] Fetching resource: '+e.request.url);
        return r || fetch(e.request).then((response) => {
                  return caches.open(cacheName).then((cache) => {
            console.log('[Service Worker] Caching new resource: '+e.request.url);
            cache.put(e.request, response.clone());
            return response;
          });
        });
      })
    );
  });

Он сохраняет все в кэше динамически / на лету / автоматически. Ваш код верен - изначально он кэширует только тот файл, который вы упомянули. Но как только приложение запускается, ПО кэширует все.

Еще один способ взглянуть на проблему «кэширования всего»: кэширование всего даже не означает что-либо . Браузер не может знать, что означает это «все» для определенного сайта. Это может быть 4 или 4000 активов. Как только это реализовано, нужно только найти правильный фрагмент кода.

...