PWA -- Progress Web App

Progress Web App目的在于利用现代浏览器的能力来达到类似APP的用户体验,让浏览器打开的网址像APP一样运行在手机上(无框架限制)。但是可能会使浏览器的负荷增加导致崩溃,所以提倡使用渐进式开发。
参加了Google Developer Day之后,对PWA这个概念有了自己的理解,个人觉得在可期的未来PWA会有很好的发展,值得深入学习。

PWA简介

PWA
特性:

支持将图标添加到屏幕,从屏幕点击启动
支持全屏体验
支持离线应用(利用Service Worker来实现离线存储)
支持Push Notification

优势

跨平台,任何安装符合标准的浏览器的设备上均可运行
渐进式,无论用户使用什么浏览器,始终以渐近增强为原则
低网速离线情况下依然有较好的用户体验
实时持续更新
使用TLS来保证传输安全
对搜索引擎友好
推送通知可以让用户再次访问变的容易

除了Chrome支持以外,Firefox和Opera也支持了PWA

service worker

相当于一个用户端的代理,拦截url,优先从缓存中获取资源,若缓存中没有,则向服务端请求。
优势及作用
预缓存加载,也可以作为file cache(static)。
service-worker

现在Service Worker在chrome、firefox和opera中是被支持的。Safari和Edge也正在努力中。
devtool - application - service worker

PWA设计概念 – peanut M&M

Aaron把PWA比作peanut M&M,这是一种称为应用外壳架构的设计概念,javascript是一种外壳,是需要存储在浏览器中,保证始终可用,当无互联网连接( offline)时,也能保证用户能看到应用的基本框架,而不是一片空白或者错误提示。
css相当于中间的巧克力层,可以缓存,也可以从服务端获取。
content(即需要)相当于里面的花生,可以缓存,也可以直接从服务端获取。但是一般来说内容是动态的,可能频繁发生改变,所以大部分都是从服务端获取(项目设计中应该尽量减少把不必要的内容都存储下来)。

Manifest.json

PWA主要一个 Manifest.json来配置一些功能,可以设置浏览器的样式,添加到屏幕的图标等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "PWA DEMO FM.202",
"short_name": "FM.202",
"description": "Simple Progressive Web App for ginny's friends.",
"icons": [{
"src": "assets/icons/ic-face.png",
"type": "image/png",
"sizes": "72x72"
}, {
"src": "assets/icons/ic-face-large.png",
"type": "image/png",
"sizes": "144x144 256x256"
}],
"start_url": "index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"orientation": "portrait"
}

安装

可以通过Chrome的“添加到主屏幕”按钮,保存到主屏幕上。
只有满足如下条件时窗口才会显示。

1、有一个有效的 Web Manifest。
2、安装有有效的 Service Worker。
3、通过 HTTPS 访问应用程序。

测试工具Lighthome

对PWA的评分工具,包括检测在各种网络状态下应用的加载情况。仅测试静态网页,对用户交互等动态行为并不作评分。可以在chrome插件中找到。
swPrecache进行预抓取,有service worker一整套体系。

参考链接
Service Worker W3C官方草案
chrome-feature
Getting Started with Progressive Web Apps
有趣的PWA游戏和工具