Progressive Web Apps 简称PWA,是一种接近原生用户体验的渐进增强的web-app.从浏览器演进而来,沉浸式的体验,改进web的性能低下等。是Google 在2015年提出,今年才推广开来。其宗旨是渐进增强,不再有媲美原生应用的想法,而是让 WebApp 变得更加对移动环境友好,体验自然顺滑。
目前移动web网页的体验
1. 手机桌面入口不够便捷; 当然现在可以添加到主屏幕
2. 没网络就没响应,不具备离线能力;
3. 不像APP一样能进行消息推送。
PWA带来的新特性
Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
Connectivity independent - Service workers allow work offline, or on low quality networks. 可以离线,使用service worker技术,即使网页关闭,PWA 仍然可以在后台运行获取数据更新
App-like - Feel like an app to the user with app-style interactions and navigation.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications. 可以推送消息
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. 可以添加到home屏幕
Linkable - Easily shared via a URL and do not require complex installation. 便于分享
浏览器支持情况
基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了,Firefox 和微软的 Edge 正在开发中,水果公司的 Safari 最近刚刚表达了可能会支持 PWA。从长久的角度看,只要 Google 不断推动一些网站往 PWA 转型,其他的浏览器或者竞争对手也就会自然跟风上船。
怎么实现?
实现 PWA 所需要的特性,主要是围绕着 Service Workers 的基于事件的 cache 系统和消息推送的一套新的 API,此外还需要定义 manifest.json 来定义安装行为或是样式等。
体验PWA
首先,将你的chrome升级到最新的55版本
1 合集
https://pwa.rocks/,这个网址有很多pwa应用。其中不乏 The Washington Post,Flip Board,AliExpress,Wikipedia,Gmail,Booking 这样的大头
2 阿里巴巴
http://m.alibaba.com
和Hybrid App的区别
Hybrid App虽然看上去是一个Native App,但只有一个UI WebView + Native的壳子,里面访问的是一个Web App。而PWA是真正的Web App。
和微信小程序的区别
在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10
在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 37 内核来渲染的
在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的
小程序入口在微信里面,并不能添加到主屏幕,不能离线,不能推送。小程序的优势就是庞大的用户群,推广起来非常好。
总而言之,PWA是未来的趋势。
参考文章:
1. 我们真的需要网页版App吗?Google PWA的困局
2. https://github.com/hemanth/awesome-pwa#tutorials
3. https://developers.google.cn/web/progressive-web-apps/