Как перезагрузить кеш PWA? - Angular 11 PWA, Chrome Android

Последние пару дней я боролся с загрузкой новой версии PWA в моем приложении Angular 11. Начинаю выдергивать волосы!

У меня этого не происходит:

Каждый раз, когда пользователь открывает или обновляет приложение, работник службы Angular проверяет наличие обновлений для приложения, ища обновления в манифесте ngsw.json. Если обновление обнаружено, оно загружается и кэшируется автоматически и будет обслуживаться при следующей загрузке приложения. = "nofollow noreferrer"> Angular - Service worker в производственной среде

Я использую службу Angular SwUpdate.checkForUpdate(), которая отлично работает, обнаруживает и предлагает пользователю перезагрузить, когда становится доступной новая версия. Приложение перезагружено и находится в новой версии, которая идеально подходит.

Однако, если я закрою приложение на своем телефоне и снова открою его, всегда возвращается к первой версии, когда был установлен PWA :(

Я пробовал SwUpdate.activateUpdate() window.location.reload(), меняя номера версий, работника пользовательского сервиса ... и т. Д. И т. Д.

Единственное, что работает, - это очистить мои данные о просмотре в Chrome и переустановить PWA :(

Я ничего не могу сделать, чтобы кеш PWA обновился до новой версии. Он получает новую версию, но кеш не обновляется.

Может ли кто-нибудь указать мне здесь правильное направление? Что мне не хватает?

Android 10, Chrome 89.0.4389.105


angular progressive-web-apps angular-pwa
person Emmanuel    schedule 04.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Основная проблема заключалась в длительном 30-дневном истечении максимального срока действия index.html. Мне кажется, что Chrome на Android сначала загружается из стандартного кеша браузера, а затем попадает в pwa-кеш.

Этого не происходило на рабочем столе Chrome, только на Android из того, что я тестировал.

Я решил эту проблему:

  1. Установка короткого срока действия max-age на index.html (на стороне сервера)

Дополнительные шаги могут быть ненужными в зависимости от вашей ситуации:

  1. Удаление index.html из ngsw.config.json для принудительной загрузки из сети.
  2. Сотрудник специальной службы для отправки сообщения "вы не в сети" (см. Ниже)

Работник таможенной службы, в app.module.ts

ServiceWorkerModule.register('./offline-service-worker.js', { enabled: environment.production }),

offline-service-worker.js файл:

const CACHE_NAME = 'offline';
const OFFLINE_URL = '/assets/offline-page.html';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
  })());
});

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    if ('navigationPreload' in self.registration) {
      await self.registration.navigationPreload.enable();
    }
  })());
  self.clients.claim();
});

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        // First, try to use the navigation preload response if it's supported.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch is only triggered if an exception is thrown, which is likely
        // due to a network error.
        // If fetch() returns a valid HTTP response with a response code in
        // the 4xx or 5xx range, the catch() will NOT be called.
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse;
      }
    })());
  }
});

importScripts('./ngsw-worker.js');

Вся эта PWA - сложная штука. Но здорово, когда работает!

person Emmanuel    schedule 07.04.2021