更新用cra-template-pwa创建的PWA

Question

我用create-react-app使用cra-template-pwa模板创建了一个PWA，但是我在更新应用程序时遇到了问题。

现在，正确地检测到内容，并在控制台中显示消息：

New content is available and will be used when all tabs for this page are closed. See https://cra.link/PWA

问题是，即使在通过window.location.reload(true);刷新页面之后，内容也不会更新。实际上，在浏览器中，我必须使用Shift + F5进行硬重加载才能显示新内容。

这使我相信，我可能需要删除缓存，但这样做会导致浏览器中的ERR_FAILED。

那么，更新后重新加载我的PWA的正确方法是什么？

这是处理更新的相关功能：

function registerValidSW(swUrl, config) {
  navigator.serviceWorker.
    register(swUrl).
    then((registration) => {

      registration.update();

      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker === null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              console.log('New content is available and will be used when all ' +
                'tabs for this page are closed. See https://cra.link/PWA.',);

              toast.info('Update available! Click to update app.', {
                toastId: 'appUpdateAvailable',
                onClose: () => {
                  window.caches.keys().then((keys) => {
                    for(let i = 0; i < keys.length; i += 1) {
                      caches.delete(keys[i]);
                    }
                    window.location.reload(true);
                  });

                },
                autoClose: false
              });

              // Execute callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              console.log('Content is cached for offline use.');

              // Execute callback
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    }).
    catch((error) => {
      console.error(
        'Error during service worker registration:',
        error
      );
    });
}

Answer 1

诀窍是跳过等待新的服务人员。

我调整了服务业人员的登记如下：

function registerValidSW(swUrl, config) {
  navigator.serviceWorker.
    register(swUrl).
    then((registration) => {

      registration.update();
      setInterval(() => {
        // Check for updates every 5 minutes
        registration.update();
      }, 1000 * 60 * 5);

      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker === null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              /*
               * At this point, the updated precached content has been fetched,
               * but the previous service worker will still serve the older
               * content until all client tabs are closed.
               */
              console.log('New content is available and will be used when all ' +
                'tabs for this page are closed. See https://cra.link/PWA.',);

              registration.waiting.postMessage({ type: 'SKIP_WAITING' });
              toast.info('Update available! To update, refresh this tab.', {
                toastId: 'appUpdateAvailable',
                autoClose: false
              });

              // Execute callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              /*
               * At this point, everything has been precached.
               * It's the perfect time to display a
               * "Content is cached for offline use." message.
               */
              console.log('Content is cached for offline use.');

              // Execute callback
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    }).
    catch((error) => {
      console.error(
        'Error during service worker registration:',
        error
      );
    });
}

这将通知用户一个新的更新是可用的，他必须刷新他的浏览器。在简单的重新加载之后，新版本将被加载。不需要手动清除缓存。