PWA (Progressive Web App)

PWA (Progressive Web App)
1、简介
是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生的功能,比如：通知推送
Js-to-Native与以PWA为首的纯web应用,将分别从两个方向挤压Hybrid的生存空间,消化当前Hybird架构主要解决的问题
IOS目前还不支持PWA
2、下一代web应用
2.1 优点
webpack、Rollup等打包工具
Babel、PostCSS等转译工具
TypeScript等可转译为Javascript的编程语言
React、Angular、vue等现代web前端框架
同构Javascript应用
2.2 缺点
网页资源下载带来的网络延迟
web应用依赖于浏览器作为入口
没有好的离线使用方案
没有好的消息通知方案
3、PWA的优点及特征
显著提高应用加载速度
web应用可以在离线环境下使用
web应用能够像原生应用一样被添加到主屏幕
web应用能够在未被激活的时候发起推送通知
web应用与操作系统集成能力进一步提高
具有渐进增强,响应式用户界面,不依赖网络链接,类原生应用,持续更新,安全,可发现,再次访问,可安装,可连接性的特征
4、Web App Manifest
4.1 介绍
通过一个清单文件向浏览器暴露web应用的元数据,包括名字、icon的URL等,以备浏览器使用,比如：在添加至主屏幕或推送通知时暴露给操作系统,从而增强web应用与操作系统的集成能力
它就好比PWA的户口本一样,承载着web应用与操作系统集成能力的重任,还将在日后不断发展,以满足web应用高速演化的需要
4.2 manifest.json

{

“short_name”: “Manifest Sample”,

“name”: “Web Application Manifest Sample”,

“icons”: [{

“src”: “launcher-icon-2x.png”,

“sizes”: “96x96”,

“type”: “image/png”

}],

“scope”:“/sample/”, // -> 定义了web应用的浏览作用域,比如作用域外的url会打开浏览器而不会在当前的PWA里继续浏览

“start_url”: “/sample/index.html”, // -> 定义了一个PWA的入口页面

“display”: “standalone”,

“orientation”: “landspace”, // -> 锁定屏幕旋转

“theme_color”: “#000”, // -> 主题色

“background_color”: “#fff” // -> 背景色

}
5、Service Worker
5.1 LocalServer
让web应用离线使用的第一次尝试
Google为了让web应用可以在本地存储数据与离线执行,特意在07年开发了一个浏览器来增强web应用 Goole Gears
在Gears API中,通过向LocalServer模块提交一个缓存文件清单来实现离线支持
5.2 Application Cache
让web应用离线使用的第二次尝试
在LocalServer的基础上进一步发展
缺点：不可编程,无法清理缓存,几乎没有路由机制

CACHE MANIFEST CACHE: index.html main.js 5.3 Service Worker介绍让web应用离线使用的第三次尝试可编程的Web Worker 像一个位于浏览器与网络之间的客户端代理,可以拦截、处理、响应流经的HTTP请求配合Cache Storage API, 可以自由的管理HTTP请求文件粒度的缓存是支撑PWA作为下一代web应用模型的最核心技术是未来web客户端技术工程化的必争之地,带来离线优先的架构革命 5.4 Service Worker生命周期 01.png 5.5 Service Worker的安装 // sw.js self.oninstall = (e) => { e.waitUntil( caches.open('installation').then(cache => cache.addAll([ './', './styles.css', './script.js' ])) ) } 5.6 Service Worker使用离线缓存 // sw.js self.onfetch = (e) => { const fetched = fetch(e.request) const cached = caches.match(e.request) e.respondWith( fetched.catch(_ => cached) ) } 5.7 Service Worker的缓存策略 02.png 6、Push Notification Push API的出现则让推送服务具备了向web应用推送消息的能力 Push API不依赖web应用与浏览器UI存活,所以即使是在web应用与浏览器未被用户打开的时候,也可以通过后台进程接受推送消息并调用Notification API向用户发送通知 // sw.js self.addEventListener('push', event => { event.waitUntil( self.registration.showNotification('Hey!') ) }) self.addEventListener('notificationclick', event => { event.notification.close() }) self.addEventListener('notificationclose', event => {

})
7、PWA与原生APP的差异
03.png
8、PWA对web APP的影响
体验层面上逐渐向原生APP靠拢,离线可用,主屏图标入口,启动动画,基本上可以和原生APP的体验一致
开发模式的变革,Web开发的同时考虑离线模式和体验
App的安装更新机制带来运营方式的变化,url可达,应用间可链接,不仅仅依赖商场分发应用

PWA (Progressive Web App)相关推荐

PWA(Progressive Web App)入门系列：（一）PWA简介
前言 PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习. 什么是PWA PWA全称Progre ...
PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest
前言前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web ...
PWA(Progressive Web App)入门系列：安装 Web 应用
前言在传统的 Web 应用中,通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问,或者把网页地址创建到桌面上通过点击,然后在浏览器里打开. 传统模式下,图标.启动画面.主题色.视图模式.屏幕方 ...
PWA(Progressive Web App)入门系列：Sync 后台同步
前言当我们在一些地下停车场,或者在火车上.电梯等无法避免的信号不稳定的场所,使用网站应用处理一些表单操作或者上传数据的操作时,面临的将是网络连接错误的响应,使用户的操作白费. 而此刻 PWA 的 S ...
PWA(Progressive Web App)入门系列：Cache Storage Cache
前言目前浏览器的存储机制有很多,如:indexedDB.localStorage.sessionStorage.File System API.applicationCache 等等,那为什么又制定 ...
PWA(Progressive Web App)入门系列：（二）相关准备
前言在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势.为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明. 浏览器要求因 ...
PWA(Progressive Web App)入门系列：Push
前言很多时候,原生应用会通过一些消息推送来唤起用户的关注,增加驻留率.网页该怎么做呢?有没有类似原生应用的推送机制?推送功能又能玩出什么花样呢? Push API Push API 给与了 Web ...
PWA(Progressive Web App)入门系列：Notification
前言在很多场景下,需要一种通知的交互方式来提醒用户,传统方式下可以在页面实现一个 Dialog,或通过修改网页的 title 来实现消息的通知.然而传统的实现存在着一定的不足,在网页最小化的情况下, ...
PWA(Progressive Web App)入门系列：Fetch Request Headers Response Body
前言在 WEB 中,对于网络请求一直使用的是 XMLHttpRequest API 来处理,XMLHttpRequest 也很强大,传统的 Ajax 也是基于此 API 的.那么为什么 W3C 标准 ...

PWA (Progressive Web App)

PWA (Progressive Web App)相关推荐

最新文章

热门文章