【原】PWA技术及其用户体验设计

Mixlab交叉学科 2020-11-07

展开全文

-服务器端渲染（SSR）

意味着网站每次都是在服务器上渲染，因此它提供了更快的首次加载，但是在页面之间跳转需要每次都下载所有内容，因而它的加载速度往往会比较慢。

-客户端渲染（CSR）

页面是在客户端（浏览器）渲染的，因而加载速度往往取决于浏览器的性能，访问速度会比较快，但是在开始时需要更多的初始下载（首次访问时网站速度较慢），以保证整个网站其他页面实现客户端渲染所需要的数据。

两种方式各有利弊，而PWA使用的方法是“app shell”，它混合了SSR和CSR的方式。

App shell，可以理解为程序的外壳。App shell意图尽快加载最小的用户界面，然后缓存它，以便在后续访问时可以离线使用，然后加载应用程序的所有内容。这样，下次有人从设备访问应用程序时，UI立即从缓存加载，并从服务器请求新内容（如果它已在缓存中不可用）。

一个App shell的代码结构如下：

<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <title>Max</title> <meta name="description" content="app的介绍"> <meta name="author" content="作者"> <meta name="theme-color" content="#B12A34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="manifest.json"> <script src="app.js" defer></script></head><body><header> <p>MAX-demo</p></header><main> <h1>HELLO WORLD</h1> <button id="notifications">Request notifications</button> <section id="content"> // Content inserted in here </section></main><footer> <p>© max 2012-2018, created and maintained by shadow.</p></footer></body></html>

为了配合app shell，需要一个叫Service Worker API的支持。

- Service Worker

Service Worker API可以完成2种任务，一种是缓存App shell所需的数据，另一种是如果你有比较耗时的计算，你可以把它们从主线程中抽离出来，在Service Worker中进行计算，最后在它们计算完毕的时候从Service Worker中取得计算结果。

Service Worker主要由3项技术构成：

缓存机制是依赖 Cache API 实现的
依赖 HTML5 fetch API 发起网络请求
依赖 Promise 实现异步

service worker是需要注册的，我们在app.js中，输入：

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' }) .then(function(registration) { // 注册成功 console.log('ServiceWorker registration successful with scope: ', registration.scope); }) .catch(function(err) { // 注册失败 console.log('ServiceWorker registration failed: ', err); }); });

};

即可，使用上我们编写好的serviceWorker.js文件。

serviceWorker.js主要对有install跟fetch事件进行监听，对cache进行操作，达到缓存的目的。

let cacheName = 'max-v1';let contentToCache = [ '/', '/index.html', '/style.css', '/app.js'];

// 对app shell和主体内容（content）里面的数据创建缓存self.addEventListener('install', function(e) { console.log('[Service Worker] Install'); e.waitUntil(

        // 安装成功后操作 CacheStorage 缓存，使用之前需要先通过 caches.open() 打开对应缓存空间。

caches.open(cacheName).then(function(cache) { console.log('[Service Worker] Caching all: app shell and content'); // 通过 cache 缓存对象的 addAll 方法添加缓存 return cache.addAll(contentToCache); }) );});

//如果条件允许，service worker将从缓存中请求content中所需的数据，从而提供离线应用功能self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(r) { console.log('[Service Worker] Fetching resource: ' + e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cacheName).then(function(cache) { console.log('[Service Worker] Caching new resource: ' + e.request.url); cache.put(e.request, response.clone()); return response; }); }); }) );});

两种方式可以比较一下：

- install

优点是第二次访问即可离线，缺点是需要将需要缓存的 URL 在编译时插入到脚本中，增加代码量和降低可维护性；

- fetch

优点是无需更改编译过程，也不会产生额外的流量，缺点是需要访问过一次才能离线使用。

因此，在设计技术架构的时候，需要考虑到2种方式的优缺点。

除了配置serviceWorker.js之外，我们还需要配置manifest.json文件。

- 添加至桌面功能

serviceWorker使得网页在速度跟体验上接近原生app，除此之外，还需要引导用户添加pwa应用到桌面，以方便下次使用。

实现 PWA 应用添加至桌面的功能，除了要求站点支持 HTTPS 之外，需要准备 manifest.json 文件去配置应用的图标、名称等信息。一个基本的 manifest.json 应包含如下信息：

{ "name": "max-demo-v1", "short_name": "max", "description": "demo", "icons": [{ "src": "icons/mix-logo.png", "sizes": "72x72 96x96 128x128 256x256", "type": "image/png" }], "start_url": "/index.html", "display": "fullscreen", "theme_color": "#4a4a4a", "background_color": "#eeeeee"}

运行之后，在浏览器地址栏右侧，可以看到一个+号，点击安装。