什么是Progressive Web App?

Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行在手机上。让Web App和Native App之间的差距更小。

概览特性:

  • 添加到屏幕
  • 从屏幕点击启动
  • 加载屏
  • 支持离线应用
  • 支持Push Notification

<!--more-->

除了Chrome支持以外,Firfox和Opera也支持了PWA.

Web App Manifest文件

PWA主要一个Manifest.json来配置一些功能,像浏览器样式、添加到屏幕的图标等等。

添加到屏幕的提示Banner

利用Service Worker来实现离线存储

关于Service Worker的标准定义可以参考:https://www.w3.org/TR/service-workers/

这里有Service Worker的一些样本参考:https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker

利用Push Notification增加用户的回头率

Push是利用GCM实现的

PWA的技术现在还并未流行起来,因为也是一个比较新的技术,相信随着浏览器技术的发展,这种轻量的Web App的方式会逐渐的得以广泛应用, 了解下Google出的这种技术,对于我们Web前端开发来说,是非常有意义的,希望以上能为大家带来帮助.

如果想查看google的技术文档还请FQ查看: Getting Started PWA

这里还有一些关于PWA的资料收集: https://github.com/ljinkai/pwa-collection

转自:http://www.html-js.com/article/3564

  • 《Twitter 宣布移动 Web 技术栈迁移到 Node.js,Express,React PWA》:近日,Twitter 工程师 Nicolas 宣布 Twitter 几乎所有的移动流量迁移到了以 Node.js 为基础的服务中(Today we moved all of Twitter's mobile web traffic (that's like, a lot) to our new web stack – Node.js, Express, React PWA.)。在过去的两年中,Twitter 移动 Web 技术栈主要是基于 Scala,Google Closure Templates 以及少量的 JavaScript。后来 CharlieCroom 开始尝试将登出服务迁移到 JavaScript 技术栈中,并且进行了约 9 个月的线上测试,效果尚可,因此 Twitter 决定全部迁移到 JavaScript 技术栈中。同时,Twitter Web APP 还支持所谓的 PRPL 范式:主动推送首屏关键资源、仅渲染初始路由、预存其他路由、按需懒加载与创建剩余路由。

Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?的更多相关文章

  1. 【Hybrid App】一个产品经理眼中的PhoneGap Vs. AppCan

    首先在写这篇文章前,必须先申明一下,本人是技术出身,对HTML技术及手机客户端都有过编程经验,只是出于工作岗位的变动,便没有再具体代码工作,以下文章涉及的中间件的基本代码实现及前期的API使用,都是自 ...

  2. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  3. 说说 PWA 和微信小程序--Progressive Web App

    作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...

  4. (转)PWA(Progressive Web App)渐进式Web应用程序

    PWA 编辑 讨论 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化 ...

  5. Progressive Web App

    下一代 Web 应用? 近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展. 包括但不限于基于 N ...

  6. 第一个progressive web application,发车!

    progressive web application是谷歌推出的一种渐进式web应用,通过利用service-worker等来达到类似于原生应用,而且在chrome浏览器还可以添加到主页,完全就和一 ...

  7. Progressive web app理念及发展前景

    前一段时间微信推出微信小程序进行公测,着实火了一把,博得了大众的眼球,不明真相的吃瓜观众们纷纷围观,所谓的“微信小程序”,通俗的讲就是一种不需要下载安装即可使用的应用程序,脱离于app商店依托于浏览器 ...

  8. PWA(Progressive Web App)入门系列:(一)PWA简单介绍

    前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progr ...

  9. 为Go Web App 创建一个主页面

    原文地址    大多数web app都有一个相同的布局.这个布局可能包含一个header或者footer,甚至可能包含一个导航菜单.Go的标准库提供一个简单的方式来创建这些基本元素,通过被不同的页面重 ...

随机推荐

  1. 怎样在OpenStack上安装Ubuntu系统

    转载请注明出处,否则将追究法律责任http://blog.csdn.net/xingjiarong/article/details/47011893 OpenStack是一个Iaas即基础即服务的云架 ...

  2. Template Method模式

    模版方法模式,实际上就是指子类做方法实现,父类做算法实现. 通常情况下,子类继承父类,我们是站在子类的视角上来看父类的,目的不外乎下面三个 1,子类继承父类的方法 2,通过子类来增加方法,实现新的功能 ...

  3. phalcon builder 用法

    $rawSql = $builder->columns(["aa","bb"]) ->from("TableName") -&g ...

  4. android 各版本的区别

    三.Android 6.x 新增运行时权限概念 Android6.0或以上版本,用户可以完全控制应用权限.当用户安装一个app时,系统默认给app授权部分基础权限,其他敏感权限,需要开发者自己注意,当 ...

  5. Node-Webkit - package.json - 参数设置

    必填: main :(string)APP的主入口,指定一个html文件,如:main:"index.htm". name :(string)APP的名称,必须具有唯一性. 例子: ...

  6. 第三方苹果开发库之ASIHTTPRequest(翻译版)

    本文转载至 http://www.cnblogs.com/daguo/archive/2012/08/03/2622090.html   来自:http://www.dreamingwish.com/ ...

  7. 九度OJ 1254:N皇后问题 (N皇后问题、递归、回溯)

    时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:765 解决:218 题目描述: N皇后问题,即在N*N的方格棋盘内放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一 ...

  8. 九度OJ 1208:10进制 VS 2进制 (进制转换)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2040 解决:612 题目描述: 对于一个十进制数A,将A转换为二进制数,然后按位逆序排列,再转换为十进制数B,我们乘B为A的二进制逆序数. ...

  9. spark的若干问题

    问题1:SPARK与HADOOP之间的关系? spark是一种高效处理hadoop分布式数据的处理引擎.借助hadoop的yarn框架,spark就可以运行在hadoop集群中.同时spark也可以处 ...

  10. (转)基于libRTMP的流媒体直播之 AAC、H264 推送

    参考: 1,基于libRTMP的流媒体直播之 AAC.H264 推送 http://billhoo.blog.51cto.com/2337751/1557646