本文共 1853 字，大约阅读时间需要 6 分钟。

概念

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.jsself.addEventListener('install',function(event){
    console.log('install event from sw.js.')});

// 结果：

转载地址：http://yplqf.baihongyu.com/