为什么 PWA 还没有“干掉”原生应用?

article/2025/9/21 6:08:11

326b07cd8c7c0fcb1d0a8d8723daee82.gif

摘要:PWA 即渐进式网页应用,是 Web 应用的一种,具有安全、渐进式、响应式、无需网络、类应用程序、保持最新、可检测、可重新接入、可安装、可分享这 10 个要素,但 PWA 至今仍没有成为应用的默认格式。

原文链接:https://kevinbasset.medium.com/why-havent-pwas-killed-native-apps-yet-29beca4425fa

声明:本文为 CSDN 翻译,未经授权,禁止转载。

作者 | Kevin Basset

译者 | 弯月

出品 | CSDN(ID:CSDNnews)

从理论上讲,PWA 是原生应用的完美替代:只需管理一个代码库,即时更新无需审核,而且应用内的购买也不会被抽成。何乐而不为?

尽管PWA(Progressive Web App,渐进式Web应用)经历了漫长的发展,但时至今日仍然无法完全取代原生应用。

那么,到了2022年,PWA还缺什么?为什么它们还没有成为应用的默认格式?

23fc6a857e362c84b15e907c67212b8f.jpeg

人们对PWA的看法

很多人认为PWA只不过是二流的应用,还有人甚至认为PWA根本算不上应用。

现如今,我们习惯于通过苹果或Google的应用商店寻找应用。然而实际上,直接通过网站安装应用既快捷又方便。但是,如果没有专门的提示和推广元素,用户仍然不习惯这种方式。

问题的关键在于信任。通过第三方下载应用的前提是,第三方能够证明应用可以安全下载。

然而,PWA并不需要苹果和Google的批准,因为它们本身就是安全的。PWA 无法读取手机上的联系人、代表主人发送SMS消息,或访问任何可能暴露私人信息的功能。

应用商店有着双重的价值主张:分发(在用户设备上安装应用)和宣传(让更多人发现你的应用)。很多人认为,应用商店的宣传工作并不理想。而PWA的安装可以嵌入到浏览器内。

如今看来,整个应用商店范式都是多余的。

iOS 推送通知

在万众翘首以待多年之后,苹果终于宣布iOS将于2023年推出推送通知的功能。这是一个好消息。截止到目前为止,你只能向Android/Windows/macOS 用户发送通知,但不能向 iOS 用户发送通知。

对于许多开发人员来说,这意味着无法依赖推送通知向用户传递重要的信息。尽管Web推送通知是一个很好的额外功能,但它并不是产品工作流程的关键部分。

如果苹果以正确的方式(即遵循W3规范)实现Web推送通知,那么这种情况即将发生变化。你可以轻松地通知 Android 和 iOS 上的用户,而无需通过苹果或Google的应用商店发布你的应用。

话虽如此,Web 开发人员滥用Web推送API的现象很多(例如,新闻网站会在用户第一次访问时请求推送通知的授权),以至于人们越来越讨厌这类提示。结果导致,在某些情况下,Chrome(以及其他浏览器)会自动阻止推送通知请求,这也导致合理使用的开发人员也很难获得该功能的使用授权。

我个人最大的心愿之一便是 PWA 在安装后能被授予比普通网站更高的权限(但没有原生应用多)。人们安装你的PWA证明他们信任你的应用,而不只是在偶然的一次机会下发现了你的网站。

下面是一些需要更高权限的例子:

  • 已安装的 PWA 可以自动被授予访问Push API的权限。

  • 严格限制只有已安装的PWA可以访问Push API。不允许任何常规网站访问Push API。杜绝垃圾邮件。

  • 将多个浏览器API的访问权限打包,显示在安装提示中。例如,在安装后,PWA 可以自动获得Push API、Geolocation API 或 Microphone API等的访问权,用户可以通过一个按钮来切换是允许还是禁止每个API的访问。

  • 当PWA请求访问权限时,Chrome不应该简单地阻止推送通知。

iOS上的原生安装提示

