写点什么

Progressive Web App:模仿原生应用的 Web 应用

  • 2015-11-27
  • 本文字数:1195 字

    阅读完需:约 4 分钟

Progressive Web App 的外观和行为都同原生移动应用类似,但它本质上上仍然是Web 应用,不需要通过应用商店部署。

Ashteya Biharisingh 是一名混合移动应用开发人员。据她介绍

[Progressive Web App] 是一个具有响应式布局的 Web 应用,可以离线工作,并能够安装到设备的主屏幕上。这里所说的“安装”是指:在主屏幕上添加该 Web 应用的快捷方式。当用户点击快捷方式时,Web 应用会加载到浏览器,并以全屏模式打开。

Progressive Web App 有许多好处。对用户而言,他们无需在设备上安装应用。与原生 / 混合应用相比,这大大节省了设备的存储空间。对开发人员而言,他们无需通过应用商店发布应用,版本发布和 Bug 修复可以更及时。

近日,印度最大的网上商店之一 FlipKart 推出了一个 Progressive Web App:FlipKart Lite。Android 用户通过浏览器打开该网站时会看到一条“添加到主屏幕”的消息。下次,当用户使用该 Web 应用时,只要点击主屏幕上的图标,它就会以全屏模式打开,就像一个原生应用。目前,作为一个 Progressive Web App,FlipKart Lite 仅支持 Android 设备。如果用户在 iOS 设备上访问该网站,会被重定向到应用商店。这是因为 FlipKart Lite 使用 Service Worker 实现了离线功能,而后者仅在 Chrome 和 Opera 上得到了支持。关于FlipKart 的更多信息,可以查看这篇博文或者这段来自2015 Chrome 开发者峰会的视频

重要通知:接下来InfoQ 将会选择性地将部分优秀内容首发在微信公众号中,欢迎关注InfoQ 微信公众号第一时间阅读精品内容。

Bruce Lawson 是一名来自 Opera 的工程师。据他介绍,Opera 和Chrome 正紧密合作,探索Progressive Web App 的最佳实现,但他们的实现之间还是有一些差别。在Bruce 看来,为了便于此类应用的推广,应该有一种机制可以在用户第一次访问网站时作出提醒,该网站是一个Progressive Web App,而不是在第二次访问时才提醒用户“安装我们的应用”

Nolan Lawson 是 Progressive Web App Pokedex.org 的创建者。对于 FlipKart Lite 的出现,他写到

这个应用让我超级兴奋,因为它向我们展示了,仅仅使用 Web 技术就可以构建一个离线的、60FPS 的移动应用。

Bruce 认为,Progressive Web App 已经准备好迎接它的黄金时代。微软正考虑在其浏览器中添加 Service Worker支持。而且,他们还遵循 W3C Maifest 创建了 manifold.js ,使开发人员可以开发跨平台和设备的托管应用。iOS 也提供了一种创建“可主屏化(homescreen-able)”应用的方式。

感兴趣的读者可以进一步查阅Bruce 提供的其他一些相关资源,如 Web Manifest 说明 Service Worker 手册等。


感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群InfoQ 好读者(已满),InfoQ 读者交流群(#2)InfoQ 好读者)。

2015-11-27 18:008826
用户头像

发布了 1008 篇内容, 共 389.5 次阅读, 收获喜欢 344 次。

关注

评论

发布
暂无评论
发现更多内容

【数据结构与算法】LeetCode面试真题,带你领略算法思想

Dream-Y.ocean

面试 队列 9月月更

从东南亚到中东,为什么社交类产品成为游戏出海的突破口?

融云 RongCloud

白皮书 社交网络 出海 社交娱乐

跟着卷卷龙一起学Camera--内存池浅析05

卷卷龙

ISP 9月月更

【数据结构与算法】“堆”还能这样用_堆的应用

Dream-Y.ocean

面试 9月月更

C++来时路 _ 重温经典之C++类和对象 | 三大特性之一 - 封装 | 腾讯面试题

Dream-Y.ocean

c++ 封装 底层 腾讯面试 9月月更

少儿编程是智商税?还是未来的生存技能?

博文视点Broadview

rust语言写的贪吃蛇游戏

福大大架构师每日一题

rust 贪吃蛇 福大大

跟着卷卷龙一起学Camera--内存池浅析06

卷卷龙

ISP 9月月更

HowTo:Pipy 如何修改请求和响应的内容

Flomesh

Service Mesh 服务网格

【数据结构与算法】粽子树?二叉树_关于堆你不知道的事情

Dream-Y.ocean

栈和队列 9月月更

怎样提高报表呈现的性能

陈橘又青

sql 9月月更

明道云新增四项国产信创平台兼容性认证

明道云

最高增强至1440p,阿里云发布端侧实时超分工具,低成本实现高画质

阿里云大数据AI技术

机器学习 企业号九月金秋榜

Python语法之模块和包(1)

梦笔生花

9月月更 Python语法 模块的创建

读书笔记|择一城以定财富,择一行以定发展

宇宙之一粟

读书笔记 职业 个人感悟 9月月更

【数据结构与算法】详解 “清华大学(考研)OJ题”_ 二叉树重要面试OJ题

Dream-Y.ocean

面试 算法 清华大学 9月月更

深度剖析“八大排序”(上)_ 探寻一些不为人知的细节

Dream-Y.ocean

排序算法 9月月更

大数据ELK(六):安装Elasticsearch

Lansonli

ES 9月月更

Python之类和对象(2)

梦笔生花

属性 9月月更 子类的定义

深度剖析“八大排序”(下)- 交换排序 | 快速排序 & 优化 | 非比较排序_探寻一些不为人知的细节

Dream-Y.ocean

排序算法 9月月更

【web开发基础】php开发基础快速入门(1)-PHP介绍及开发环境快速安装和基本使用介绍

迷彩

Web应用开发 php开源 9月月更 web开发基础

openjdk镜像的tag说明

程序员欣宸

Docker Docker 镜像 9月月更

【数据结构与算法】2道面试真题,带你领略算法思想【附思路、动图、源码】

Dream-Y.ocean

面试 链表 9月月更

【数据结构与算法】二叉树题目很难?一句”技巧“巧做基础二叉树题目

Dream-Y.ocean

二叉树 二叉树遍历 9月月更 技巧总结

前端三件套 HTML+CSS+JS基础知识内容笔记

明金同学

前端

打印 Logger 日志时,需不需要再封装一下工具类?

程序员小航

Java 日志 slf4j

跟我学Python图像处理丨傅里叶变换之高通滤波和低通滤波

华为云开发者联盟

Python 人工智能 企业号九月金秋榜

【数据结构与算法】一篇文章带你玩懂 “栈和队列”(增、删、查、改)的实现_【附源码、动图】

Dream-Y.ocean

队列 数据结构与算法 9月月更

架构模块一作业

Diana S

架构实战营

【中秋特辑-代码解析月饼节】C++比C语言更加规范、方便?是因为增加了如下特性 | C++98 & C++11 | C++难学?带领大家一步一步深度剖析 | 简单易懂

Dream-Y.ocean

c++ 底层 细节 9月月更

2022华为开发者大赛开学动员 开启想象力无限创新

华为云开发者联盟

云计算 后端 企业号九月金秋榜

Progressive Web App:模仿原生应用的Web应用_移动_谢丽_InfoQ精选文章