什么是 PWA?有什么用?送三本《PWA入门与实践》!

article/2025/9/21 7:40:00

很高兴受到《PWA入门与实践》作者王乐平老师的邀请,为这本书写推荐语。

下面我们就听听作者王老师带你快速玩转 PWA 吧!

文末有给各位粉丝的福利!抽奖送出三本《PWA入门与实践》。

导读:如今,互联网大流量早已进入了移动端,国内主流互联网产品的移动端流量已经普遍超过整体流量的80%。在移动端应用开发中,我们要面临为不同操作系统(Android、iOS、Windows 10)、不同设备(手机、平板)开发应用的问题,为此我们需要投入额外的成本应对这些差异。就算我们投入了成本,开发出了产品,在下载和安装环节,仍然存在很大的推广成本问题。统计学研究表明,安装烦琐是用户放弃尝试更多应用的主要原因之一。PWA做为一门Google推出的WEB端的新技术,可以很好地解决这些问题。

来源:华章计算机(hzbook_jsj)

PWA运用现代的Web API能力为Web进行了扩展和增强,使Web具有与原生应用程序类似的体验度和能力。作为一种W3C的规范实现,PWA可以正常地运行在各个平台的浏览器中,真正做到一套代码解决所有平台一致性问题。同样,由于PWA具备安装成本几乎为0的特点,它非常适合实现Web端到应用端的过渡,提升转化率。

 

目前,国内外越来越多的网站对PWA进行了接入,如淘宝、饿了么、微博、星巴克、优步、推特、脸书、Ins等等,接入后的性能和转化率都有明显提升。如今Google/Microsoft/Apple已全部支持的PWA技术,Web的主流框架React、Vue等对PWA提供了快速接入方案,主流的浏览器厂商也紧跟其后,共同为PWA生态系统提供支持。

什么是PWA

PWA全称Progressive Web App,直译是渐进式WEB应用,是 Google 在 2015 年提出,2016年6月才推广的项目。是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验。

所谓的P(Progressive)这里有两层含义,一方面是渐进增强,让WEB APP的体验和功能能够用渐进增强的方式来更接近原生APP的体验及功能;另一方面是指下一代WEB技术,PWA并不是描述一个技术,而是一些技术的合集。

PWA特性

  • 渐进增强 - 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则。

  • 响应式用户界面 - 适应任何环境:桌面电脑,智能手机,笔记本电脑,或者其他设备。

  • 不依赖网络连接 - 通过 service workers 可以在离线或者网速极差的环境下工作。

  • 类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的。

  • 持续更新 - 受益于 service worker 的更新进程,应用能够始终保持更新。

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

  • 可发现 - 得益于 W3C manifests 元数据和 service worker 的登记,让搜索引擎能够找到 web 应用。

  • 再次访问 - 通过消息推送等特性让用户再次访问变得容易。

  • 可安装 - 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店。

  • 可连接性 - 通过 URL 可以轻松分享应用,不用复杂的安装即可运行。

 

PWA优、缺点

优点:

上面提到的,所有这些现代 Web 特性。

Web最重要的意义在于开放和去中心化,这才是万维网的初衷

 

缺点:

门槛不低。部署的服务器要求HTTPS,ServiceWorker涉及API众多,需要单独学习

用户体验习惯。网页应用替代原生应用的方式,用户短时间内不适应

 

PWA关键技术

Manifest(应用清单)

Web App Manifest是一个W3C规范,定义了一个基于JSON的清单,为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。manifest 就是 PWA 概念的一环,它给你了控制你的应用如何出现在用户期待出现的地方(比如用户手机主屏幕),这直接影响到用户能启动什么,以及更重要的,用户如何启动它。

 

使用 web 应用程序清单,你的应用可以:

 

能够真实存在于用户主屏幕上

在 Android 上能够全屏启动,不显示地址栏

控制屏幕方向已获得最佳效果

定义启动画面,为你的站点定义主题

追踪你的应用是从主屏幕还是 URL 启动的

 

例如:

Service Workers

Service Worker是浏览器在后台独立于网页运行的脚本,它打开了通向不需要网页或用户交互的功能的大门。这个 API 之所以令人兴奋,是因为它可以支持离线体验,让开发者能够全面控制这一体验。

 

ServiceWorker是由两部分构成,一部分是 cache,还有一部分则是 Worker。

 

它被设计为一个相对底层、高度可编程、子概念众多,也因此异常灵活且强大的 API,它就像一个位于客户端和网络之间的代理,可以拦截、处理、响应流经的网络请求,配合Cache API,你可以自由管理网络请求文件的缓存,这使得 Service Worker 可以从缓存中向 web 应用提供资源,即使是在离线的环境下。这样,在离线和网速低的情况下也能秒开,说白了,之前的Hybrid架构的出现不就是为了这个功能么。之前虽然有AppCache,但它具有相当多的缺陷,这里就不说了。

 

