Как смоделировать настоящий «визит» с запросом на выборку внутри сервисного работника - PullRequest
0 голосов
/ 28 октября 2019

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

self.addEventListener('fetch', function(event) {

event.respondWith(
  fetch(event.request)
    .then(function(res) {
      return caches.open('cache')
            .then(function(cache) {
              cache.put(event.request.url, res.clone());
              return res;
            })
    })
    .catch(function(err) {
      console.log( err );
      return caches.match(event.request);
    })
  );
});

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

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

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

Проблема в том, что когда я делаю так, что некоторые ресурсы на некоторых страницах не кэшируются, например, карта Google на одной странице, есть ли способ имитировать реальное посещение страницы, который получает все ресурсы из URL с запросом на выборку?

Код извлечения:

 function fillDynamicCache(user_id = false) {
   let urls = [
    '/homepage',
    '/someotherpage',
    '/thirdpage',
    '/...',
   ];

   urls.map((url, id) => (
    fetch(url)
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' +
              response.status);
            return;
          }
          console.log( 'in fetch: ' + url );
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
    })
  ));

  }


self.addEventListener('message', (event) => {
// refresh cache when user comes back online
if (event.data == 'is_online') {
    fillDynamicCache();
} else if (event.data == 'is_updated') {
    self.skipWaiting();

1 Ответ

1 голос
/ 28 октября 2019

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

Таким образом, соответствующие запросы будут обслуживаться из кэша, что повышает производительность, поскольку вы полностью пропускаете относительные сетевые вызовы.

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

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

...