0425e56842de5d14d96213fd6dc1d92f.png

目前,在iOS上安装PWA应用需要打开共享面板,并单击按钮“添加到主屏幕”。虽然安装本身没什么问题,但不如安装原生 iOS 应用那么直观。

如果Safari支持beforeInstallPrompt事件,那么整个体验就可以进一步精简。或者至少,苹果可以将按钮的文本修改成“添加到主屏幕以安装应用”,Android在几年前就做了改动。

尽管当前的安装流程也不错,但还是会产生一些影响用户和开发者体验的问题。

例如,真实的 Safari(包含按钮“添加到主屏幕”)和 SFSafariViewController 视图(没有这个按钮)之间没有任何区别。现在的状况是,许多应用内浏览器都使用了后者,例如推特 iOS 应用。

因此,你别无选择,只能显示自定义的说明,即便有时连自定义说明都无法显示。绝大多数的用户都对背后的技术没兴趣,因此他们会觉得有点困惑。

同样,我希望有一天,PWA开发人员不再需要生成 25 多个单独的初始屏幕图像文件来支持每部 iPhone 和 iPad。

安装完毕后更新清单文件

为了提高PWA应用的竞争力,我们应该允许开发人员能够在安装后更新清单文件(图标、名称、启动屏幕等)。

关于这个话题,Google曾出过一篇文章(https://web.dev/manifest-updates/),一句话总结:你想要修改的属性统统无法修改。因此,一旦安装完毕,你就无法更新用户主屏幕上的显示效果。

至少,直到最近都是如此。

幸运的是,该领域出现了一些有趣的发展。如今,桌面版Chrome 支持在安装后更改应用的名称。它甚至还会显示一个反网络钓鱼提示(虽然有点迷惑),以方便用户选择允许修改清单文件或卸载应用。

3239cfeb7007dd32c51099cd9e28e7b9.png

f0b4d5f85624d1297e022f6ec4defc35.png

范围管理

PWA真正的亮点在于,创建程序化的应用。

我有一位客户做了一款商业化的摄影师软件。摄影师可以利用该软件为自己的客户创建独特的婚礼相册。

每个相册一个单独的应用,有自己的名字(新婚夫妇的名字)和图标(这对夫妇的照片)。这样的相册应用数量高达1万多个,任何其他方式根本无法管理。

然而,该软件也有一些瓶颈和缺陷。

虽然我们希望将每个PWA托管到自己的子域上(例如 pwa1.example.com 和 pwa2.example.com),但这通常是不可能的。在这个例子中,退而求其次的解决方案是将每个PWA托管到自己的目录中(例如 example.com/pwa1/ 和 example.com/pwa2/)。

由于末尾斜杠的问题,范围的管理有时是非常违反直觉的。简而言之,example.com/pwa1/ 是一个有效的范围,而example.com/pwa1(请注意末尾少一个斜杠)则不是。

如果你使用后者,则浏览器会认为范围是example.com/(根域),而且关键在于浏览器不会显示错误消息或警告。

我希望浏览器能更加智能一点,自动处理scope字段中的斜杠,即将 example.com/pwa1 自动更正为 example.com/pwa1/。根据我的经验,如果开发人员实际的意图是采用后者,那么使用前者(没有末尾斜杠)的访问就一定会导致错误。

iOS上的范围也应该改进。打开某个来自Android第三方应用PWA范围内的链接,就会安装该PWA。但是,在 iOS 上,它会打开 Safari。

桌面截图

毫无疑问,更丰富的安装 UI 有助于弥补原生应用与 PWA 之间的差距。为了展示应用,开发人员可以在安装提示中显示一个截图,这样从外观和感觉上就像一个标准的应用商店界面。

我们的应用除了将工具集成到产品本身之外,还提供了一个免费的设计这些屏幕截图的工具。因此,客户可以通过一个界面设计、管理、编辑、本地化和上传屏幕截图。

目前在桌面版中,应用清单的 screenshots 属性没有任何作用,但有一个提议是在桌面版的Chrome上显示这些屏幕截图。你可以通过--enable-features=DesktopPWAsDetailedInstallDialog进行测试。

原生功能

PWA是否应该访问你的联系人?查看你的日历?发送短信/彩信?设置闹钟?我个人的看法是:无论到什么时候都不应该!

PWA的范围很有限,这恰恰证明了它们很安全。绕过浏览器的限制会增添一些危险,结果必然是通过第三方(即应用商店)来审核应用,这是人为创造的需求,根本没有必要。

当然,有些应用确实需要访问这些功能。那么,对于这些人来说,也许原生是唯一的出路。

但是,对于绝大多数不需要访问这些功能的应用程序来说,PWA 不仅可以成为一个很好的选择,而且有可能成为最佳选择。

我们努力的方向是利用 Bubble、Softr 和其他无代码平台构建更多应用。在我看来,这对开发人员、用户和整个网络世界来说,都是一个好消息。

— 推荐阅读 —

2b0a153a8a9a5d4dcdb217369240504d.jpeg


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

相关文章

PWA入门:手把手教你制作一个PWA应用

摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用作者:MudOnTire Fundebug经授权转载,版权归原作者所有。 简介 Web前端的同学是否想过学习app开发,以弥补自己移动端能力的不足?但…

PWA 即将终结应用程序商店!

渐进式Web应用很快就会将用户从Google Play和iOS应用商店中解放出来。 作者 | Owen Williams 译者 | 弯月,责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 苹果和Google将产品统统锁在了他们的应用商店,现在就让我们来摧毁这…

【PWA学习】1. 初识 PWA

什么是PWA PWA(Progressive Web Apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势 我们需要理解的是,PWA 不是某一项技术&am…

搭建BWAPP靶场(详细过程)

靶场介绍 bwapp是一款非常好用的漏洞演示平台,目的是帮助网络安全爱好者、开发人员和学生发现并防止网络漏洞。包含有100多个漏洞,涵盖了所有主要的已知Web漏洞,包括OWASP Top10安全风险,最重要的是已经包含了OpenSSL和ShellShoc…

PWA的探索与应用

本文由云社区发表 PWA(Progressive Web App)起源背景 传统的Web网页存在以下几个问题: 进入一个页面必须要记住它的url或者加入书签,入口不便捷;没网络就没响应,不具备离线能力;不像APP一样能…

PWA 应用列表及常用工具

引言 在做 PWA 的过程中自己写了一些相关的应用和工具,在这里整合下,方便记录及查找使用。 应用列表 PWA 支持检测工具番茄钟二维码生成新闻应用身体数据统计应用支付宝集福应用田英章书法字典应用抖音无水印下载应用很好用的备忘录精神氮泵 PWA 支持检…

【技术】PWA实践 - 应用激活与安装

文章目录 你能用这项技术做什么?适合人群你可以学到什么 应用激活与安装激活与安装Manifest注意 Service WorkerStorage 管理应用 Demo本章参考资料 你能用这项技术做什么? 使用PWA能让你的web网页在支持使用最新版本Chome浏览器的桌面端(wi…

正确使用PWA

作为一个前端程序员,在没有任何Android/IOS的开发情况下,想想我们有多少种方法来开发一个原生移动应用程序!我们可以有非原生、混合开发,PWA等等手段。类似uniapp,Reactive native为我们提供了更简便的手段&#xff01…

PWA应用入个门

文章目录 什么是PWA应用核心技术清单如何添加PWA应用到手机苹果手机:安卓手机: PWA应用VS微信小程序参考资料 什么是PWA应用 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好&…

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

很高兴受到《PWA入门与实践》作者王乐平老师的邀请,为这本书写推荐语。 下面我们就听听作者王老师带你快速玩转 PWA 吧! 文末有给各位粉丝的福利!抽奖送出三本《PWA入门与实践》。 导读:如今,互联网大流量早已进入了移…

关于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的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在…