一、背景

从2018年到现在,作为号称下一代web应用模型的PWA,逐渐成为了一个各大前端厂商争先恐后进行涉足,布局的一个新的技术, 其主要的对标物Native app,作为现在最主流的mobile端应用,它的安全,性能,用户体验的确明显领先于其他互联网载体,但是原生App始终有一些缺点,比如

1. 昂贵开发成本

2. 软件上线,版本更新都需要发布到不同的商店,并通过审核

有些APP你可能使用频率特别少,但是你还是不得不去商店中下载庞大安装包,或者可能一段时间不使用以后,随着版本的更新,你也不得不去重新更新并安装

PWA技术的作为web应用,其天生优势能很好的解决以上的问题。

二. 什么是PWA

PWA是Progressive Web App的英文缩写, 翻译过来就是渐进式增强WEB应用, 是Google 在2016年提出的概念,2017年落地的web技术。目的就是在移动端利用提供的标准化框架,在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。

引用官方介绍:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging - Feel like a natural app on the device, with an immersive user experience.

即是:

1. 可靠——即时加载,即使在不确定的网络条件下也不会受到影响。
当用户从主屏幕启动时,service work可以立即加载渐进式Web应用程序,完全不受网络环境的影响。service work就像一个客户端代理,它控制缓存以及如何响应资源请求逻辑,通过预缓存关键资源,可以消除对网络的依赖,确保为用户提供即时可靠的体验。

 
可靠

2. 快速
据统计,如果站点加载时间超过 3s,53% 的用户会放弃等待。页面展现之后,用户期望有平滑的体验,过渡动画和快速响应。

 
快速

3. 沉浸式体验—— 感觉就像设备上的原生应用程序,具有沉浸式的用户体验。
渐进式Web应用程序可以安装并在用户的主屏幕上,无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验,甚至可以重新与用户接触的Web推送通知。

 
沉浸式体验

Web应用程序中,可以通过manifest.json控制应用程序的显示方式和启动方式,指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向,甚至可以指定是否显示浏览器Chrome。
根据官方的介绍,不难看出,pwa的目标直指原生app,那接下来我们就来了解下PWA到底是个怎么样的何方神圣。

三. 核心功能

PWA并不是单指某一项技术,你更可以把它理解成是一种思想和概念,目的就是对标原生app,将Web网站通过一系列的Web技术去优化它,提升其安全性,性能,流畅性,用户体验等各方面指标,最后达到用户就像在用app一样的感觉。

PWA中包含的核心功能及特性如下:
  1. Web App Manifest
  2. Service Worker
  3. Cache API 缓存
  4. Push&Notification 推送与通知
  5. Background Sync 后台同步
  6. 响应式设计

四. PWA如何弥补和原生App的差距

性能差异

PWA使用app Shell架构模型

1. 快速加载
2. 尽可能使用较少的数据
3. 使用本机缓存中的静态资产
4. 将内容与导航分离开来
5. 检索和显示特定页面的内容(HTML、JSON 等)
6. 缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容,但同时不影响网络的可链接性和可检测性。 用户下次访问您的应用时,应用会自动显示最新版本。无需在使用前下载新版本。
为了保证首屏的加载,在内容请求完成之前,可以优先保证 App Shell 的渲染,做到和 Native App 一样的体验,App Shell 是 PWA 界面展现所需的最小资源。
无法离线使用
Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技术实现离线加载和缓存
数据更新
Background Sync 后台同步技术
无法实现推送
Push&Notification 实现推送与通知
无法添加到桌面
通过manifest.json文件配置,使得可以直接添加到手机的桌面上。
天生优势:

1. 无需安装,无需下载,只要你输入网址访问一次,然后将其添加到设备桌面就可以持续使用。
2. 发布不需要提交到app商店审核
3. 更新迭代版本不需要审核,不需要重新发布审核
4. 现有的web网页都能通过改进成为PWA, 能很快的转型,上线,实现业务、获取流量
5. 不需要开发Android和IOS两套不同的版本

劣势:

1. 游览器对技术支持还不够全面, 不是每一款游览器都能100%的支持所有PWA
2. 需要通过第三方库才能调用底层硬件(如摄像头)
3. PWA现在还没那么火,国内一些手机生产上在Android系统上做了手脚,似乎屏蔽了PWA, 但是相信当PWA火起来以后,这个问题就不会是问题

五. PWA的发展趋势

2016年, PWA在google正式落地,基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了
随着 iOS 11.3 的发布,iOS正式开始支持PWA
Windows Edge 支持PWA

