PWA详解

article/2025/9/21 8:07:47

PWA(Progressive Web App,渐进式网页应用逐渐接近原生app的web app)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验

PWA不能包含原生OS相关代码PWA仍然是网站,只是在缓存、通知、后台功能等方面表现更好。Electron程序相当于包裹OS原生启动器(Launcher)的网站,未来,许多Electron程序可能转化为PWA。


1. 概念

PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。

PWA 全称为 Progressive Web App,中文译为渐进式 Web APP,其目的是通过各种 Web 技术实现与原生 App 相近的用户体验(用户体验逐渐接近原生App)

纵观现有 Web 应用与原生应用的对比差距,如离线缓存、沉浸式体验等等,可以通过已经实现的 Web 技术去弥补这些差距,最终达到与原生应用相近的用户体验效果。


2. 特性

  • 安全可靠
    使用 Service Work 技术实现即时下载,当用户打开应用后,页面资源的加载不再完全依赖于网络,而是使用 Service Work 缓存离线包存在本地,确保为用户提供即时可靠的体验。

  • 访问更快
    首屏可以部署在服务端,节省网页请求时间,加载速度更快,拥有更平滑的动态效果和快速的页面响应。

  • 响应式界面
    支持各种类型的终端和屏幕。

  • 沉浸式体验
    在支持 PWA 的浏览器和手机应用上可以直接将 Web 应用添加到用户的主屏幕上,无需从应用商店下载安装。从主屏幕上打开应用之后,提供沉浸式的全屏幕体验。


3. 功能

  • 手机应用配置(Web App Manifest)
    可以通过 manifest.json 文件配置,使得可以直接添加到手机的桌面上。

  • 离线加载与缓存(Service Worker+Cache API )
    可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。

  • 消息推动与通知(Push&Notification )
    实现实时的消息推送与通知

  • 数据及时更新(Background Sync )
    后台同步,数据及时更新


4. 优势与劣势

优势:

  1. 超简单的安装和下载。
    以谷歌发布的 squoosh.app 为例。

PC 桌面版:
方式1:在浏览器输入并打开 squoosh.app 之后。可以点击右上角【Install】进行安装。

在这里插入图片描述
方式2:可以点击右上角三个点的图标,然后选择【安装Squoosh】进行安装。

在这里插入图片描述
安装之后就可以在桌面看到快捷方式的图标,直接打开就可以拥有与原生应用媲美的沉浸式体验。

在这里插入图片描述
在这里插入图片描述
手机移动版:

  1. 首先在浏览器中输入并打开网址“squoosh.app”。
  2. 然后点击向上的图标,在弹出的选项中选择“添加到主屏幕”。

在这里插入图片描述

  1. 在弹出的【添加到主屏幕】编辑对话框中可以修改应用名称。

在这里插入图片描述

  1. 点击完成或者【添加】就可以将应用添加到主屏幕,下次直接打开就可以使用了。

在这里插入图片描述

  1. 发布迭代不需要第三方平台审核。
    我们都知道发布一个苹果应用是需要提交 App Store 商店进行审核,通过了方可发布成功的。安卓应用也是一样。并且更新迭代版本的时候也需要审核,还需要提交一些功能说明,图片等资料。但是网页版的应用就完全不需要这个审核过程,直接部署服务器就可以使用。
  2. 渐进式
    现有的 Web 项目可以通过 PWA 的几个核心技术点一步步转型成一个完整的 PWA 应用。

劣势:

  1. 因为推出的时间不长,所以现有浏览器的支持还不够全面, 不是每一款浏览器都能100%的支持所有的 PWA 特性。
  2. 对于底层硬件的调用还是需要依赖第三方库才能实现(如打开摄像头,实现语言功能等等)。
  3. PWA 现在还没那么火,国内一些手机生产商在 Android 系统上做了手脚,似乎屏蔽了 PWA, 但是等 PWA 真正流行起来之后,相信这个问题就不会存在了。


