PWA初探

Heero.Luo发表于6年前，已被查看1813次

HTML 5 曾被认为是移动应用的明天，却被原生App在性能和功能上轻易战胜，Web逐渐成为App的附属。然而，马云“爸爸”告诉我们：“梦想还是要有的，万一实现了呢？”如今，我们离梦想又近了一步。

PWA，全称「Progressive Web App」，是Google提出的为Web提供App般使用体验的一系列技术方案。它优势主要体现在：

  • 可在离线或网络较差的环境下正常打开页面。
  • 安全（HTTPS）。
  • 保持最新（及时更新）。
  • 支持安装（添加到主屏幕）和消息推送。
  • 向下兼容，在不支持相关技术的浏览器中仍可正常访问。

本文将逐一讲述PWA涉及的主要技术方案。

CacheStorage

CacheStorage是一种新的本地存储，它的存储结构是这样的：

  • 每个域有若干个存储模块，每个模块内可以存储若干个键值对。
  • 它的键是网络请求（Request），值是请求对应的响应（Response）。

CacheStorage的接口集中在全局变量「caches」中，且仅在HTTPS协议（或localhost:*域）下可用，调用前要检查兼容性。以下是一段实现加载资源并写入缓存的代码示例：

if (typeof caches !== 'undefined') {
    // 要缓存资源的URL
    const URL = 'https://s3.imgbeiliao.com/assets/imgs/icons/app/1.0.0/parent-192x192.png';
    // 存储模块名
    const CACHE_KEY = 'v1';

    fetch(URL, {
        mode: 'no-cors'
    }).then((response) => {
        // 打开存储模块后往里面添加缓存
        caches.open(CACHE_KEY).then((cache) => {
            cache.put(url, response);
        });
    });
}

其中用到了 Fetch API 去请求资源，这个API的目标是取代XMLHttpRequest。

除了写入缓存，自然还有匹配缓存和删除缓存的接口：

// 在所有存储模块中匹配资源
caches.match(URL).then((response) => {
    console.log(response);
});

// 在单个存储模块中匹配资源
caches.open(CACHE_KEY).then((cache) => {
    cache.match(URL).then((response) => {
        console.log(response);
    });
});
// 删除整个存储模块
caches.delete(CACHE_KEY).then((flag) => {
    console.log(flag);
});

// 删除存储模块中的某个存储项
caches.open(CACHE_KEY).then((cache) => {
    if (cache) {
        cache.delete(url).then((flag) => {
            console.log(flag)
        });
    }
});

虽然可以独立调用，但 CacheStorage 一般会搭配下文所说的 Service worker 一起使用。

Service worker

随着Web承载的任务变得越来越复杂，浏览器也为JavaScript提供了多线程能力——Web worker。Web worker允许一段JavaScript程序运行在主线程之外的另外一个线程中。但是基于线程安全的考虑：

  • Worker线程不能操作主线程的某些对象（如DOM）。
  • Worker线程与主线程不共享数据，只能通过消息机制（postMessage）传递数据。

Service worker也是一种Web Worker，只是它的能力比一般的Web worker要强大得多，这主要体现在：

  • 一旦被安装，就永远存在，除非注销；
  • 用到的时候唤醒，闲置的时候睡眠；
  • 可以作为代理拦截请求和响应；
  • 离线状态下也可用。

能力越大，责任也越大，所以 Service worker 仅在HTTPS协议（或localhost:*域）下可用。

注册

一个新的 Service worker 要经过注册、安装、激活这三个步骤，才可以对页面生效。第一步是把脚本文件注册为 Service worker ：

function setupSW() {
    var serviceWorker = window.navigator.serviceWorker;
    if (!serviceWorker || typeof fetch !== 'function') {
        return;
    }
    serviceWorker.register('/sw.js').then(function(reg) {
        console.info('[SW]: Registered at scope "' + reg.scope + '"');
    });
}