来张官网的形象图:

Push Notification(推送通知)

Push 和 Notification是两个不同的功能,涉及到两个API,但是它们之前有依赖关系。

 

Notification这块应该大家多少了解一些,属于浏览器发出的通知消息,之前需要浏览器一直开着才能实现这种通知,但是现在有了上面提到的Service Worker,就可以驻留在进程里面操作了。

 

Push & Notification关系:

 

●Push : 服务器端将更新的信息传递给 Service Worker

●Notification: Service Worker 将更新的信息推送给用户

PWA与其他App的对比

目前的移动端APP:

●Native APP

●Web App

●Hybrid App

 

Native APP

Native APP,指原生App,是一个完整的App,可拓展性强,需要用户下载安装使用。

 

优点:

●可使用移动设备所有功能

●速度快、性能高、用户体验好

●离线使用

 

缺点:

●开发成本高、维护成本高

●每个不通的平台都要重新开发

●应用商店审核复杂,效率低

 

Web APP

Web App 指采用Html5语言写出的App,生活在浏览器里的应用,不需要下载安装。

 

优点:

  • 跨平台开发、无需下载、无需安装,开发速度快

  • 发布灵活,因为根本不需要应用商店的审核

●较低的开发成本

●可即时上线

●用户可以直接使用最新版本

●支持设备广泛

 

缺点:

●只能使用有限的移动设备API

●浏览器兼容问题

●无法上传到应用商店

●用户暂时不适用

 

Hybrid App

Hybrid APP指的是半原生半Web的混合类App,需要下载安装。

 

优点:

  • 兼容多平台

  • Web前端工作人员就可快速构建

  • 可以上传到应用商店

  • 可以基于浏览器的方式进行页面调试

  • 可使用的移动设备的API多

缺点:

  • 用户体验不如原生应用

  • 为模拟原生样式,需要大量的html和css

  • 性能稍慢

  • 技术不是很成熟

 

PWA兼容性

Blink内核(Chrome、Oprea、Samsung Internet 等)和 Gecko内核(Firefox)和Microsoft Edge都已经实现了 PWA 所需的所有关键技术的支持, 华为手机浏览器、IOS的Safari(Webkit)等主流浏览器目前均已支持PWA的API。

 

PWA的未来

这里引用一下黄玄说过的一句话:

 

请不要让 web 再继续离我们远去,浏览器厂商们已经重新走到了一起,而下一棒将是交到我们 web 应用开发者的手上。乔布斯曾相信 web 应用才移动应用的未来,那就让我们用代码证明给这个世界看吧。

让我们的用户,也像我们这般热爱 web 吧”

 

推荐阅读:

 

 

《PWA入门与实践》

本书全面介绍了PWA的基础知识、核心技术以及相关实践,适合开发者快速入门PWA,对PWA进行全面的学习。

  • 国内首本详细讲述PWA技术原创书籍,更符合国人阅读习惯

  • 从商业视角的推广成本到体验视角的秒开、离线体验,全方位介绍PWA基础知识、核心技术及实践方案

  • 从理论准备到实操流程,再到经验分享,是一本帮你真正理解PWA的“全链路书籍”

【适读人群】

本书面向有一定Web开发基础的读者,以及想学习PWA或者需要一本全面的PWA手册的开发者。

福利送书

抽奖送出三本《PWA入门与实践》。长按按关注“玩转VS Code”公众号,回复“PWA”,进行抽奖。

有兴趣的童鞋,也可以点击“阅读原文”,直接在京东购买。


http://chatgpt.dhexx.cn/article/Pm4sCPBw.shtml

相关文章

关于PWA的各种问题

目录 前言 PWA的简单了解和需求 项目manifest.json和sw的无脑生成神器 安装 注册 动态配置manifest.json IOS无法获取webpack-pwa-manifest中配置的icon 来自因为需求而产生的静态manifest.json的坑 前言 — 以下结论和方法均为个人摸索,涵盖从度娘那儿找到…

PWA 概念及核心功能的基本介绍

目录 一. PWA 概念介绍 1.1 什么是 PWA? 1.2 为什么会出现 PWA? 1.3 如何判断一个 web 应用是 PWA? 二. PWA 核心功能 2.1 何谓 Service Worker 2.2 注册 Service Worker 2.3 Service Worker 常用事件 2.3.1 install 2.3.2 fetch 2.4 Manife…

PWA系列:第一章 PWA使用场景分析