5. 发展

  • 谷歌
    基于 Chromium 开发的浏览器 Chrome 和 Opera 已经完全支持 PWA 。
    这里说一下 Chromium 和 Chrome 的区别。
    Chromium 是谷歌的开源项目,由开源社区去维护。拥有众多的版本包括Windows、Mac、Linux。国内所有的 “双核浏览器”,都是基于 Chromium 开发的,而我们下载的 Chromium 浏览器是其源码未经修改的直接编译版本。
    Chrome 是基于 Chromium 开发的,是闭源的,跨平台多端支持,特性更加丰富。

    Google上线了两个新网站,web.dev 和 squoosh.app 都支持 PWA( web.dev 是宣传和推广 PWA 的,解释了 PWA 的几个关键技术。squoosh.app 是一个图片压缩工具) 。

  • 微软
    微软将 PWA 带到了 Windows 10。同时 Windows Edge(windows 10 之后微软推出的浏览器,比 IE更流畅、外观 UI 更舒适) 也支持 PWA。

  • IOS
    随着 iOS 11.3 的发布,iOS 正式开始支持 PWA,可以将它放在苹果手机主屏。

  • Android
    Twitter 和 Flipboard 都推出了 PWA,可以将它放在安卓手机主屏。

  • 国内
    国内支持 PWA 的应用有微博、淘宝、豆瓣和饿了么。

随着越来越多的浏览器大厂对 PWA 做出了支持和优化,PWA 的时代已经不远了。


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

相关文章

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汽车…

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

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

汽车金融风控流程设计和机器学习实践

本次分享内容大纲: 01. 汽车金融风控流程设计 汽车金融风控流程设计中需要关注的五个节点:获客、反欺诈、信用评估、额度、利率,整个风控流程的设计一直是围绕这几个点来设计的。 除了上述几点,还需考虑俩个重要因素: …

了解汽车贷款全过程,不要掉进车贷“坑”!

一,征信查询和大数据查询 现在贷款基本都会查大数据和征信,信用很重要。 其中征信是指个人信用报告,是征信机构把依法采集的信息,进行加工整理,最后向合法的信息查询人提供的个人信用历史记录。多是与银行或者较大金融…

贷前风控策略审批及决策引擎——策略审批架构搭建

本文是FAL量化风控全线条训练营的听课笔记,对此感兴趣的可以去关注FAL金科应用研究院的公众号、知乎、官网去了解相关内容。现将核心内容进行整理,补充一些自己的理解和总结,便于结合自己当前工作内容,提升认知。 若对风控领域感…

风控基础——通俗介绍逾期次数和逾期期数

假设某人在2017年1月申请了一笔住房贷款,按合同每个月需要还款2000元,但是因暂时的资金周转不灵,3月至7月连续5个月都没有还款。那么他7 月的当前逾期期数、累计逾期次数和最高逾期期数则分别是: 当前逾期期数:指的是当…

智取风控特征—巧用PBOC落地额度模型

信贷业务有对公与对私之分,由于信贷业务模式的差异,风险把控方式不同,对于授信额度策略自然非常不同。 目前对公业务中,常规的做法是借助信用评级方法对现有的企业进行信用评价,综合判断后再输出相关授信额度。目前银…

购车分期系统-智能风控体系,有效控制贷款风险

一、购车分期业务简介 分期购车是指放款人根据借款人的申请,向借款人指定的经销商,按照借款人同意的条件,垫付借款人指定汽车的购车费用,借款人将汽车抵押给放款人,以借款人分期还款为条件,将该车辆的占有、…

车贷需要注意的问题,车贷风控流程这几点你必须知道

https://baijiahao.baidu.com/s?id1594179123703564858&wfrspider&forpc 前言:何为车贷风控? 指的是车贷业务的风控技术,这里讨论车贷指主流的P2P、小额贷款公司经营的车辆抵押贷款。银行的新车按揭、银行二手车按揭(一般…

Docker镜像是什么,有什么用?

参考文章:Docker 什么是镜像

Docker是什么,怎么用?

1、docker解决了什么的问题? Docker是属于运维和持续集成的管理工具,特别是在运维方面使用Docker可以让你省去很多重复的工作,可以让你的应用程序永远都是在相同的环境中运行。 统一标准 ● 应用构建 ○ Java、C、JavaScript ○ 打成软件包 …

什么是Docker?

什么是Docker? Docker允许我们打包我们的应用以及其所有的依赖包到一个标准化单元中用于软件开发。Docker容器将一块应用打包到一个完整的文件系统中,在该文件系统中包含了该应用要运行的所有要求:代码,运行时,系统工具&#xff…