window.addEventListener('load', setupSW, false);

注册操作的实质是新开线程，有一定的开销（从注册到激活，实测iOS Safari和Chrome耗时70~100ms，UC浏览器和QQ浏览器的耗时都在200ms以上，均为内网测试结果，实际环境中还要算上sw.js的网络开销），所以最好是在页面加载完之后执行。

注册、安装、激活都完成之后， Service worker 就可以对作用域内的页面生效。这里说的作用域并不是变量的作用域，而是指 Service worker 脚本所在的目录。默认情况下， Service worker 可以作用于其脚本所在目录及其子目录下的所有页面。例如以「/a/sw.js」注册的Service worker可以作用于「/a/page1.html」、「/a/b/page2.html」，但无法作用于「/index.html」。不过，也可以通过参数指定作用域，比如：

serviceWorker.register('/a/sw.js', {
    scope: '/'
});

然而，这段代码运行的时候会出现异常：

Failed to register a ServiceWorker: The path of the provided scope ('/') is not under the max scope allowed ('/a/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

原因就是，默认情况下作用域只能降低而不能提升。如果非得提升，就要给脚本文件增加一个HTTP响应头「Service-Worker-Allowed」。例如：

server {
    location /a/sw.js {
        add_header 'Service-Worker-Allowed' '/';
    }
}

此外， Service worker 脚本还必须与页面同域。为了避免作用域带来的麻烦，建议把该脚本文件放置于页面所在域的根目录下。

顺带一提，在实际应用中，建议给 Service worker 增加开关。因为它毕竟属于新特性，还不知道会不会有未知的坑，一旦出现大规模故障，需要有一种快速的方式让其失效。示例代码如下：

fetch('/sw-enable?' + Date.now()).then(
    // 200状态为开，其他状态为关
    function(res) { return res.status === 200 ? 1 : -1; },
    // 请求失败时不做任何操作
    function() { return 0; }
).then(function(flag) {
    if (flag === 1) {
        serviceWorker.register('/sw.js');
    } else if (flag === -1) {
        serviceWorker.getRegistration('/sw.js').then(function(reg) {
            if (reg) { reg.unregister(); }
        });
    }
});

需要特别注意的是，如果处于关闭状态，一定要注销 Service worker 。否则对于已注册 Service worker 的客户端而言，该worker还是存在的。

代理

Service worker 激活后就会成为页面跟浏览器之间的代理。它作用域内所有页面的所有HTTP请求（除了它自身）都会触发它的fetch事件。下面以WebP的兼容处理为例，说明 Service worker 的代理作用。

WebP是Google发布的图片文件格式。与JPG、PNG等格式相比，在质量相同的前提下，WebP格式的文件往往会更小。然而，微软和苹果尚未在自家浏览器中支持这种格式，所以在实际应用中需要处理兼容问题。

过往做兼容处理的方式，主要是检查兼容性后动态输出图片路径。但是这种方式需要在所有输出图片的地方做额外处理，并且对SEO不友好。而 Service worker 则可以通过拦截原图片（PNG、JPG）的请求并将其“修改”为对应的WebP请求。

// sw.js
self.addEventListener('fetch', (e) => {
    // accept: image/webp,image/apng,image/*,*/*;q=0.8
    const headers = e.request.headers;
    const supportsWebP = headers.has('accept') && headers.get('accept').includes('webp');

    const url = new URL(e.request.url);

    if (supportsWebP && url.host.includes('qiniu')) {
        url.search = '?imageMogr2/format/webp';
        e.respondWith(
            fetch(url.toString(), { mode: 'no-cors' })
        );
    }
});

以上代码通过监听fetch事件：

  • 检测浏览器对WebP的支持（支持WebP的浏览器，在accept这个请求头中，都会带有「image/webp」）；
  • 倘若浏览器支持WebP，且图片的存储空间也支持WebP转换，则生成对应的WebP请求的URL，并通过 Fetch API 进行请求；
  • 通过事件对象的「respondWith」方法，使用 Fetch API 的响应作为本次请求的响应。

至此，劫持原请求定向到另一个请求的功能就完成了。

与CacheStorage交互

我们还可以在 Service worker 脚本中与 CacheStorage 进行交互，实现资源的缓存和提取。

第一种缓存策略是预缓存。它的原理是在 Service worker 的安装事件中缓存一部分资源，并且在这些资源缓存成功之后再完成安装。

// sw.js
const CACHE_KEY = 'v1';
const cacheList = [
    '/js/jquery.js',
    '/style/reset.css'
];
self.addEventListener('install', (e) => {
    e.waitUntil(
        caches.open(CACHE_KEY).then((cache) => {
            return cache.addAll(cacheList);
        });
    );
});

这种策略的好处是：只要 Service worker 安装成功，就可以确保缓存可用（排除存储空间不足等因素）。然而，它的缺点也不可忽视：只要有一个预缓存的资源请求失败，就会导致 Service worker 安装失败。因此，预缓存的资源越少越好。

预缓存成功后，就可以在fetch事件中匹配缓存里面的资源进行响应：

// sw.js
self.addEventListener('fetch', (e) => {
    e.respondWith(
        caches.match(e.request).then((response) => {
            if (response != null) {
                return response;
            } else {
                return fetch(e.request.url);
            }
        })
    );
});

第二种缓存策略是增量缓存，流程很简单：如果在缓存中匹配到请求的资源，则直接响应；否则发送请求，并把资源缓存下来后再响应。需要注意的是，不要去缓存异常状态（如HTTP状态码为404或500）的资源。代码实现如下：

// sw.js
self.addEventListener('fetch', (e) => {
    e.respondWith(
        caches.match(e.request).then((res) => {
            if (res != null) {
                return res;
            } else {
                return fetch(url).then((res) => {
                    if (res && (res.status === 200 || res.status === 304)) {
                        const resCache = res.clone();
                        caches.open(CACHE_KEY).then((cache) => {
                            cache.put(url, resCache);
                        });
                    }
                    return res;
                });
            }
        });
    );
});

在实际应用的时候，还需要排除一些特殊请求：

  • 浏览器允许在HTTPS协议的页面中通过HTML标签加载HTTP协议的图片、视频等资源。但是， Fetch API 不允许这么做。所以，不要用 Fetch API 发送HTTP协议的请求。
  • 第三方资源的请求不应缓存，如各种统计平台的资源。
  • 非GET请求不应缓存，因为它们大部分涉及提交数据到后端并让其执行某些操作。
  • Service worker 的开关接口不应缓存。

代码实现如下：

// sw.js
self.addEventListener('fetch', (e) => {
    let url = new URL(e.request.url);
    if (url.protocol === 'http:' ||
        (url.host !== location.host && url.host.includes('.abc-cdn.com')) ||
        e.request.method !== 'GET' ||
        url.pathname.indexOf('sw-enable') !== -1
    ) {
        return;
    }

    url = url.toString();
    e.respondWith(
        // ...
    );
});

更新

只要浏览器检查到 Service worker 脚本文件的内容有变化，就会安装新的 Service worker 。但是，在默认情况下，新的 Service worker 处于等待状态，得关闭所有跟旧 Service worker 有关联的页面，再重新打开，新的 Service worker 才会被激活。如果想新的 Service worker 马上生效，可以在安装事件中调用「self.skipWaiting」：

// sw.js
self.addEventListener('install', (e) => {
    e.waitUntil(
        caches.open(CACHE_KEY).then((cache) => {
            return cache.addAll(cacheList);
        }).then(() => {
            return self.skipWaiting();
        })
    );
});

需要特别注意的是， Service worker 脚本文件要设置为永不缓存（max-age: 0）。否则，即使它的内容有变化，浏览器也无法得知，也就无法更新了。事实上，浏览器也考虑到了缓存的情况，为了避免不良脚本长时间生效，Service worker脚本每24小时一定会被下载一次。

讲到这，其实只实现了 Service worker 自身的更新，但如何进一步更新 CacheStorage 中的资源缓存呢？前文有提及， CacheStorage 是按模块存储的，利用这个存储结构，就可以实现每发布一次代码就更换一个存储模块。由于新的存储模块内是空的，根据增量缓存的机制，浏览器会通过网络或者HTTP缓存获取这个资源。代码如下：

// sw.js
const CACHE_KEY = 'v2'; // 下次发布时改成v3
caches.keys().then(function(keys) {
    keys.forEach(function(key) {
        if (key !== CACHE_KEY) {
            caches.delete(key);
        }
    });
});

生命周期

讲到这，其实已经接触到 Service worker 生命周期中的绝大部分环节，下面通过一张生命周期图进行归纳：

Service worker 生命周期

性能对比

实现了增量缓存之后，相当于页面只要打开过一次就可以离线浏览了。下面对两种缓存方案（Service worker + CacheStorage、HTTP缓存）做性能对比。首先是正常网速下的对比：

正常网速下的HTTP缓存
HTTP缓存 （正常网速）

正常网速下的Service worker
Service worker + CacheStorage （正常网速）

可以发现，没有太大的区别。其实这也很好理解，被缓存的资源，无论是CacheStorage还是HTTP缓存，本质上要么存在磁盘、要么已经被浏览器调入内存，既然来源是一样的，读取的速度自然也大致相同。

下面再看一下慢速3G网络下的情况：

慢速3G网络下的HTTP缓存
HTTP缓存 （3G慢速）

慢速3G网络下的Service worker
Service worker + CacheStorage （3G慢速）

可以发现，HTML文档的请求速度有较大差异。在 Service worker + CacheStorage 方案中，HTML文档已经被缓存下来了；而在HTTP缓存方案中，HTML文档的状态码为304，说明浏览器向服务器发出了请求。而这一次HTTP请求在网络较慢的情况下耗时较长。

如果给HTML文档设置过期时间（max-age），让浏览器将其缓存起来，这个差异是否就不存在呢？实际情况没有这么简单：

  • 即使设置了过期时间，某些浏览器仍然会请求服务器，例如PC和Android平台的Chrome。
  • 没有好的办法可以在代码变更时告知浏览器清除缓存。
  • 传统后端渲染的应用中，HTML文档数量太多（例如网易的每篇新闻都是一个HTML文档），全部缓存下来会占用大量存储空间。

所以，一般不会给HTML文档设置缓存时间，或者只设一个很短的缓存时间。然而，HTML文档作为页面的入口，缓存下来的意义是非常大的。自从了有了 Service worker ，可以做到：

  • 拦截HTML文档的请求，检查 CacheStorage 后再决定是否请求服务器；
  • 通过修改 Service worker 脚本及时清理缓存。

此外，前端渲染模式可以实现一个HTML文档对应多份同类内容；基于Vue.js、React、Angular等框架开发的单页应用甚至只有一个HTML文档。

综上所述，在前端渲染模式下通过 Service worker 和 CacheStorage 缓存HTML文档，可以有效提高网络不稳定时页面的加载速度。而因为静态资源本身有HTTP缓存，所以不必在 CacheStorage 中缓存所有静态资源（只缓存关键的部分）。

小结

最后我们必须搞清楚一个问题： Service worker + CacheStorage 的缓存机制与 HTTP缓存 其实是比较相似的，为什么需要两种相似的缓存？

  • 其一，HTTP缓存则是由服务器（响应头）控制的，且缓存过期前，服务器无法通知浏览器清理缓存；
  • 其二， Service worker 可以在浏览器端实现对缓存的有效控制，包括缓存策略与缓存清理；
  • 其三， Service worker 支持离线运行，在离线或网络不好的情况下可以快速响应，这一点对信号不稳定的移动网络来说尤其重要。

顺带一提， HTML 5 中的 Application Cache （离线缓存）因为实际应用的时候灵活性不足，已不再建议使用，该标准也已经被废弃。

在Vue.js项目中接入Service worker

Service worker 所带来的好处让我迫不及待地想将其接入到项目中，下面以一个典型的Vue.js项目为例，讲一下接入过程。

第一步是注册 Service worker 脚本，为了尽可能在页面组件加载完后再执行这一步，可以把这片代码放到Vue.js根实例（main.js）的mounted钩子中执行：

// main.js
new Vue({
    mounted() {
        // 本地开发时不启用Service worker
        if (['test', 'pre', 'prod'].indexOf(env) === -1) { return; }

        const serviceWorker = window.navigator.serviceWorker;
        if (!serviceWorker || typeof fetch !== 'function') { return; }
        fetch('/sw-enable?' + Date.now()).then(
            (res) => { return res.status === 200 ? 1 : -1; },
            () => { return 0; }
        ).then((flag) => {
            if (flag === 1) {
                serviceWorker.register('/sw.js');
            } else if (flag === -1) {
                serviceWorker.getRegistration('/sw.js').then((reg) => {
                    if (reg) { reg.unregister(); }
                });
            }
        });
    });
});

