Прогрессивное веб-приложение офлайн-обновление не работает

Question

Недавно я сделал свое первое прогрессивное веб-приложение с рабочим сервисом, сгенерированным модулем узла Google «sw-precache» (я использовал задачу Gulp в demo). Все работает отлично, и я могу перемещаться по веб-приложению, когда я в автономном режиме, используя Chrome на мобильных устройствах или используя значок, созданный Chrome, с помощью опции «Добавить на главный экран» (мое прогрессивное веб-приложение).

У меня есть только одна странная проблема: если я не в сети, и я обновляю страницу в Chrome, она по-прежнему работает, но если я делаю то же самое с помощью pwa, она показывает динозавр и сообщение «Вы в автономном режиме» (обновить) путем прокрутки). Но если я перемещаюсь по приложению без обновления страницы, никакого динозавра.

Это известная проблема?

Answer 1

Из-за внешнего вида вы использовали только sw-precache. У работника службы, похоже, нет обработчика событий, чтобы слушать, что делать, если страница не кэшируется. Вы можете использовать sw-toolbox для обработки кэширования будущих посещений и обработки автономной страницы. Heres код

self.toolbox.router.get('/(.*)', function (req, vals, opts) { 
    return self.toolbox.networkFirst(req, vals, opts) 
     .catch(function (error) { 
      if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) { 
       return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts); 
      } 
      throw error; 
     }); 
    });