浅谈一下我了解的PWA

Progressive Web Apps,简称PWA,中文翻译过来就是渐进式网页应用,个人觉得它可以算是Web应用的下一个进化方向之一, 毕竟技术的发展有时候是不可预估的,谁也无法预料技术的走向,但至少它代表了一种可能性,下面我们就一起来了解下这种新兴技术。

以下仅代表个人见解和认知,有结合其他大神的文章的分析,如有不足之处欢迎指正!

 一、什么是Progressive Web Apps? 

Progressive Web Apps,简称PWA,中文直译过来就是渐进式Web应用,一个合格的PWA,应该具有但不限于以下特点:

 渐进式:针对不同版本不同内核的浏览器,它的功能能够渐进式的增强,随着用户与应用之间的联系加深,如果用户需要,网页可以渐进式地变成App,比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。但它仍是 Web 而非放到 App Store 里。

响应式:适应多种运行环境,无论是移动端、web端还是平板电脑等等。

对网络环境的弱依赖: 得益于谷歌的service worker技术,使PWA极大降低对网络环境的依赖,能够在离线或者网络极差的环境下工作。

持续更新:同样由于service worker的存在,应用能够轻松实现持续更新。

类原生体验:有像原生应用般的交互和导航给用户原生应用般的体验,如果用户愿意,特闷可以选择将PWA应用添加到手机主屏幕,同样得益于service worker,它甚至可以让PWA应用像原生应用一样接收消息推送。

安全:通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。


二、我个人对PWA的一些认知

以上对PWA的一些定义,都是一些官方的定义或者一些大神的认知,下面来谈谈我个人对PWA的一些认知,以及它和目前的Hybrid App、小程序、快应用的区别。

目前市场上主流的Hybrid App无非两种做法:

1.类似React Native这种,通过JavaScript语言进行开发,视觉上通过标签转义,将RN标签转化为手机原生图形界面;操作上通过js调用手机底层硬件和SDK;这种做法的优点是APP体验好,缺点是开发周期几乎和原生APP差不多

2.国内外很多中小企业比较青睐的H5页面套APP外壳的做法,例如国内的APICloud、H5plus等等,其本质上只是一个可以访问特定H5页面的浏览器;这种做法的优点是开发周期短,缺点是体验和性能都较差。

而小程序和快应用,个人认为更多的是借鉴React Native的思路进行实现的,尤其是微信小程序,基本上就是沿用了RN的那一套。

那么PWA和以上几种应用的区别在哪里呢?有些人可能会觉得PWA和小程序以及快应用几乎没什么区别,但在我看来,PWA和小程序、快应用、混合APP这些东西天生就不一样!

还记得PWA的全名吗?Progressive Web Apps,这里已经写得很明确了,它是Web App啊,React Native、小程序、快应用一直在致力于去HTML化,虽然他们都是使用JavaScript作为开发语言进行编写的,但是你要知道,JavaScript本就不是只为HTML而生的,如果你有阅读过相关书籍你就会知道,JavaScript其实可以在浏览器以外的环境下运行!

以上其它应用,基本都已经摒弃了HTML中除了JS以外的其它内容,但是PWA不一样,它从骨子里仍然是一个Web页面!说到Web App,有些同学可能会嗤之以鼻,确实,当前市场下,Web App也就是移动端Web页面的份额已经极大化的萎缩(下图是google发布的移动Web和App使用时长占比),或者说Web App可能从来没有辉煌过,从传统电脑端转移到智能手机时代,中间的过渡其实非常短,相信这点大家都是感同身受的,但是现在,谁也说不准Web App是否来到了一个风口位置 -- 因为有了PWA,你访问的Web页面已经有了能够媲美原生App的体验!

图片描述


三、PWA将如何改变我们的移动体验?

当你在手机浏览器中打开一些Web网页时,经常会看到以下的页面:


这些Web App会推荐你打开它们的原生应用,如果你的手机没有下载则会跳转到相应的下载页面,但是对于用户来讲,在没有WIFI的情况下可能并不想为了一个不常用到的App消耗流量和系统内存,或者手机容量比较吃紧的用户,可能有时候会为了删除哪些应用保留哪些应用而犹豫不决,现在有了PWA,一切都能迎刃而解!而这些,还不是全部!

在2016年11月google团队已经在尝试并初步实现把「添加至主屏」重命名为「安装」,被安装的 PWA 不再仅以 widget 的形式显示在桌面上,而是真正做到与所有原生应用平级,一样被收纳进应用抽屉(App Drawer)里,一样出现在系统设置中。


PWA能够获得和原生APP同级的权限,也能够像原生APP一样实时获取推送消息,即使你在以后想要删掉这个PWA应用,你也依然可以在浏览器中获得高质量高体验的Web页面,在Web端,甚至Mac环境下也能享受到这种体验!


四、案例欣赏

国内外有一些优秀的技术团队已经开始尝试并推出了一些不错的PWA应用,我这里简单介绍下两个已知的

FlipKart(印度)

图片描述

离线情况下的视觉差异

图片描述


豆瓣(中国)

Alt text

Alt text

Alt text



更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

质性研究工具_质性研究【001】

袁长蓉 复旦大学 博士研究生导师课程 人类是追求意义的物种,会不断地从生活细节当中不断的归纳提炼,形成精神。形成理论抽象的概念,然后再利用这些概念,这些理论反过来,解释生活。 质性研究是由地到天的研究。质性研究…

python实现文件下载图片视频

最近在学习爬虫,在爬取网站时很多时候是需要将图片或视频下载到本地 今天就来说说如何使用urllib将图片保存到本地 以下代码均为win7 python3.6.* 方法一(使用下载函数保存) from urllib import request # 要下载的图片链接地址 img_url …