Service worker 脚本的内容跟前文提及的大致上一样（此处只做了预缓存）：

// 缓存模块（版本号）
const CACHE_KEY = 'v$REV';
// 要预缓存的资源列表
const cacheList = [
    '/index.html',
    'https://abc-cdn.com/polyfill.min.js'
];

self.addEventListener('install', (e) => {
    e.waitUntil(
        caches.keys().then((keys) => {
            // 清理旧缓存
            keys.forEach((key) => {
                if (key !== CACHE_KEY) { caches.delete(key); }
            });
        }).then(() => {
            // 预缓存
            return caches.open(CACHE_KEY)
                .then((cache) => { return cache.addAll(cacheList); })
        }).then(() => {
            // 跳过等待
            return self.skipWaiting();
        });
    );
});

self.addEventListener('fetch', (e) => {
    const url = new URL(e.request.url);
    if (url.protocol === 'http:' ||
        url.pathname.includes('sw-enable') ||
        e.request.method !== 'GET' ||
        (url.host !== location.host && cacheList.indexOf(e.request.url) === -1)
    ) {
        return;
    }

    // 判断是否HTML文档的请求
    const isHTMLDoc = e.request.headers.has('accept') &&        
        e.request.headers.get('accept').includes('text/html') &&
        (url.pathname.endsWith('.html') || !/\.\w+$/.test(url.pathname));

    // 基于Vue.js的单页应用只有一个HTML文档，所有HTML文档的请求可以全部指向一个文件
    const request = isHTMLDoc ? new Request('/index.html') : e.request;

    e.respondWith(
        caches.match(request).then((res) => {
            if (res != null) {
                return res;
            } else {
                return fetch(url.toString());
            }
        })
    );
});

