PWA 突然停止安装 - 我应该改进缓存处理吗？如何？

问题描述

我正在 React 中做 PWA - 我在这方面是个菜鸟，但 PWA 已经运行了几个星期并且已经可以安装了。 :)

我突然收到这条消息：

网站无法安装：页面无法脱机工作。从 Chrome 93 开始，可安装性标准发生变化，此站点将无法安装。有关详细信息，请参阅 https://goo.gle/improved-pwa-offline-detection。

我想问题是这个人在这里写的是什么： https://javascript.plainenglish.io/your-pwa-is-going-to-break-in-august-2021-34982f329f40

但我的技能太差，无法在我的 Service-Worker 中实施他的建议。

如果您能在下面查看我的 Service-Worker 并告诉我要更改的内容，我将不胜感激。

window.location.hostname === 'localhost' ||
window.location.hostname === '[::1]' ||
window.location.hostname.match(
  /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
const publicUrl = new URL(process.env.PUBLIC_URL,window.location.href);
if (publicUrl.origin !== window.location.origin) {
  return;
}
window.addEventListener('load',() => {

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

if (isLocalhost) {
    checkValidServiceWorker(swUrl,config);

    navigator.serviceWorker.ready.then(() => {
      console.log(
        'This web app is being served cache-first by a service ' +
          'worker. '
      );
    });
  } else {
    registerValidSW(swUrl,config);
  }
});
}
}
function registerValidSW(swUrl,config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
  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.'
          );

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

          if (config && config.onSuccess) {
            config.onSuccess(registration);
          }
        }
      }
    };
  };
})
.catch(error => {
  console.error('Error during service worker registration:',error);
});
}
function checkValidServiceWorker(swUrl,config) {
fetch(swUrl,{
headers: { 'Service-Worker': 'script' }
})
.then(response => {
  const contentType = response.headers.get('content-type');
  if (
    response.status === 404 ||
    (contentType != null && contentType.indexOf('javascript') === -1)
  ) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister().then(() => {
        window.location.reload();
      });
    });
  } else {
    registerValidSW(swUrl,config);
  }
})
.catch(() => {
  console.log(
    'No internet connection found. App is running in offline mode.'
  );
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
  .then(registration => {
    registration.unregister();
  })
  .catch(error => {
    console.error(error.message);
  });
}}

抱歉这里的格式。不太擅长在 Stackoverflow 中粘贴代码...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）