WPA基础

标签: WEB

概念

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 工作方式

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.')
});

// 结果:
运行结果

版权声明:本文为Ango_原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Ango_/article/details/103981585