需要特别提一下的是：

  • 「$REV」是个占位符，要在Webpack构建流程中将其替换为具体的版本号；
  • 预缓存资源中第一项为HTML文档（单页应用只有一个HTML文档，只缓存这个就行了），第二项是关键的静态资源（ES6的polyfill）；
  • 当前域下所有HTML文档的请求其实都是指向同一个请求（index.html）。

最后，在Webpack构建流程中增加一个步骤，把 Service worker 脚本的「$REV」替换成新版本号（时间戳），并拷贝到index.html所在路径下（保证他们同域）：

new CopyWebpackPlugin([
    {
        from: path.resolve(__dirname, '../src/sw.js'),
        to: path.dirname(config.build.index),  // index.html所在路径
        transform(content, path) {
            return content.toString().replace('$REV', Date.now());
        }
    }
])

Web App Manifest

这一节介绍的是一个简单的JSON配置文件，示例代码如下（manifest.json）：

{
    "name": "贝聊官网",
    "short_name": "贝聊官网",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#fff",
    "theme_color": "#fff",
    "orientation": "portrait",
    "description": "中国幼儿园家长工作平台",
    "icons": [{
        "src": "https://s2.imgbeiliao.com/assets/imgs/icons/app/1.0.0/parent-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
    }, {
        "src": "https://s2.imgbeiliao.com/assets/imgs/icons/app/1.0.0/parent-512x512.png",
        "type": "image/png",
        "sizes": "512x512"
    }]
}

