一文读懂什么是 PWA（Progressive Web App）

最新推荐文章于 2025-05-16 08:58:02 发布
最新推荐文章于 2025-05-16 08:58:02 发布
阅读量9.5k 收藏 23
点赞数 19
分类专栏： 计算机网络 文章标签： web app PWA 渐进式Web应用程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunyctf/article/details/136003062
版权

目录

1. 概念

2. 特性

3. 功能

4. 优势与劣势

5. 发展

1. 概念

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

PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，其目的是通过各种 Web 技术实现与原生 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：在浏览器输入并打开 https://squoosh.app 之后。可以点击右上角【Install】进行安装。

方式2：可以点击右上角三个点的图标，然后选择【安装Squoosh】进行安装。

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

手机移动版：

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

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

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

2、发布迭代不需要第三方平台审核。

我们都知道发布一个苹果应用是需要提交 App Store 商店进行审核，通过了方可发布成功的。安卓应用也是一样。并且更新迭代版本的时候也需要审核，还需要提交一些功能说明，图片等资料。但是网页版的应用就完全不需要这个审核过程，直接部署服务器就可以使用。

3、渐进式

现有的 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 的时代已经不远了。

   总结   

PWA（‌Progressive Web App）‌是一种基于Web技术的应用开发模式，‌它结合了Web应用和原生应用的优点，‌提供类似原生应用的用户体验。‌

PWA使用HTML、‌CSS和JavaScript等Web标准技术栈进行开发，‌利用现代浏览器的功能来增强Web应用的性能和互动性。‌它的核心理念是渐进增强，‌即应用程序的功能和体验可以根据设备和浏览器的支持程度逐步提升。‌PWA的技术原理主要包括响应式布局、‌服务工作线程、‌应用清单、‌推送通知等。‌这些技术使得PWA能够在不同设备上提供类似原生应用的体验，‌同时保持开发的灵活性和成本效益。‌

  • 响应式布局：‌PWA应用的界面可以根据不同设备的屏幕大小和方向进行自适应布局，‌保证在各种终端上都能获得良好的用户体验。‌
  • 服务工作线程：‌作为PWA的核心技术之一，‌服务工作线程在后台运行，‌可以拦截和处理网络请求、‌缓存数据以及实现离线访问等功能，‌增强了应用的可靠性和可用性。‌
  • 应用清单：‌通过Web App Manifest文件，‌PWA可以定义其名称、‌图标、‌启动方式等元信息，‌允许用户将PWA添加到主屏幕，‌以类似原生应用的方式访问。‌
  • 推送通知：‌PWA可以利用浏览器的推送通知功能，‌向用户发送实时通知消息，‌与用户进行互动。‌

此外，‌PWA还具有跨平台兼容性，‌可以在不同的操作系统和设备上运行，‌无需为每个平台开发特定的独立代码库，‌从而降低了开发成本。‌例如，‌Microsoft Edge浏览器支持PWA，‌使得开发者能够利用单个代码库同时开发网站、‌移动应用和桌面应用。‌

随着浏览器厂商对PWA的支持和优化，‌越来越多的网站开始采用PWA技术，‌为用户提供更加丰富和高效的Web应用体验。‌PWA的出现，‌标志着Web应用的发展进入了一个新的阶段，‌为用户提供了更加快速、‌可靠和互动的Web应用体验

参考资料

穿上App外衣，保持Web灵魂——PWA温故-腾讯云开发者社区-腾讯云

PWA，现代前端必会的黑科技 - 知乎 | PWA技术理论+实战全解析 - 知乎

渐进式 Web 应用程序 (PWA)：彻底改变移动设备的 Web 开发 - 知乎

PWA初探总结 - CSDN | 认识 PWA - 简书 | 渐进式Web应用程序(PWA) - 百家

