PWA技术及其用户体验设计
source link: http://mp.weixin.qq.com/s?__biz=MzA3MDgyMjMwMA%3D%3D&%3Bmid=2649937020&%3Bidx=1&%3Bsn=525f1509ef9e00f7ca1655af354027af
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
实验室最近多了一个实验产品 MAX ：群控手机的项目。主要包括：后端服务、web前端客户端、安卓app客户端。涉及到的编程语言：Java、Nodejs。技术上主要涉及安卓的MediaProjection API、配合websocket来实现。
MediaProjection 提供了录屏功能； websocket 主要是传输方便，可以做到实时。
今天主要介绍下web前端客户端的实现，主要使用了PWA技术。
- 什么是PWA？
PWA全称Progressive Web Apps ， 渐进增强 Web 应用程序 ，它可以离线运行，并且可以在运行的系统中选择性安装，它从外观还是执行效果来看，与一般应用程序无异。
不知大家体验过微软的邮件服务没？Outlook.com已经完成了 PWA 版本，可以在浏览器里面像本地应用一样直接打开即用。
比如我使用的mac，添加了一个PWA应用之后，底部菜单栏多了一个应用的icon，效果如下：
就是mixlab那个logo
PWA是一系列技术的集合，里面最核心的是一个叫“app shell”的概念。
- 什么是App shell？
我们先了解下，渲染网站主要有两种方法：在服务器上或在客户端上。
-服务器端渲染（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"
}
运行之后，在浏览器地址栏右侧，可以看到一个+号，点击安装。
另外， 调试可以在chrome的Application面板中进行查看 。
由于PWA的api不是所有浏览器都支持，因而，你还需要注意使用 caniuse.com 来查看主流浏览器的支持情况。
- 如何告知普通用户什么是离线模式？或者什么是PWA？
这是体验设计上需要注意的地方，我们应该认识到并不是每个用户都是技术出身，都对PWA的概念了解得很清楚 。 因而，用户体验设计需要为用户提供指导，以便他们可以了解什么是PWA（或者离线模式）。
确实，离线模式比PWA（渐进式）更为容易理解，但是离线模式对每个人来说都是一个全新的心智模式。 通俗来讲，您需要告诉用户当他们无法连接上网络时会发生什么变化。 比如：
哪些功能无法使用；
或者是页面上的数据是什么时间更新的；
目前的网络连接情况；
等等。
除此之外，设计上要考虑首次加载的问题 ，如首次加载时间过长，需要设计动画提示，可以把加载的文件内容简要告知用户，让用户知道网页正在加载，而不是“死机了”。
下一步，拟集成TensorFlowJS，探索下可能性。
近期推荐：
目前《人工智能Mix》专栏已积累了上百篇资料，都是AI+各种领域的应用，涉及技术、设计等。稳步保持日更，欢迎加入，365天都在学习～
加入社群
欢迎交流
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK