Перестанут ли PWA работать в Chrome 93?

Пользователь medium.com по имени Кевин Бэйсит предположил в своем блоге, что 52% всех Progressive Web Apps (PWA) перестанут работать с выходом Chrome 93 и Edge 93 (ожидаются в августе 2021 года). Его доводы основаны на появлении в манифесте консоли и приложения сообщения от разработчиков браузеров о смене критериев установки PWA.

В Google считают, что PWA никогда не должен отображать офлайн-экран Chrome по умолчанию. Вместо этого все PWA должны быть доступны в автономном режиме или отображать какую-то автономную страницу в качестве запасного варианта. Вероятно, это связано с распространением приложений PWA, созданных с помощью трюка, позволяющего приложениям не работать в действительности офлайн. Теперь для установки PWA разработчикам придется использовать кэш.

Для решения проблемы Кевин Бэйсит разработал ресурс Progressier. Он позволяет создать PWA-приложение за считанные минуты.

Тем, кто не заинтересован в использовании сторонних ресурсов, он предлагает набор методов, как сделать свои приложения совместимыми с ними. Согласно одному из них, нужно заполнить функцию «fetch», чтобы она кэшировала ресурсы. Для этого есть несколько способов:

— с помощью стратегии Network-Falling-Back-To-Cache ваш сервис-воркер сначала попытается получить ресурс с вашего сервиса, затем получить его из кэша.

self.addEventListener('fetch', function(event) {
   event.respondWith(async function() {
      try{
        var res = await fetch(event.request);
        var cache = await caches.open('cache');
        cache.put(event.request.url, res.clone());
        return res;
      }
      catch(error){
        return caches.match(event.request);
       }
     }());
 });

— с помощью стратегии Stale-While-Revalidate ваш сервис-воркер сначала смотрит в кэш, а также посылает запрос серверу. Если ресурс существует в кэше, он сразу отправит загрузит его на клиенту. Если сервер ответит на запрос, он сохранит данные с сервера в кэше.

self.addEventListener('fetch', function(event){
   event.respondWith(async function () {
      var cache = await caches.open('cache');
      var cachedResponsePromise = await cache.match(event.request);
      var networkResponsePromise = fetch(event.request);
      event.waitUntil(async function () {
         var networkResponse = await networkResponsePromise;
         await cache.put(event.request, networkResponse.clone());
      }());
      return cachedResponsePromise || networkResponsePromise;
    }());
});