PWA（Progressive web APPs，渐进式 Web 应用）: manifest.json、 Service Worker
专注于计算机研发知识和资讯分享
09-26 642
安全可靠：使用 Service Work 技术实现即时下载，当用户打开应用后，页面资源的加载不再完全依赖于网络，而是使用 Service Work 缓存离线包存在本地，确保为用户提供即时可靠的体验。沉浸式体验：在支持 PWA 的浏览器和手机应用上可以直接将 Web 应用添加到用户的主屏幕上，无需从应用商店下载安装。访问更快：首屏可以部署在服务端，节省网页请求时间，加载速度更快，拥有更平滑的动态效果和快速的页面响应。可以通过 manifest.json 文件配置，使得可以直接添加到手机的桌面上。
渐进式Web应用（Progressive Web App，PWA）：打造现代Web体验
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-11 743
在Web开发领域，渐进式Web应用（PWA）的概念已经引领了一场革命，它融合了Web和原生应用的最佳特性，为用户提供卓越的体验。PWA利用Service Worker、Web App Manifest等技术，实现离线访问、推送通知、全屏模式等功能，使Web应用更加强大和独立。Service Worker是一个运行在后台的脚本，独立于Web页面，可以拦截网络请求并缓存资源，从而提供离线访问能力。Web App Manifest是一个JSON文件，用于定义Web应用的元数据，如应用的名称、图标、主题色等。
PWA渐进式Web应用
手写我对你的温柔
12-27 834
文末附上全部源码。 PWA是什么？ Progressive Web App，即 渐进式网络应用。 可以循序渐进的实现它，每次实现一部分业务。降低了业务的部署成本、适应了Browser厂商的更新节奏。 PWA组成技术： Service Worker Promise fetch cache API Notification API 1. Service Worker:（PWA最重...
浅谈PWA
weixin_43965821的博客
04-12 1056
浅谈PWA，实现PWA的hello world
出海推广之归因-PWA
mengahilva的博客
11-11 812
虽然PWA可以缓存部分内容并提供离线功能，但离线功能的实现依赖于缓存策略和Service Worker，复杂应用的完整离线体验可能难以实现。：由于PWA不是传统意义上的“应用”，用户习惯性地会通过应用商店寻找应用，而不是在浏览器中安装PWA。：PWA依赖浏览器和设备操作系统的支持，随着浏览器的更新或厂商策略的变化，可能会产生兼容性问题，影响体验一致性。：PWA支持缓存，使内容加载更快，从而优化用户体验。：用户点击广告后，可以直接加载PWA网页，而不需要前往应用商店下载，减少了用户的流失，提高了转化率。
一文了解PWA——Progressive Web App
Lydiasq的博客
05-31 4165
近年来，出现了一种新的应用开发模式——PWA（Progressive Web App，即渐进式Web应用）。今天就来为大家分享什么是PWA，以及它与小程序的区别、技术原理。
渐进式 Web 应用（PWA）开发指南
最新发布
exlink2012的专栏
05-16 1117
渐进式 Web 应用（Progressive Web Applications，简称 PWA）是一种结合了最佳 Web 和原生应用特性的现代 Web 应用程序。它们可靠、快速且具有吸引力，无需应用商店即可安装，并能在各种设备上提供类似原生应用的体验。 PWA 技术的出现解决了传统 Web 应用与原生应用之间的差距，为开发者提供了一种更加灵活、高效的应用开发方式。本指南将带您深入了解 PWA 的核心概念、技术基础以及实际开发流程。
PWA (Progressive Web App)
JackChan
06-14 1192
PWA (Progressive Web App)
Progressive Web Apps入门
weixin_33904756的博客
11-21 242
PC和Mobile开发技术演进 PC方向，从客户端到富客户端，到现在广泛使用的Web。 移动方向，目前主要还是原生应用和Mobile Web，PWA相关技术是未来发展方向。 PWA的概念 Progressive Web App (中文翻译为：渐进式Web应用)带来的体验将网络应用的优点与原生应用的优点相结合。用户在浏览器中第一次访问时...
【PWA】渐进式Web应用（Progressive Web App）
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
12-22 2467
PWA不仅是一种技术，更是一种理念：它通过结合 Web 和移动应用的特点，为用户带来更加流畅和快速的体验。同时，PWA还具备离线访问能力，这对于那些时刻有网络问题的用户来说尤为重要。
渐进式 Web 应用（PWA）
weixin_48363291的博客
04-08 2215
PWA 可以由浏览器提示以将其安装在设备上。安装后，PWA 对用户而言就是特定于平台的应用程序，是用户设备的一个永久特性，用户可以像启动其他任何应用程序一样直接从操作系统启动它。
vue-pwa-speech：Vue2执行同步语音识别语音到文本Google Progressive Web App语音
02-05
Vue2与Progressive Web App上的Google Cloud Speech执行同步语音识别 设定档 步骤1 为该项目启用Cloud Speech API。 第2步 在Speech.vue初始化Firebase apiKey: " " 安装 # Git Clone Project git clone git@...
什么是PWA（Progressive Web App）？它有哪些特点和优势？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-16 1688
PWA的核心概念示例一：设置Service Worker示例二：注册Service Worker示例三：添加到主屏幕示例四：实现推送通知示例五：处理离线状态不同角度的功能使用思路实际工作中的使用技巧在现代Web开发中，Progressive Web Apps（简称PWA）已经成为了一种趋势，它结合了Web应用和原生应用的最佳特性，为用户提供了一种全新的体验。本文旨在深入探讨PWA的基本概念，其独特之处以及如何利用这些特性来增强你的Web应用。
什么是Progressive Web App？它们有哪些特点？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-24 903
PWA的基本概念和作用关键特点1. 渐进式增强2. 可靠性3. 快速响应4. 类似原生的体验5. 可发现性6. 易于分享实现PWA的关键组件示例一：注册Service Worker示例二：编写Service Worker逻辑示例三：创建Web App Manifest文件示例四：添加离线页面示例五：处理推送通知功能使用思路和代码示例使用技巧和经验分享结束语在现代Web开发领域，Progressive Web Apps（PWA）已成为一个不可忽视的趋势。
PWA 入门指南：从零开始打造你的第一个渐进式网页应用
乐闻世界
03-30 1314
在当前的互联网环境中，用户对应用的要求越来越高，他们期待网页应用能像本地安装的原生应用一样快速、可靠并且功能丰富。这种需求催生了渐进式网页应用（Progressive Web App, 简称 PWA）的诞生。PWA 通过结合现代网页技术，为用户提供了更佳的体验：它们不仅能够在浏览器中运行，还可以安装到设备上，提供离线访问、推送通知等功能。那么，PWA 的工作原理是什么？我们又该如何创建一个 PWA？本文将带你一步一步，通俗易懂地了解 PWA 的工作原理及使用步骤。
PWA(Progressive Web Apps)（渐进式web应用程序）的出现
zjsfdx的博客
03-17 358
优势：
使用 Progressive Web Apps (PWA) 提升移动Web应用体验
qq_36287830的博客
11-18 1597
Progressive Web Apps (PWA) 是一种利用现代浏览器功能和技术构建的网页应用，它们可以提供类似原生应用的用户体验。渐进增强：PWA 可以在任何支持标准的浏览器上运行，但在现代浏览器上提供更好的体验。响应式设计：PWA 支持多种屏幕尺寸和设备类型，确保在不同设备上都能提供良好的用户体验。离线支持：PWA 可以在离线或弱网环境下正常工作，通过缓存技术和服务工作线程实现。可安装：用户可以通过浏览器将 PWA 安装到设备的主屏幕上，就像原生应用一样。安全。
渐进式Web应用（Progressive Web App，PWA）
官方推荐
12-18 7121
渐进式Web应用（Progressive Web App，PWA）
Batch Normalization（批归一化）与 Layer Normalization（层归一化）
03-23
<think>好的，我现在要比较Batch Normalization（BN）和Layer Normalization（LN）的区别、适用场景以及在深度学习中的对比。首先，我需要回忆这两种标准化方法的基本概念和原理。 Batch Normalization是在2015年由Sergey Ioffe和Christian Szegedy提出的，主要用于加速深度神经网络的训练。它的核心思想是对每个小批量（mini-batch）的数据进行标准化处理，即对每个神经元的输入进行归一化，使其均值接近0，方差接近1。这样可以减少内部协变量偏移（Internal Covariate Shift），从而加快训练速度，并允许使用更高的学习率。BN通常在卷积神经网络（CNN）中应用广泛，特别是在图像处理任务中，比如ResNet等模型就大量使用了BN层[^1]。不过，BN的一个缺点是当batch size较小时，效果会变差，因为均值和方差的估计不准确。比如，在训练TurboAE时，需要非常大的batch size（超过500）才能有效平均噪声影响。 接下来是Layer Normalization，由Jimmy Lei Ba等人在2016年提出。与BN不同，LN是对同一层内所有神经元的输出进行标准化，即对每个样本的所有特征进行归一化。这种方法不依赖于batch size的大小，因此在batch size较小或动态变化的情况下表现更好。LN在循环神经网络（RNN）和Transformer模型中应用较多，比如在自然语言处理任务中，由于序列长度可变，使用LN可以更好地处理不同长度的输入。例如，DeepDR-Transformer模块在处理眼底图像分类任务时，可能使用了类似LN的结构来保持稳定性[^2]。 两者的主要区别在于归一化的维度不同。BN在batch维度和特征维度上进行归一化，而LN是在特征维度和层维度上进行。因此，BN的效果受batch size影响较大，而LN则不受此限制。此外，BN在训练和推理时的行为不同，需要维护移动平均的均值和方差，而LN在训练和推理时计算方式一致，不需要额外参数。 适用场景方面，BN适合固定深度的模型和较大的batch size，比如图像分类任务中的CNN。LN则适合变长序列或小batch size的情况，如NLP中的Transformer或RNN。此外，在强化学习或生成对抗网络（GAN）中，由于batch size可能不稳定，LN也更适合。 需要进一步验证的是，LN是否真的在Transformer中被广泛使用，以及BN在batch size较小时的具体表现。根据引用[1]，TurboAE需要大batch size才能有效，这说明BN对batch size敏感，而LN可能更适合小batch场景。同时，引用[2]提到的DeepDR-Transformer使用了全局平均池化和全连接层，可能未明确提到LN，但Transformer架构通常使用LN，如原始论文中的设计。 总结下来，BN和LN的主要区别在于归一化的维度和对batch size的依赖，适用场景则根据模型类型和任务需求来选择。</think>### Batch Normalization vs Layer Normalization: 区别与适用场景 #### 1. **核心区别** - **Batch Normalization (BN)** 对每个神经元的输入按 **批次维度** 进行标准化。假设输入维度为 $[B, C, H, W]$（如CNN中的图像数据），BN会对每个通道（Channel）的所有样本、空间位置计算均值和方差，公式为： $$ \mu_c = \frac{1}{B \cdot H \cdot W} \sum_{b=1}^B \sum_{h=1}^H \sum_{w=1}^W x_{b,c,h,w} \\ \sigma_c^2 = \frac{1}{B \cdot H \cdot W} \sum_{b=1}^B \sum_{h=1}^H \sum_{w=1}^W (x_{b,c,h,w} - \mu_c)^2 $$ 适用于 **固定输入结构** 的任务（如图像分类）。 - **Layer Normalization (LN)** 对每个样本的所有神经元输出按 **特征维度** 进行标准化。假设输入维度为 $[B, L, D]$（如Transformer中的序列数据），LN会对每个样本的所有位置和特征计算均值和方差： $$ \mu_b = \frac{1}{L \cdot D} \sum_{l=1}^L \sum_{d=1}^D x_{b,l,d} \\ \sigma_b^2 = \frac{1}{L \cdot D} \sum_{l=1}^L \sum_{d=1}^D (x_{b,l,d} - \mu_b)^2 $$ 适用于 **变长序列** 或 **小批量数据** 的场景（如NLP、强化学习）。 --- #### 2. **适用场景对比** | **特性** | **Batch Normalization** | **Layer Normalization** | |------------------------|--------------------------------------|--------------------------------------| | **数据依赖** | 依赖批次统计，需要较大batch size | 单样本统计，与batch size无关 | | **任务类型** | 图像处理（CNN）、固定输入长度的任务 | NLP（Transformer）、RNN、强化学习 | | **训练稳定性** | 对batch size敏感，小批次效果下降 | 对batch size鲁棒 | | **推理行为** | 使用移动平均统计量 | 直接计算当前样本统计量 | --- #### 3. **性能影响** - **BN的优势与局限** 在图像任务中显著加速收敛，但受限于batch size。例如，在TurboAE训练中，batch size需大于500才能有效平均噪声影响。 - **LN的优势与局限** 更适合动态输入或小batch场景。例如，Transformer通过LN处理变长序列，而DeepDR-Transformer在医学图像分类中可能依赖类似结构[^2]。 --- #### 4. **代码示例对比** ```python # Batch Normalization (PyTorch) import torch.nn as nn bn = nn.BatchNorm2d(num_features=64) # 用于CNN # Layer Normalization (PyTorch) ln = nn.LayerNorm(normalized_shape=512) # 用于Transformer ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值