PWA - 渐进式网络应用初认识

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/

上一篇:DevTool开发者工具


下一篇:[webpack] devtool配置对比