比较关键的几个配置项包括：

  • name：应用的名字。
  • short_name：应用简称，用于在空间不那么充足的位置显示，如桌面图标。
  • start_url：启动页路径。
  • display：显示模式，一共有四种，分别是fullscreen（占全屏）、standalone（占状态栏以外的空间）、minimal-ui（有浏览器的导航菜单）、browser（使用浏览器打开）。
  • icons：指定各种尺寸的图标。

编写好这样一个配置文件之后，还需要通过link标签在HTML文档中引用它：

<link rel="manifest" href="/manifest.json" />

在此基础上，如果还符合以下条件：

  • Manifest文件配置了以下项目：
    • short_name；
    • name；
    • start_url；
    • 192×192的png图标。
  • 页面使用HTTPS协议，且注册了Service worker。
  • 被访问至少两次，且两次访问至少间隔五分钟。

使用Chrome浏览器打开页面后就会弹出「添加到主屏幕」的横幅（下文简称为「A2HS横幅」）。而点击主屏幕图标进入应用后，会先出现一个启动屏（注意：配置了512x512以上尺寸的图标才会显示到此），然后才进入到App的启动页。

添加到主屏幕

支持A2HS横幅的浏览器有Chrome、UC浏览器、小米浏览器，均在Android平台下。对于其他浏览器而言，只能手动找到功能菜单或按钮，再添加到主屏幕。

