下一代Web开发技术-Progressive Web App介绍

PC和Mobile开发技术演进

PC方向,从客户端到富客户端,到现在广泛使用的Web。

移动方向,目前主要还是原生应用和Mobile Web,PWA相关技术是未来发展方向。

PWA的概念

Progressive Web App (中文翻译为:渐进式Web应用)带来的体验将网络应用的优点与原生应用的优点相结合。用户在浏览器中第一次访问时就能体会到它们的好处,因为不需要进行任何安装。在用户随着时间的推移增进与应用的关系后,其功能会变得越来越强大。它即使在不可靠网络上也能快速加载、能够发送相关推送通知、具有桌面图标,并且可采用顶层全屏体验的方式加载。

PWA的特点

渐进式

适用于选用任何浏览器的所有用户,因为它是以渐进式增强作为核心宗旨来开发的。

自适应

适合任何机型:桌面设备、移动设备、平板电脑或任何未来设备。

连接无关性

能够借助于服务工作线程在离线或低质量网络状况下工作。

类似应用

由于是在 App Shell 模型基础上开发,因此具有应用风格的交互和导航,给用户以应用般的熟悉感。

持续更新

在服务工作线程更新进程的作用下时刻保持最新状态。

安全

通过 HTTPS 提供,以防止窥探和确保内容不被篡改。

可发现

W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们,从而将其识别为“应用”。

可再互动

通过推送通知之类的功能简化了再互动。

可安装

用户可免去使用应用商店的麻烦,直接将对其最有用的应用“保留”在主屏幕上。

可链接

可通过网址轻松分享,无需复杂的安装。

PWA vs Native App

Native App:依赖运行的平台操作系统,比如Android或iOS,需要将应用提交到应用商店,比如Apple App Store或者Google Play Store,国内各大应用商店等。

PWA:不关系平台操作系统,运行在浏览器中,使用标准的Web开发技术,无需提交到应用商店进行审核,发布即用。

PWA vs Web App

Web App:使用标准的Web技术,但是在处理离线,推送上欠缺,不能生成桌面图标等。

PWA:使用标准的Web开发技术,可以支持离线可用,通过service worker进行更新和缓存,采用App shell模型基础开发,界面和交互类似应用。支持推送,未来还支持操作设备(调用摄像头、读取陀螺仪等)。

PWA关键技术

Manifest

网络应用清单是一个 JSON 文件,您(即开发者)可以利用它控制在用户想要看到应用的区域(例如移动设备主屏幕)中如何向用户显示网络应用或网站,指示用户可以启动哪些功能,以及定义其在启动时的外观。网络应用清单提供了将网站书签保存到设备主屏幕的功能。一个PWA的manifest.json示例:

Service Worker

Service Worker 是一段脚本,与 Web Worker 一样,也是在后台运行。作为一个独立的线程,运行环境与普通脚本不同,所以不能直接参与 Web 交互行为。Native App 可以做到离线使用、消息推送、后台自动更新,Service Worker 的出现是正是为了使得 Web App 也可以具有类似的能力。页面注入service worker代码示例:

Responsive Web Design

RWD是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面电脑显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现,减少用户进行缩放、平移和滚动等操作行为。

第4-6点不在这里展开,刚兴趣的可以查找相应资料进行学习。

浏览器对PWA的支持

越来越多的浏览器支持PWA的技术,特别是移动浏览器,比如Chrome,Firefox,UC移动浏览器等。

PWA案例欣赏

国内的有新浪微博Lite版本:https://m.weibo.cn/beta

饿了么移动版:https://h5.ele.me/msite/#pwa=true

国外有Twitter移动版本、Pinterest等产品。随着各大浏览器对PWA技术的支持,未来会出现越来越多的PWA的应用。

参考链接

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

https://segmentfault.com/a/1190000008880637

https://zhuanlan.zhihu.com/p/25800461

https://developer.mozilla.org/zh-CN/Apps/Progressive

https://openweb.baidu.com/pwa-future/

https://lavas.baidu.com/doc

https://zhuanlan.zhihu.com/p/25524382

2017圣诞快乐

本文来自企鹅号 - 苏研大云人媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏wblearn

我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

最近一直在做项目,感觉没什么分享的所以一直没写。 今天不上班,就把最近做的一个demo做个简单的总结。

991
来自专栏即时通讯技术

IM开发基础知识补课:正确理解前置HTTP SSO单点登陆接口的原理

一个安全的信息系统,合法身份检查是必须环节。尤其IM这种以“人”为中心的社交体系,身份认证更是必不可少。

1662
来自专栏云计算

用Google Analytics分析WordPress

Google Analytics(分析)提供与您网站的访问者流量和销售相关的详细统计信息,让您更好地了解您的受众群体。对任何有兴趣增加访客群的网站所有者都有好处...

5761
来自专栏向治洪

Angular2入坑指南

序 对后端开发来说,前端是神秘的,眼花缭乱的技术,繁多的框架,出名的不出名的好几百种,看是“繁荣”,其实显得杂乱无章,但是我们在做开发的时候,技术选型还是主流的...

1997
来自专栏冰霜之地

WWDC2016 Session笔记 - iOS 10  推送Notification新特性

在今年6月14号苹果WWDC开发者大会上,苹果带来了新的iOS系统——iOS 10。苹果为iOS 10带来了十大项更新。苹果高级副总裁Craig Federig...

1082
来自专栏CSDN技术头条

IMVC(同构 MVC)的前端实践

导语 随着 Backbone 等老牌框架的逐渐衰退,前端 MVC 发展缓慢,有逐渐被 MVVM/Flux 所取代的趋势。 然而,纵观近几年的发展,可以发现一点,...

2396
来自专栏Youngxj

H+工具箱

2745
来自专栏开源项目

5 个优秀前端 UI 框架 | 码云周刊第 65 期

2417
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:在应用中添加WeiXin组件

2. 微信开发平台注册的应用ios的Bundle ID和安卓版本的包名需和smobiler云平台应用包名一致,如图:

1022
来自专栏HBStream流媒体与音视频技术

DXGI快速截屏桌面直播技术

  很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等。在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引...

4886

扫码关注云+社区

领取腾讯云代金券