Страница не отвечает при установке новой сервисной программы. Все статические файлы выбираются снова с каждым небольшим обновлением - PullRequest
Новая
       3

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

0 голосов
/ 24 апреля 2019
  1. Наша страница перестает отвечать на запросы при установке новой сервисной программы.Наша цель - установить новый сервисный работник, но не дать обработчику установки запрашивать ресурсы, которые борются за пропускную способность с запросами главной страницы.
  2. Событие установки сервисного сервера занимает много времени, так как все файлыснова, даже после крошечного обновления.Служебный работник должен (повторно) извлекать динамические файлы только после обновления (см. MutableRequests в приведенном ниже коде).И только НОВЫЕ статические файлы должны быть извлечены после обновления работника сервиса, а не все статические файлы (см. ImmutableRequests в приведенном ниже коде).

Пожалуйста, найдите ниже комментарии в коде, которые объясняют, что у меня естьпопробовал уже. 

// Register the serviceworker:

  if ('serviceWorker' in navigator) {
   window.addEventListener('load', function() {
     navigator.serviceWorker
            .register('/sw.js')
            .then(function() { console.log("Service Worker Registered"); });
   });
  }

// The serviceworker:

'use strict';

// To update the version of the serviceworker:
var CACHE_NAME = 'swwo-cache-v143';

// The 'static' assets:
var immutableRequests = [

    // Many assets here:
    '/js/awesomplete.js',
    '/js/bootstrap.min.js',
    '/img/earth-from-space.jpg'
    // ETC...

];

// The 'dynamic' assets:
var mutableRequests = [

        // Only a few assets here:          
        '/index.html',
        '/legal.html'
        // ETC...       

];

// Here the goal was to make sure that all the mutableRequests are being fetched again, and only the NEW immutableRequests:
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
      var newImmutableRequests = [];
      return Promise.all(
        immutableRequests.map(function(url) {
          return caches.match(url).then(function(response) {
            if (response) {
              return cache.put(url, response);
            } else {
              newImmutableRequests.push(url);
              return Promise.resolve();
            }
          });
        })
      ).then(function() {
        return cache.addAll(newImmutableRequests.concat(mutableRequests));
      });
    })
  );
});


self.addEventListener('fetch', event => {
  var requestURL = new URL(event.request.url);

// Try the cache first:
  if (requestURL.origin == location.origin && requestURL.pathname == '/') {
    event.respondWith(caches.match('/index.html'));
    return;
  }

// Analytics exception:
  else if (requestURL.host === 'www.google-analytics.com') {
  event.respondWith(fetch(event.request));
}

 else {

 event.respondWith(
// Try the cache:
    caches.match(event.request)
// Fall back to the network:
      .then(response => response || fetch(event.request))
// A general fallback:
      .catch(function() {   
       return caches.match('/offline/index.html');

      })
  );}

});


// Removing the old cache:
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (CACHE_NAME !== cacheName) {
    console.log('Deleting out of date cache:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

1 Ответ

0 голосов
/ 24 апреля 2019

1. 

          return caches.match(url).then(function(response) {

Есть ошибка: вы должны вызывать cache.match, чтобы сопоставить интересующий вас кеш. Не cacheS с "s":)

2.

Если вы всегда обновляете имя кеша 

// To update the version of the serviceworker:
var CACHE_NAME = 'swwo-cache-v143';

, тогда ни один из ранее извлеченных и кэшированных ресурсов не будет найден, верно?

Помните: браузер считает скрипт SW новым, даже если в файле скрипта SW изменяется даже SINGLE BYTE, поэтому любое изменение в ресурсах, которые вы хотите кэшировать, сделает ПО новым браузером.Вам не нужно нигде хранить отдельный номер версии, если он вам ни для чего не нужен.Здесь это, кажется, вызывает проблему.Вы можете указать номер версии в комментарии, если хотите, чтобы он был.

Также следует отметить одну вещь: если вам не нужен SW для регистрации / обновления как можно скорее, вы можете отложить его.Используйте setTimeout, чтобы отложить регистрацию SW на 15 секунд или что-то еще, чтобы пользователь мог использовать страницу как можно скорее.Это делает приложение более плавным.

...