PWA 学习笔记之 fetch API

Progressive Web App （PWA）是渐进增强 Web App，它能让我们在不可靠的网络上也能快速加载、能够接收桌面通知、具有桌面图标，并且可采用顶层全屏体验的方式加载。

Progressive Web App 具有的以下主要特点：

渐进式 - 适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。
自适应 - 适合任何机型：桌面设备、移动设备、平板电脑或任何未来设备。
持续更新 - 在服务工作线程更新进程的作用下时刻保持最新状态。
安全 - 通过 HTTPS 提供，以防止窥探和确保内容不被篡改。
可安装 - 用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。
可链接 - 可通过网址轻松分享，无需复杂的安装。

PWA 基于很多新的 API 和新的技术，如 fetch API、CacheStorage API、Background Sync、Service Worker 和 IndexedDB 等。然而要想真正了解并掌握 PWA，就必须了解它背后基于的技术。因此后续的文章，我们将逐一介绍 PWA 的相关技术。有兴趣的小伙伴们赶紧上车，我们将从 fetch API 开始，开启 PWA 的学习旅程。

fetch 中文的意思为获取，即通过它我们可以用来获取资源。在前端的日常工作中，我们通常需要从 API 获取数据，然后对数据进行处理或展示。在与服务器交互过程中使用的数据格式一般是 JSON，接下来我们先来体验一下，利用 fetch API 获取 angular 项目的团队的前五位成员，实现代码如下：

if("fetch" in this) {
  fetch("https://api.github.com/orgs/angular/members?page=1&per_page=5")
    .then(res => res.json())
    .then(console.dir)
}

要实现同样的功能，我们当然也可以使用 XMLHttpRequest 对象，实现代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', "https://api.github.com/orgs/angular/members?page=1&per_page=5");
xhr.responseType = 'json';
xhr.onload = function() {
  console.dir(xhr.response);
};
xhr.send();

是不是感觉使用 fetch 简单很多，然而我们并不能随心所欲的使用它，因为它有兼容性问题，具体如下下图所示（详细信息可浏览 can i use - fetch）：

(图片来源：caniuse - fetch)

对于大多数小伙伴来说，应该更熟悉 jQuery.ajax()。fetch 规范与 jQuery.ajax() 的主要区别如下：

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ）， 仅当网络故障时或请求被阻止时，才会标记为 reject。
默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

除了使用 fetch API 来获取 JSON 数据，我们也可以使用它来获取其它资源，比如普通文本、图片资源等。下面我们来看一下如何使用 fetch API 来获取图片资源，并在页面中显示。

if ("fetch" in this) {
  let myImage = document.querySelector('img');
  fetch('https://mdn.github.io/dom-examples/streams/grayscale-png/tortoise.png')
    .then(function(response) {
       return response.blob();
    })
    .then(function(myBlob) {
       let objectURL = URL.createObjectURL(myBlob);
       myImage.src = objectURL;
    });
}

前面的两个示例中，我们通过 fetch 方法分别实现 JSON 数据的读取和图片的资源的获取功能。fetch 方法是 Fetch API 的核心方法，同时定义在 window 和 WorkerGlobalScope 环境中，因此我们可以在 Service Worker 环境中使用它。

在 Fetch 标准中该方法的声明如下：

partial interface WindowOrWorkerGlobalScope {
  [NewObject] Promise<Response> fetch(RequestInfo input, optional RequestInit init);
};

通过观察上面的方法签名，我们可以知道 fetch 方法支持两个参数，调用后返回一个 Promise 对象。第二个参数是一个参数对象，用来初始化 Request。该参数对象有几个重要的属性：

method：请求方法，可取 "GET", "POST" 等，默认为 "GET"。
mode：请求模式，可取 "no-cors", "cors", "same-origin"。
credentials：是否携带 Cookie，可取："omit", "same-origin", "include"。
cache: 缓存模式，可取: default, no-store, reload, no-cache, force-cache, only-if-cached。

了解详细的信息，请阅读 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch。

在 PWA 应用中，fetch API 的用武之地在于资源（比如图片、脚本文件或样式文件等）的获取。为了能够保证用户的离线体验，我们可以在获取资源时，对资源进行缓存。

具体示例如下：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 若缓存不存在，则使用fetch API从网上获取，然后利用Cache API缓存资源。
      return response || fetch(event.request).then((response) => {
          return caches.open('v1').then((cache) => {
            cache.put(event.request, response.clone());
            return response;
          });
     }); 
   })
  );
});

对于 Cache API，我们下一篇会介绍。这里需要注意的是，在使用 cache.put() 保存资源时，我们调用 response 对象的 clone() 方法，而不是直接保存 response 对象。为什么需要克隆响应对象呢？这是因为 Request 和 Response 的 body （响应体）只能被读取一次！它们有一个属性叫 bodyUsed，读取一次之后设置为 true，就不能再读取了。

本文只是简单介绍了 fetch API，其实 fetch API 还有很多东西需要进一步了解，如设置请求头、处理 Text/HTML 资源、表单提交、Cookies 与 CORS 处理等。这里就不再展开了，有兴趣的小伙伴，请自行查阅相关资料。