实验室最近多了一个实验产品 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天都在学习～
加入社群
欢迎交流
以上所述就是小编给大家介绍的《PWA技术及其用户体验设计》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Jenkins Hackfest 用户体验文档报告
- Android 提升用户体验之骨架屏
- css揭秘实战技巧 - 用户体验[五]
- 为了提升用户阅读体验，信息流产品是如何避免给用户推荐重复内容的？
- Sqlmap初体验，渗透拿到网站用户名密码
- 幸福团商城 助您带给用户流畅的购物体验
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Little Schemer - 4th Edition
Daniel P. Friedman、Matthias Felleisen / The MIT Press / 1995-12-21 / USD 40.00
This delightful book leads you through the basic elements of programming in Scheme (a Lisp dialect) via a series of dialogues with well-chosen questions and exercises. Besides teaching Scheme, The Lit......一起来看看 《The Little Schemer - 4th Edition》 这本书的介绍吧!
