javascript - 当我进入离线模式时，Pwa 没有启动 offline.html

问题描述

我是 Pwa 的新手，我遵循了 pwa 的教程，一切正常，但是当我进入离线模式时，我看到一些消息说无法获取，但应用程序应该进入 offline.html 但它没有，我有一个单页应用程序，它是 index.html 和一个离线页面 offline.html

我的目标是找到一种方法，如果在任何时候启动离线模式或连接停止应用程序打开离线模式，当连接恢复时，应用程序返回 index.html

我的问题是在离线模式下刷新后，我得到的只是获取的错误，但offline.html根本没有启动

这是我在服务人员中尝试过的：

const staticDevCoffee = 'stage-cache-app';
const dynamicDevCoffee = 'dynamic-stage-cache-app';
const assets = [
  '/',
  'http://127.0.0.1/Stage/',
  'index.html',
  'offline.html',
  'manifest.json',
  'css/style.css',
  'assets/js/ajax.js',
  'assets/js/main-script.js',
  'https://fonts.googleapis.com/css?family=Merriweather:400,900,900i',
  'assets/js/main.js',
  'assets/js/piechart.js',
  'assets/images/Into/into.jpg',
  'assets/images/Into/intro-sm.jpg',
  'assets/images/logo/logo.jpeg',
  'assets/images/hello-icon-128.png',
  'assets/images/hello-icon-144.png',
  'assets/images/hello-icon-152.png',
  'assets/images/hello-icon-192.png',
  'assets/images/hello-icon-256.png',
  'assets/images/hello-icon-512.png',
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/bootstrap/dist/js/bootstrap.js',
  'node_modules/chart.js/dist/chart.js',


];
  
self.addEventListener('install', (installEvent) => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      console.log('[Service Worker] Mise en cache globale: app shell et contenu');
      cache.addAll(assets);
    })
  )
});

self.addEventListener('activate', (evt) => {
   // console.log(' Service has been activated ! ');
    evt.waitUntil(
      caches.keys().then(keys => {
        //console.log(keys);
        return Promise.all(keys
          .filter(key => key !== staticDevCoffee)
          .map(key => caches.delete(key))
        );
      })
    );
});



// fetch event
self.addEventListener('fetch', evt => {
  //console.log('fetch event', evt);
  evt.respondWith(
    caches.match(evt.request).then(cacheRes => {
      return cacheRes || fetch(evt.request).then(fetchRes => {
        return caches.open(dynamicDevCoffee).then(cache => {
          cache.put(evt.request.url, fetchRes.clone());
          return fetchRes;
        })
      });
    }).catch(() => caches.match('offline.html'))
  );
});

这是我在offline.html中尝试过的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>You are offline</title>

    <!-- Inline the page's stylesheet. -->
    <style>
      body {
        font-family: helvetica, arial, sans-serif;
        margin: 2em;
      }

      h1 {
        font-style: italic;
        color: #373fff;
      }

      p {
        margin-block: 1rem;
      }

      button {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>You are offline</h1>

    <p>Click the button below to try reloading.</p>
    <button type="button">⤾ Reload</button>

    <!-- Inline the page's JavaScript file. -->
    <script>
      // Manual reload feature.
      document.querySelector("button").addEventListener("click", () => {
        window.location.reload();
      });

      // Listen to changes in the network state, reload when online.
      // This handles the case when the device is completely offline.
      window.addEventListener('online', () => {
        window.location.reload();
      });

      // Check if the server is responding and reload the page if it is.
      // This handles the case when the device is online, but the server
      // is offline or misbehaving.
      async function checkNetworkAndReload() {
        try {
          const response = await fetch('.');
          // Verify we get a valid response from the server
          if (response.status >= 200 && response.status < 500) {
            window.location.reload();
            return;
          }
        } catch {
          // Unable to connect to the server, ignore.
        }
      
      }

      window.setTimeout(checkNetworkAndReload, 10000);
    </script>
  </body>
</html>

在屏幕截图中，这些错误仅在离线模式下出现，我们可以在屏幕截图中看到，offline.html 根本没有出现。

我还有最后一个问题：当我进入离线模式时，我是否应该将 indexeddb 用于我的 mysql 数据并将其加载到页面offline.html 中？

标签： javascriptprogressive-web-appsservice-worker

javascript - 当我进入离线模式时，Pwa 没有启动 offline.html

问题描述

解决方案

推荐阅读