随着越来越多的游览器大厂,相继的对PWA做出了支持和优化,想必PWA的时代即将到来

来源:https://www.jianshu.com/p/098af61bbe04

PWA-让前端网页媲美原生APP的用户体验的更多相关文章

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

    什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...

  2. 如何提高手机APP的用户体验?

    详细内容请点击 随着移动互联网如日中天,如火如荼的时候,手机APP开发日益高涨了起来,关于手机APP的用户体验,也是一个老话长谈的话题.从事这行业也很久了,以下是我个人在工作中的一些关于APP的用户体 ...

  3. 移动APP的用户体验测试

    经常被问到用户体验测试,什么是用户体验测试,用户体验测试要关注的都有哪些呢,现在为大家来罗列一下: 1.横竖屏测试 在移动设备上做用户体验测试,最容易想到的就是对APP做横竖屏的测试来观察APP的显示 ...

  4. 关于原生app、webApp、混合app的介绍

    WebApp 原生App(Native App) 混合App(hybrid App) webApp: 用html5,css3 js开发的网页,运行在移动端的浏览器 zepto.angular.vue. ...

  5. Web APP和原生 APP的不同

    我们现在手机中的APP,大部分都是混合APP,也就是既用到了原生APP的基础,又用到了Web APP的基础,混合的比例从0%到100%之间不等.更好的了解APP的类型,有助于我们学则合适的测试策略.今 ...

  6. “今日校园” App 用户体验分析

    一.背景 为进一步提升信息化应用水平,更好的服务师生,南通大学智慧校园移动端APP“今日校园”定于11月5日正式上线运行.登陆APP可浏览学校新闻.校园生活.各部门微信公众号等内容,查看校内通知.校内 ...

  7. MUI简介-最接近原生App体验的前端框架

    MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...

  8. 转发-UI基础教程 – 原生App切图的那些事儿

    UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切 ...

  9. NativeScript - JS 构建跨平台的原生 APP

    使用 NativeScript,你可以用现有的 JavaScript 和 CSS 技术来编写 iOS.Android 和 Windows Phone 原生移动应用程序.由原生平台的呈现引擎呈现界面而不 ...

随机推荐

  1. 【bat】判断字符串是否包含某字符串

    @echo off set a=55544333 set c=6666dfsfds set b=44 echo %a%| findstr %b% >nul && ( echo % ...

  2. .net core 在 View 中使用 Jquery 无效问题

    问题描述: 在 View 视图中使用模板 _Layout.cshtml,其中模板已经调用了 Jquery.js ,但是在 View 视图下写 js 无效.后来通过浏览器查看自己写的 js 压根没加载出 ...

  3. linux ----------- 在VM上 的安装 centos

    1.虚拟机的安装步骤 2.什么是虚拟机 通过软件来模拟硬件的功能 3.主流的虚拟机 Vmware Workstation 简称Vmware 4.虚拟机下载地址https://www.vmware.co ...

  4. Docker 搭建简单 LVS

    LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现了基 ...

  5. 【题解】Luogu P5468 [NOI2019]回家路线

    原题传送门 前置芝士:斜率优化 不会的可以去杜神博客学 这道题我考场上只会拆点跑最短路的70pts做法 后来回家后发现错误的爆搜都能拿满分(刀片) 还有很多人\(O(mt)\)过的,还是要坚持写正解好 ...

  6. Java的常用API之Object类简介

    Object类 1.toString方法在我们直接使用输出语句输出对象的时候,其实通过该对象调用了其toString()方法. 2.equals方法方法摘要:类默认继承了Object类,所以可以使用O ...

  7. TCP和UDP的差异

    TCP建立连接 如果有人问TCP如何建立连接?大部分的回答都是三次握手成功,就建立连接了. 那么握手的目的是什么呢? 1)告知对方自己的序号 2)初始化资源 例如以下握手案例,握手两次由客户端主动发起 ...

  8. 颜色rgba和16进制

    今天阅读代码的时候看到了一个实现颜色渐变的效果,不同于以往使用函数实现的颜色渐变,这个是规律的递增rgba里面的几个参数完成的,看起来就像是等差数列一样.没想到还能这样来,简单的了解了一下 rgba的 ...

  9. easydict的使用方法

    easydict的作用:可以使得以属性的方式去访问字典的值 from easydict import EasyDict as edict a=['8',2,3]a=edict()a.f=99print ...

  10. Prime Path POJ-3126

    The ministers of the cabinet were quite upset by the message from the Chief of Security stating that ...