概念
WPA 的英文全称是Progress Wab Apps,翻译为渐进式应用。
来自 appsco.pe 的解释
WAP是传统应用的未来发展方向。webbrowser技术的进步使得创建基于web的应用程序成为可能,这些应用程序模仿并提供与本机(传统)应用程序相同的功能,这意味着应用程序可以像网页一样被创建。
WPA通过web浏览器提供像原生应用一般的强大功能,同时在使用的时候可以不受网络环的影响。它将远程应用的功能引入到了Web。
PWA指向一个清单文件manifest,其中包含网站信息,包含图标、背景屏幕、颜色和默认方向等内容,使用了浏览的 Service Worker 功能,通过 Service Worker,可以使得选择性的缓存部分网站资源,以提供离线访问的体验。
特点
响应式,独立于网络连接,类似于原生应用的交互和体验,始终保持更新,安全,可发现,可重连,可安装,可链接
与传统apps对比
- 跨平台
wpa程序运行于浏览器,与平台无关,所以无论桌面、IOS、或安卓都可以兼容 - 开发简单
创建wpa应用与创建web网站几乎是一样的,同样是基于html5和jsvascript。 - 不依赖应用商店
像web页面一样,pwa程序运行于web浏览器上,这意味着它们不需要通过应用商店即可访问和升级,同时也意味着节省了30%的抽成(App Store) - 搜索引擎友好
不同于原生应用,pwa程序可以被搜索引擎搜索到,更容易被用户来发现和传播。
什么是 Service Worker
WPA功能的关键在于Service Worker。
Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站,拦截并修改访问和资源请求,细粒度地缓存资源。你可以完全控制应用在特定情形(最常见的情形是网络不可用)下的表现。
简单来讲,Service Worker 只是在后台运行的worker脚本,用JavaScript编写,只需要简单几行代码,就可以实现拦截网络请求、处理推送消息并执行其他的任务。对于某些不支持Service Worker的浏览器,WPA会自动降级成普通的网站,一样可以为用户提供服务。
Service worker运行在worker上下文,因此它不能访问DOM。相对于驱动应用的主JavaScript线程,它运行在其他线程中,所以不会造成阻塞。它设计为完全异步,同步API(如XHR和localStorage)不能在service worker中使用。
出于安全考量,Service workers只能由HTTPS承载,毕竟修改网络请求的能力暴露给中间人攻击会非常危险。在浏览器的隐私模式,Service Worker不可用。
下图说明 Service Worker 是如何工作的。
Service Worker 的生命周期
从上图看,当用户首次访问网页时候,服务器返回响应网页,
在第一步中,当调用register()函数时候,Servies Worker 开始下载。在注册过程中,浏览器下载、解析并执行 Service Worker(第2部),如果在此步骤出现了任务错误,该 Service Worker将被废弃。
在Sercice Worker被成功执行之后,安装时间将被激活(第3步)。
完成安装之后,Sercice Worker即开始被激活生效,开始控制在其控制范围中的所有事件。
Demo实例
if("serviceWorker" in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(registration){
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err){
console.log('ServiceWorker registration failed: ', err);
});
}
// sw.js
self.addEventListener('install',function(event){
console.log('install event from sw.js.')
});
// 结果: