PWA 技术实现：HTML5 App Cache 与 Service Worker 的对比分析-JavaScript中文网-JavaScript教程资源分享门户

前言

近年来，随着移动互联网的普及，许多网站及应用都推出了PWA(Progressive Web App)版本。PWA是一种特殊的Web App，它具有与原生App相似甚至更好的性能体验，同时还具有Web App的一些优势，比如跨平台、无需下载等等。其中，HTML5 App Cache和Service Worker是PWA实现中非常重要的两个技术。

什么是HTML5 App Cache

HTML5 App Cache是一种浏览器缓存机制，用于将Web应用程序的所有文件缓存到用户设备上，以便在离线状态下访问Web应用程序。它可以缓存HTML、CSS、JavaScript、图像等等所有相关的文件。在当时没有诸如Service Worker之类的新技术出现之前，HTML5 App Cache曾是实现PWA的关键技术。

下面是一个简单的HTML5 App Cache示例代码：

// javascriptcn.com 代码示例
CACHE MANIFEST
# Version 1.0.0

CACHE:
index.html
main.css
main.js

NETWORK:
*

上面的代码定义了一个cache manifest文件，其中CACHE面向的是应用需要离线访问的文件，而NETWORK面向的是应用需要在线访问的文件。

在HTML文档中，我们需要引入manifest属性，告知浏览器需要进行应用缓存：

<html manifest="cache.manifest">
<head>
  <title>My offline application</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

但是，HTML5 App Cache存在一些问题。首先，更新缓存内容是困难的。其次，缓存文件大小有限制，只能缓存2.5MB，再次，缓存过程不能中断，如果其中某个文件下载失败，则整个Cache流程将失败。还有就是，HTML5 App Cache的兼容性不够好，在一些浏览器上无法正常工作。

因此，随着新技术的不断发展，HTML5 App Cache渐渐退出了PWA技术的舞台，取而代之的是Service Worker。

什么是Service Worker

Service Worker是一种运行在Web Worker上下文中的脚本，能够拦截网络请求，以此可以实现一些增强的Web应用程序功能，比如离线访问、消息推送等等。

下面是一个简单的Service Worker示例代码：

// javascriptcn.com 代码示例
// 安装Service Worker
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/index.js',
      ]);
    })
  );
});

// 拦截fetch请求
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

上面的代码展示了Service Worker的两个核心事件：install事件和fetch事件。

install事件在Service Worker第一次注册时触发，用于缓存应用所需文件。上述示例中，代码里的代码缓存了三个文件。

fetch事件用于拦截所有网络请求，可以用来处理离线请求。上述代码中，我们将所有请求都转发到缓存中查找。如果缓存中有对应资源，就直接返回缓存中的内容。如果缓存中没有，则从网络中请求资源。

HTML5 App Cache和Service Worker的对比

与HTML5 App Cache相比，Service Worker有许多优势：

更新缓存文件更方便，可以通过命令手动触发缓存更新或者通过meta标签设置缓存的有效期等。
可以缓存更大的文件，因为Service Worker是在浏览器中运行的JavaScript脚本，可以通过JavaScript代码分段分批缓存大文件。
缓存过程可以被中断，如果某个文件下载失败，只需重新下载失败文件即可。
兼容性更好，几乎所有现代浏览器均支持Service Worker。

但是，Service Worker也存在一些问题：

编写复杂度相对HTML5 App Cache更高，需要写一些复杂的JS代码。
需要HTTPS协议支持。

总结

虽然HTML5 App Cache已经无法满足PWA技术的要求，但是它仍然有一定的应用场景，比如当用户的设备不支持Service Worker时等。

Service Worker是目前实现PWA的最重要技术之一，它方便了Web应用的离线访问，而且还可以提供增强型功能，比如消息推送、后台同步等。Service Worker已经成为现代Web开发的必备技能之一。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6545e7877d4982a6ebf95c0f