简介:
PWA 全称是: Progressive Web Apps 字面意思:渐进式的Web应用程序
旨在让Web应用更像真实的APP应用(本机应用程序)。 说白了,就是传统Web应用程序的,加强版。通过网络提供的移动应用程序。
新闻:
PWA在2018年中旬,与Chrome(Windows,Mac,Linux,Chrome OS)一起使用。(Window 10 上已支持PWA,可以在任务栏,单窗口显示。)
Android端:Chrome、Firefox、Opera、三星浏览器;苹果的Safari;都已支持PWA
Google正在推出 WebAPK 技术,可以将 PWA 转化为 APK安装文件。
2018将是 PWA 腾飞的一年(自2015年推出以来)。在Window 10 上表现更活跃。
华为手机应用商店、微信小程序,也表明了,即时应用程序(PWA)是大趋势。
PWA支持情况?
- 国产手机上的浏览器,支持不太好。
- Chrome for android 需要谷歌商店,VPN下。
- 必须https网站(Chrome可以localhost测试)。
现有的wap站点下快速启动
- 添加manifest文件。
- 添加Service Worker (fetch页面代理,做缓存策略, 这个服务是常驻浏览器的,下次进来激活SW,判断缓存更新等)
- 可以使用Cache API 或者 IndexedDB 或者 LocalStorage
- 使用webp格式图片http://www.etherdream.com/WebP/Demo1.html
- 做兼容处理。
PWA与hybrid与原生应用的区别?
它有别于hybrid, PWA从不打包到脱机文件中(更多表现在:可脱机预览,可自动到最新状态)。PWA支持的用户体验功能更多。 PWA是原生应用程序和移动网站的混合体,速度比Wap更快。用户无需等待,在后台更新加载。
原生应用,需要应用商店(中间商),PWA可直达(一步到位)用户各个设备中。 安装和更新更方便。还不需要内容审核。
PWA效率更高,开发成本更低。作为自家的技术,在Android平台是大势所趋。
什么是PWA?
它是一个新技术,由Google、Microsoft、Mozilla、Apple等公司正在制定的一个新的现代Web应用程序标准。
可以在应用商店(Win10商店)中列出PWA以便于发现和安装,但应用商店只会指向该Web应用的服务器。即使应用程序与应用商店的内容政策不兼容,用户也可以直接从浏览器中查找并安装它。
真正的实现:一次编写,全端运行(iOS,Android,Windows和Web等),更新维护更方便!
根据 google 定义,PWA 应该具有一下特性:
渐进式:能确保每个用户都能打开网页(所有浏览器和设备上运行)
响应式:PC,手机,平板,不管哪种格式,网页格式都能完美适配
离线应用:支持用户在没网的条件下也能打开网页,这里就需要 Service Worker 的帮助
APP 化:能够像 APP 一样和用户进行交互(PC上可以桌面快捷方式、任务栏,手机上可以主屏幕快捷方式)
常更新:一旦 Web 网页有什么改动,都能立即在用户端体现出来。(Web服务器更新即可,没有各种应用商店的的繁琐)
安全:安全第一,给自己的网站加上一把绿锁--HTTPS
可搜索:能够被引擎搜索到
推送:做到在不打开网页的前提下,推送新的消息
可安装:能够将 Web 像 APP 一样添加到桌面
可跳转:只要通过一个连接就可以跳转到你的 Web 页面
用到的技术:
Web App Manifest:Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息(如名称,作者,图标和描述)。manifest 的目的是将Web应用程序安装到设备的主屏幕(Install to desktop),为用户提供更快的访问和更丰富的体验。【需放置根目录】
搜索引擎将能够抓取网页并轻松找到可在线使用的PWA。这将使PWA易于发现,就像网页一样。
Fetch API 提供了一个获取资源的接口(包括跨域),更快,更简单。任何使用过XMLHttpRequest
的人都能轻松上手,但新的API提供了更强大和灵活的功能集。
Service Worker 是拦截和响应你的网络请求的编程接口。如果你不需要离线功能,可以简单的创建一个空的/service-worker.js
文件 —— 会被提示安装你的 app。【需放置根目录】
Service Worker 是一个位于浏览器与网络之间的客户端代理,它以可拦截、处理、响应流经的 HTTP 请求,使得开发者得以从缓存中向 web 应用提供资源而闻名。不过,Service Worker 其实也可以主动发起 HTTP 请求,在“后台” 预请求与预缓存我们未来所需要的资源。
浏览器用一个单独的线程来下载和执行它。他可以拦截网络请求,包括页面切换,静态资源下载,ajax请求所引起的网络请求。
service worker 主要有三个事件:install,activate和fetch。
install:app被安装时触发。它经常用来缓存必要的文件。缓存通过Cache API来实现。
WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
https://developers.google.com/web/progressive-web-apps
https://huangxuan.me/pwa-qcon2016/#/38
https://www.cnblogs.com/yjken/p/3922299.html
http://www.infoq.com/cn/articles/exploration-and-practice-of-baidu-search-for-pwa
https://segmentfault.com/a/1190000008880637
https://www.howtogeek.com/342121/what-are-progressive-web-apps/
https://jakearchibald.github.io/isserviceworkerready/
https://github.com/goldhand/sw-precache-webpack-plugin
https://github.com/GoogleChromeLabs/sw-toolbox