使用服务工作者和高速缓存存储构建脱机的网页
#javascript #网络开发人员 #教程 #前端

为什么我们需要离线网页

有时，我们的互联网连接并不可靠或完全不存在。在那一刻，我们仍然想使用网站和应用程序。这是离线网页派上用场的地方。他们即使我们不在线也可以访问内容。

介绍服务工作者和缓存存储

Service Workers 就像网络助手。它在幕后工作，使离线网页成为可能。它可以在我们的设备上保存网站的内容（例如图片，字体和其他资产），以便我们可以看到它们即使没有互联网。它还可以控制我们的网页在线时的作用。

Cache Storage 就像一个用于网络事物的储藏室。它保留了我们可能需要的所有网站内容，整齐地组织起来。服务工作者可以去那里，抓住页面脱机所需的内容。因此，当我们不在线时，我们仍然可以看到和使用网页。

让我们探索如何通过执行一些简单的编码来脱机地提供网页。我们将保存HTML文件和图像，以便用户仍然可以看到它们，即使它们未连接到Internet。

步骤1：入门
首先，让我们为我们的项目创建一个文件夹，并放置Main HTML文件index.html和我们要在其中使用cat.jpeg的图像。

步骤3：注册服务工作者
现在，让我们在index.html文件中注册服务工作者。放置以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hi There!</h1>

    <img src="./cat.jpeg" width="300" height="300" />

    <script>
      async function registerServiceWorker() {
        if ("serviceWorker" in navigator) {
          try {
            const registration = await navigator.serviceWorker.register(
              "sw.js"
            );
            console.log(
              "Service Worker registered with scope:",
              registration.scope
            );
          } catch (error) {
            console.error("Service Worker registration failed:", error);
          }
        }
      }

      registerServiceWorker();
    </script>
  </body>
</html>

在此代码中，我们检查浏览器是否支持服务工作者。

步骤3：编写服务工作者代码
现在，让我们创建一个在Project文件夹中的JavaScript文件，称为sw.js。该文件将包含服务工作者的代码。

const cacheName = "offline-cache-v1";
const cacheUrls = ["index.html", "cat.jpeg"];

// Installing the Service Worker
self.addEventListener("install", async (event) => {
  try {
    const cache = await caches.open(cacheName);
    await cache.addAll(cacheUrls);
  } catch (error) {
    console.error("Service Worker installation failed:", error);
  }
});

// Fetching resources
self.addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      const cache = await caches.open(cacheName);

      try {
        const cachedResponse = await cache.match(event.request);
        if (cachedResponse) {
          console.log("cachedResponse: ", event.request.url);
          return cachedResponse;
        }

        const fetchResponse = await fetch(event.request);
        if (fetchResponse) {
          console.log("fetchResponse: ", event.request.url);
          await cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        }
      } catch (error) {
        console.log("Fetch failed: ", error);
        const cachedResponse = await cache.match("index.html");
        return cachedResponse;
      }
    })()
  );
});

代码中发生了什么：

  • 我们为缓存（cachename）命名，并列出我们要存储离线使用的URL（cacheurls）。
  • 在“安装”部分中，我们准备缓存并将URL添加到它。
  • 我们打开缓存并尝试将请求与缓存的响应匹配。
  • 如果找到了缓存的响应，则将其返回。如果不是，我们从网络中获取资源，将其缓存以供将来使用，然后返回网络响应。
  • 如果在提取过程中发生任何错误，我们通过返回“ index.html”的缓存版本来处理它，以确保用户仍然看到某物。

步骤4：测试我们的离线友好网页
检查页面是否脱机工作：

  • 设备在线时打开页面，以确保其正确加载，包括图像。
  • 与Internet断开连接（关闭Wi-Fi或拆卸网络电缆）。
  • 重新加载页面。即使没有互联网，我们仍然应该看到包括图像在内的页面。

我们还可以从Chrome浏览器进行测试，这是：

  • 设备在线时打开页面
  • 在Chrome浏览器中打开DevTools，然后转到Application Tab
  • 从侧栏中单击Service Workers，然后检查Offline选项
  • 重新加载页面，我们可以看到脱机加载的内容

Cate image

我们现在创建了一个可以使用服务工作者离线工作的网页。该技术可以扩展以存储更多内容并使网站强大，即使没有互联网。