前言 2018年4月份起微软的应用商店上线第一批PWA应用以来,近一年随着safari开始支持ServiceWorkers,国内浏览器厂商也逐步开始大力加持,到本课程发稿起95%以上的浏览器都支持了PWA的横幅安装。PWA轻应用也逐渐被广大站点使用和推广。 PWA轻应…

PWA(Progressive Web App)入门系列:(一)PWA简介

前言 PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习。 什么是PWA PWA全称Progressive Web App,直译是渐进式WEB应用…

一文读懂什么是 PWA?

什么是 PWA? 1. 概念2. 特性3. 功能4. 优势与劣势5. 发展 1. 概念 PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持…

PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest

前言 前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…

一文了解PWA——Progressive Web App

近年来,出现了一种新的应用开发模式——PWA(Progressive Web App,即渐进式Web应用)。今天就来为大家分享什么是PWA,以及它与小程序的区别、技术原理。 PWA的基本概念和技术原理 PWA是一种基于Web技术的应用开发模式&a…

PWA相关知识

http://www.leiphone.com/news/201606/UEiart497WUzS62u.html 我们真的需要网页版App吗?Google PWA的困局 其实回来的两周里,我对Progressive Web App(以下简称 PWA)的理解也在不断更新,现在是思考更为全面的时候。 一…

PWA介绍及快速上手搭建一个PWA应用

PWA初次体验 ​ 前言:本示例不用安装任何东西 部分资源来自网络资源及PWA官网,不要把PWA想象的太复杂,跟着示例走一下,你行的。 PWA介绍 一个新的前端技术,PWA( 全称:Progressive Web App &…

PWA详解

PWA(Progressive Web App,渐进式网页应用,逐渐接近原生app的web app)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在…

PWA应用

一、什么是PWA应用 一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。 官网:https://developers.google.com/web/progressive-web-apps/ 是 Google 在 2015 年提出,…

汽车金融风控企业如何开展风控体系建设

汽车融资租赁主要有直租和回租两种模式,相对回租业务而言,直租因更具盈利优势和用户体验优势而备受瞩目。2017年大搜车、易鑫、优信和瓜子等巨头纷纷涉足直租领域,厂家金融和经销商集团金融机构随后跟上,直租模式在国内开始呈现井…

重磅分享:一份关于车贷的政策性文件分享

关注公众号“番茄风控大数据”,获取更多数据分析与风控大数据的实用干货。 不同领域不同产品的策略跟政策要点肯定是不同的,对车贷而言因为有车这个标的物,车会移动会跑,为了应对这个相关的风险点,我们就会对标的物做跟…

线下产品风控门道真不少

关注 “番茄风控大数据”,获取更多数据分析与风控大数据的实用干货。 “你好,请问这里是肯蝶科技有限公司吗?请问这里,有没有一个叫小明的人在这里上班?” “您好!对,这里是肯蝶科技有限公司。…

贷后风控中逾期案件差异化的分配逻辑

在风控精细化运营的当下,贷后工作的开展,越来越需要精细化管理。 今天我们总结梳理了番茄风控之前的内容并结合近期开展的内容,为大家带来一个催收模型优化和逾期案件催收差异化策略的内容,详细请看本文介绍。 一.催收模型 在催收…

GPS北斗定位模块应用实现汽车风控管理

车辆安装GPS北斗定位模块越发常见,无论是车主导航,还是车贷企业的追踪、交警交通的管理等,都是硬性需求和必备工具,在金融风控行业的作用也越来越明显了。 车辆作为资产的一种类型,对资产安全性、实时管控等的需求&am…

金融风控——Python建模

金融风控基础篇 风控的基本概念0 基于AI的风控应用1 什么是信用风险?2 信用模型和欺诈模型的区别3 小额现金贷 vs 大额信贷4 信用评分建模的基本流程5 和风控建模相关的问题有: 数据清洗的全过程什么是 ETL交叉验证的优势及实现方法 建立模型模型的评估方…

风控策略中如何制定差异化利率定价方案

风控策略中如何制定差异化利率定价方案 前言一、框架设计二、流程设计三、方案测算四、策略上线总结 前言 一个产品上线后,随着规模的扩大,基于风险收益的匹配原则,以及差异化营销的管理要求,除了授信额度策略之外,我…

风控策略调优——二手车车龄政策调整

本文的研究背景:为了增加进件和放款,拓展业务规模,如何根据现有的数据表现,调整既有的风控策略。所以,此时博弈的双方再次出现,即:增大业务量的同时,使风险控制在可接受的范围之内。本文以A汽车…

滴滴大数据在汽车金融风控场景中的应用

导读:滴滴独有的出行场景大数据在金融领域有着非常广泛的应用前景,未来可与银行,保险,支付和理财等机构深入合作,帮助传统金融机构提升资源配置效率,降低获客和风险管理成本。出行场景大数据在交易欺诈识别…