在JUnit中处理异常的3种方法。 选择哪一个?

在JUnit中,有3种流行的方式来处理测试代码中的异常: 尝试捕捉习语 使用JUnit规则 带注解 我们应该使用哪一个?何时使用? 尝试捕捉习语 这个习语是最受欢迎的习语之一,因为它已在JUnit 3中使用。 Testpublic void…

项目开发中发布更新文档备注

项目开发中 经常会遇到 某一个团队成员更新了,配置文件但是没有及时沟通导致项目发布后出现异常的情况。 这时就需要一个项目更新发布的规范说明文件,比如每次更新更改了哪些,进行文档备注。 更新的脚本文件也要随更新文档一起给到,配置文件也要将最新的配置信息给到。 转载于:…

bind函数polyfill源码解析

准备知识 使用new来调用函数会自动执行下面的操作: 创建一个全新的对象这个新对象会被执行原型连接这个新对象会绑定到函数调用的this如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象 注意this绑定规则,new操作具…

Java方法中的参数太多,第2部分:参数对象

在上一篇文章中 ,我研究了与方法和构造函数的长参数列表相关的一些问题。 在那篇文章中,我讨论了用自定义类型替换基元和内置类型以提高可读性和类型安全性。 这种方法使方法或构造函数的众多参数更具可读性,但并没有减少参数的数量。 在本文…

django内置服务器

单进程多线程的 多线程用来并发,各个线程之间不会阻塞,每个线程对应一个连接转载于:https://www.cnblogs.com/BlueFire-py/p/10031245.html

java mysql_Java与mysql的连接

接触编程、计算机一段时间,免不了的就要接触到,各种数据,而各种数据到了深处自然就要接触到数据的存储和调用,之前在我的文章中,已经了解到了IO流在文件中以及在TCP\IP协议中的各种传输,而慢慢的&#xff0…

Oracle 创建wims用户和表空间

/*用sys SYSDBA *//*分为四步 *//*第1步:创建临时表空间 */create temporary tablespace xxxxxxx_temp tempfile D:\app\Administrator\oradata\orcl\xxxxxxx_temp.dbf size 50m autoextend on next 50m maxsize 20480m extent management local; /*第2步&#xff1…

面试常见问题之实现bind函数

前言: 原文首发于我的博客,说实话,这半年来在各大社区看别人分享的面试题中 bind 函数已经出现 n 多次了,这次准备详细探究下 首先让我们看看 mdn 对于 bind 函数的描述是什么 语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参…

WIN10 开启右键 命令提示符

PowerShell强行加入右键菜单也罢了,命令提示符还默认禁用,可谓巨硬又一次智障操作。通过操作注册表可以解除这个封印: 移除 HKEY_CLASSES_ROOT\Directory\Background\shell\cmd 键中的 HideBasedOnVelocityId 然后刷新注册表,可能…

使用JUnit和Repeat注​​释编写有效的负载测试

EasyTest最近推出了一套新的注释,可帮助其用户编写有效的测试用例。 进入EasyTest的两个主要注释是: 重复 持续时间 今天,我们将讨论重复标注。 一种新的方法级别注释 重复已添加到EasyTest框架。 此批注可用于重复相同的测试多次。 在您…

mysql权限表_MySQL 数据库赋予用户权限操作表

MySQL清空数据库的操作:truncate table tablename;MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户一、grant 普通数据用户,查询、插入、更新、删除 数据库中所有表数据的权利。1 grant select on testdb.* to c…

Intellij IDEA 部署Web项目,解决 404 错误

https://blog.csdn.net/eaphyy/article/details/72513914转载于:https://www.cnblogs.com/123hll/p/9329676.html

Redux源码简析

Redux核心概念 单一 store ,只能挺过getState()获取状态,不能直接修改只能通过触发 action 修改状态使用纯函数 reducers 描述action如何改变state 整个redux的实现就是围绕上面的这三点进行实现的,整个源码量不大,理解了核心概…

23种计模式之Python实现(史上最全最通俗易懂)内容整改中

第一篇 Python与设计模式:前言 第二篇(23种设计模式) 创建类设计模式(5种) 单例模式、工厂模式、简单工厂模式、抽象工厂模式、建造者模式、原型模式 结构类设计模式(7种) 代理模式、装饰器模式…

使用Apache Felix文件安装配置OSGi服务

最近有关托管服务的帖子让我想起了我值得一提的Apache Felix File Install中的一项功能。 在与Holger合作进行项目时,我从他那里了解到File Install不能仅用于管理包。 它还监视配置文件,并在托管服务各自的配置更改时更新托管服务。 文件安装还可以配置…

mysql 条件分析_数据分析之mysql

MYSQLselect 列名(全部*)计数函数:AVG(列名)返回某列的平均值COUNT()返回某列的行数(count(*)表示对表中行的数目进行计数,不管对表列中包含的是空值还是非空值。MAX()返回某列的最大值MIN()返回某列的最小值SUM()返回某列值之和distinct去重&#xff0c…

css线性渐变

此方式可以实现背景色由上往下渐变,这里加上-webkit-考虑兼容问题,若要改变渐变方向,改变top即可,如right、left、bottom效果图: 代码如下: background: -webkit-linear-gradient(top,red,black); 不带前缀&#xff0c…

scroll-view组件bindscroll实例应用:自定义滚动条

我们知道scroll-view组件作为滑动控件非常好用,而有时候我们想放置一个跟随滚动位置来跟进的滚动条,但又不想用滚动条api该怎么办呢?(当然是自己写一个呗还能怎么办[自黑冷漠脸]) 嗯,没错。自己写一个就好了…