Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/mysql/65.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何显示消息以更新PWA?_Javascript_Html_Caching_Progressive Web Apps_Service Worker - Fatal编程技术网

Javascript 如何显示消息以更新PWA?

Javascript 如何显示消息以更新PWA?,javascript,html,caching,progressive-web-apps,service-worker,Javascript,Html,Caching,Progressive Web Apps,Service Worker,如何在PWA中显示“更新”消息 我在HTML代码中使用Bootstrap5主题创建了1篇文章 我想要的是: 当PWA的更新可用时,将显示消息“Update available”(更新可用) 如何做到这一点?这是我的密码 index.html <!doctype html> <html lang="fr" class="h-100"> <head> <link rel="manifest

如何在PWA中显示“更新”消息

我在HTML代码中使用Bootstrap5主题创建了1篇文章

我想要的是:

  • 当PWA的更新可用时,将显示消息“Update available”(更新可用)
如何做到这一点?这是我的密码

index.html

<!doctype html>
<html lang="fr" class="h-100">

  <head>
    <link rel="manifest" href="/manifest.json">
    <link rel="canonical" href="https://www.mathieulebert.fr/">
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0">

    <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x mb-3 d-none">
      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-repeat text-success" viewBox="0 0 16 16">
            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
          </svg>
          <strong class="me-auto">Mise à jour disponible</strong>
        </div>
        <div class="toast-body text-start text-dark">
          Cliquez ICI pour mettre à jour.
        </div>
      </div>
    </div>

    <script src="bootstrap.bundle.min.js"></script>
    <script src="popover.js"></script>
    <script src="clipboard.min.js"></script>
    <script src="btn-clipboard.js"></script>
    <script src="pwa.js"></script>
    <script src="feed.js"></script>

  </body>

</html>

可争议
这是一个星期的聚会。
pwa.js:

if(导航器中的“serviceWorker”){
addEventListener('load',function()){
navigator.serviceWorker.register('sw.js')
。然后(reg=>{
console.log('服务工作人员已注册!