Как обновить PWA, когда он уже установлен - PullRequest
Новая
       6

Как обновить PWA, когда он уже установлен

0 голосов
/ 13 января 2020

поэтому я создал приложение MERN Stack, преобразовал его в PWA и установил на свой Samsung и iPhone, чтобы посмотреть, как оно выглядит. Он отлично работает и даже протестирует его с Lighthouse на Chrome. Проблема в том, что я сделал некоторые изменения в некоторых ссылках, и когда я удаляю кеш, я вижу изменения на моем компьютере, но что произойдет, если клиент установит его, как они получат изменения, если они не знают о них .

Пожалуйста, дайте мне знать, если есть способ сделать изменения sh автоматически. Сайт plitz7.com

Ответы [ 2 ]

2 голосов
/ 13 января 2020

Вот как я делаю это в моем PWA. Добавьте следующий код на своей странице, где вы регистрируете сервисного работника: 

<script type="module">


import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/4.1.0/workbox-window.prod.mjs';

  function createUIPrompt(opts) {
    if (confirm('A new update is available. Do you want to update now?')) {
       opts.onAccept()
    }
  }

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');
    wb.addEventListener('waiting', (event) => {
      const prompt = createUIPrompt({
        onAccept: async () => {
          wb.addEventListener('controlling', (event) => {
            window.location.reload();
          });
          wb.messageSW({type: 'SKIP_WAITING'});
        }
      })
    });
    wb.register();
  }
  </script>

А затем внутри своего сервисного работника добавьте следующий код: 

self.addEventListener("message", function(event) {
    if (event.data && event.data.type === "SKIP_WAITING") {
        skipWaiting();
    }
});

Подробнее об этом подходе вы можете найти здесь https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users

0 голосов
/ 08 февраля 2020

Я нашел свое решение. Я поставил var cacheName = "anyname-v1.0.0" на первую строку моего работника. js, в кеши я добавил .open(cacheName). Каждый раз, когда я делаю изменения в любой части моего сайта, я меняю версию имени кэша и вуаля!

...