最后再说一下Manifest文件的一些问题：

  • 修改Manifest文件后，必须重新添加到主屏幕才能生效。
  • iOS下的问题：
    • 启动屏为白屏；
    • 丢失上下文，每次进入应用（包括重新启动、回到主屏幕再进入）都会回到启动页，这是最严重的问题。
  • 部分配置项无效，包括background_color、theme_color、orientation、icons。其中icons可以通过标签配置：
    <link rel="apple-touch-icon" sizes="192x192" href="..." />

现状

PWA的现状可以用这么一句经典的话来概括：

前途是光明的，道路是曲折的

先看一张兼容性方面的图：

PWA相关技术兼容性

可见：

  • 对PWA支持最为完美的只有Chrome，但它在国内的市场占有率不高，而且部分服务不可用。
  • Service Worker 和 CacheStorage 的可用度较高；
  • 推送通知的可用度较低（故而本文没有进行介绍）；
  • 国内厂商的浏览器都没有「添加到桌面」的功能菜单；如果A2HS横幅被关闭，就无法通过其他方式把应用添加到桌面。

此外，iOS Safari从iOS 11.3起支持PWA大部分特性，但存在较严重的体验问题——每次离开PWA都会丢失上下文。

综上所述，目前对大部分企业来说，做一个完整的PWA应用并不是明智的选择。然而，通过支持度较高的 Service worker 和 CacheStorage 改善用户体验，却是很有意义的。另一方面，虽然Web跟原生App存在竞争关系，但更多情况下，它们是相互合作的——大部分App都内嵌了网页去实现部分功能。所以，可以考虑在App的WebView中支持上述技术，为Web提供支援。

评论 (0条)

发表评论

(必填)

(选填，不公开)

(选填，不公开)

(必填)