前端扩展性的新里程碑：谷歌深度整合了 PWA 应用-JavaScript中文网-JavaScript教程资源分享门户

前言

在移动互联网时代，越来越多的企业开始深入探讨移动端应用的扩展性问题。作为前端开发工程师，我们也需要不断创新并掌握新的技术和方法，以应对各种挑战。而在这个领域，PWA 应用无疑是一个非常受欢迎的解决方案。

PWA 应用，即渐进式 Web 应用，是一种新一代的前端应用程序。它能够在不依赖于网络的情况下，运行在用户的设备上，提供像移动应用程序一样的体验。无论是打开速度、用户体验还是更新机制，都与原生移动应用相当。而今天，谷歌深度整合了 PWA 应用，这意味着前端开发工程师可以通过 PWA 应用获得更多的机会和挑战。

PWA 应用的优势

为了更好地了解 PWA 应用，让我们先来看看它的优势：

快速加载

PWA 应用会在用户第一次访问时缓存视图和资源，这样用户再次访问时便可以快速加载。

可离线操作

PWA 应用具有离线访问的能力，即使在没有网络连接的情况下，用户仍然可以使用已经下载完成的 PWA 应用。

安装简单

通过添加到主屏幕的方式，可在桌面上快速启动 PWA 应用。

与原生应用相似

由于 PWA 应用使用与原生应用相同的技术和强大的功能，因此可以提供类似于原生应用的用户体验。

谷歌深度整合 PWA 应用

谷歌一直致力于推广 PWA 应用。其 Google Play 应用商店中的“Chrome Web 应用”曾经是 PWA 应用的重要载体之一。2019 年，谷歌宣布将逐步停止支持 Chrome Web 应用，而今天，谷歌已经深度整合了 PWA 应用。

在 Chrome 浏览器中，PWA 应用与原生应用不再有区别。从 Chrome 73 开始，谷歌通过创建 desltop-pwa-assets 下的一些文件夹，来帮助自己识别 PWA 应用。这样，当用户把 PWA 应用添加到主屏幕上时，它就会像原生应用一样加载了。

换言之，谷歌在 PWA 应用方面给出的反应是一个很好的消息。 PWA 应用现在有了更近距离的支持，这将为前端开发工程师们提供更多的机会和挑战。

PWA 应用设计和实现

下面是一些极简示例代码，可让您了解 PWA 应用的基本设计和实现：

示例如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>HelloPWA</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./service-worker.js')
          .then(registration => console.log('Service worker registered:', registration))
          .catch(error => console.log('Service worker registration failed:', error));
      }
    </script>
  </body>
</html>

如果您已熟悉基本的网页设计和开发，那么这应该很简单。请注意，我们正在使用的是 serviceWorker API。如果检测到该 API，则在 load 事件发生时，我们就通过给 register() 传递一个相对路径来注册一个 service worker。这里的 service-worker.js 是一个单独的文件，它需要遵循固定的结构，以使浏览器理解并使用它。下面是一个服务工作者的示例：

// www.javascriptcn.com code example
const CACHE_NAME = "hello-pwa";
const CACHE_VERSION = 1;
const APP_SRC = "js/app.js";

self.addEventListener("install", function(event) {
  console.log("Event: Install");
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
      return cache.addAll([APP_SRC]);
    })
  );
});

self.addEventListener("activate", function(event) {
  console.log("Event: Activate");
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames
          .filter(function(cacheName) {
            return (
              cacheName.startsWith("hello-pwa") &&
              cacheName != CACHE_NAME
            );
          })
          .map(function(cacheName) {
            return caches.delete(cacheName);
          })
      );
    })
  );
});

self.addEventListener("fetch", function(event) {
  console.log("Event: Fetch");
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log("Using cache for:", event.request.url);
        return response;
      }
      console.log(
        "Downloading from server for:",
        event.request.url
      );
      return fetch(event.request).then(function(response) {
        caches.open(CACHE_NAME).then(function(cache) {
          cache.put(event.request, response.clone());
          console.log("New cached:", event.request.url);
          return response;
        });
      });
    })
  );
});

这里，我们首先将一些常量定义为变量 CACHE_NAME、CACHE_VERSION 和 APP_SRC。这些定义是必要的，因为我们希望避免相互冲突，而这些常量会在之后的过程中使用。之后，我们定义安装、激活和提取事件。注意，服务工作者也需要遵循特定的规则以让它可以被浏览器使用。

当用户访问包含 service-worker.js 的页面时，网页就会现在它本地的缓存中。即使用户关闭浏览器或断开网络连接，这个页面仍然可以被访问。如果存在缓存，则使用缓存，如果不存在，则会尝试从网络提取资源。

注意，这仅仅是一个最基本的 PWA 示例。您可以通过其他渠道了解更多关于 PWA 的信息。

后记

随着移动互联网的快速发展，PWA 应用将成为一个非常重要的前端技术。通过谷歌的深度整合，开发工程师们可以更加方便地使用 PWA 应用，实现更好的用户体验和更高的扩展性。在不断创新的道路上，让我们一起体验并掌握 PWA 应用的各种技术。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7f1f3a941bf7134e33700

前端扩展性的新里程碑：谷歌深度整合了 PWA 应用

前言