Как контролировать, использует ли PWA кэшированную версию или выбирает последнюю версию?

Question

Я установил свой PWA из Chrome и Firefox на Android и из Safari на iOS. Когда я обновляю свой код на веб-сайте, я вижу совершенно другое поведение в PWA с точки зрения использования старых кэшированных версий по сравнению с самой новой - созданный Firefox PWA, кажется, требует 2-3 уничтожения и перезапуска PWA, Chrome занимает 5 -6, и я не мог заставить PWA на основе Safari начать показ самой новой версии без удаления PWA и повторного добавления на главный экран из браузера.

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

Answer 1

Несколько обобщенных соображений относительно SW и PWA: Как только вы зарегистрируете своего Service Worker (SW), вы должны отменить его регистрацию, чтобы убедиться, что вы получите последнюю / обновленную версию, и вы можете сделать это на вкладке приложения в Service Service.

, а затем

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

Пока вы сохраняете имя объекта таким же, а также не отменяете регистрацию программного обеспечения и не очищаете хранилище кэша, вам придется обновлять свой веб-сайт. Также есть опция аппаратная перезагрузка / очистка кэша и аппаратная перезагрузка , если вы продолжаете нажимать кнопку обновления браузера в течение нескольких секунд, но она все равно не будет работать, пока вы не зарегистрируете своего сервисного работника. Таким образом, вкратце отмените регистрацию ПО и очистите хранилище Cache вручную или измените имя объекта хранилища Cache. Как и у любой другой технологии / актива, есть свои плюсы и минусы. Это один из недостатков PWA, если мы не используем его должным образом, ваш клиент никогда не получит последнюю версию, или время, которое он получит, может быть слишком поздно. Приветствия:)

Answer 2

Рассмотрим следующий код. Я разобью его на части:

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


    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

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

caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

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

 return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );

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

Рассмотрим случай, когда у вас есть файл sample.html, и он кешируется, теперь вы вносите некоторые изменения в код файла, но изменения не будут видны в вашем браузере, потому что он увидит, что sample.html (old ) уже присутствовал в кеше и отвечал им.