PWA!什么是 PWA?(渐进式 Web 应用)
由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!
在深入了解 PWA 的实际概念之前,我们需要熟悉其他方法,以及为什么这种模式被引入并广泛使用?
1. 原生 SDK(软件开发工具包)有助于创建应用程序,并在各种设备(例如 Android、iOS 等)上提供相同的体验。2
. 混合应用开发结合了原生 SDK 和 Web API,以创建应用程序,并在目标平台上提供最佳体验。3
. Web 开发有助于创建 Web 应用程序,这些应用程序通常在浏览器中渲染,并可在特定平台上运行,具体取决于其设计目标。
对于开发者来说,要为所有平台编写代码,并在最终用户尝试访问应用程序时提供同样流畅的最佳体验,将会非常繁琐。
如图所示,PWA 通过为所有平台编写一套通用代码库,帮助开发人员减少时间和精力,从而实现最佳的 Web 和原生体验!
遵循这种方法,很容易做到:->利用SEO方法在网络上被发现。-
>易于部署到服务器上!
->易于更新
。->您只需要熟悉常见的网络标准和网络工具即可。
PWA 与原生应用
Web 与原生应用的共同特征:
-
网络:
链接和可发现性。
易于更新到服务器。
易于部署!符合
网络标准和网络工具。 -
原生
支持离线访问和
推送通知。
已安装图标,独立运行,
性能卓越,用户体验出色。
问:什么是 PWA?
答:PWA(渐进式 Web 应用)是一种设计模式,其主要目标是在任何平台上运行(只要设备能够运行浏览器,例如移动设备、桌面设备等),由 Google 开发。它使用常见的 Web 技术(例如 HTML、CSS 和 JavaScript)构建。
问:PWA 的主要组成部分是什么?
答:PWA 的三个主要组成部分:
1) Web 应用(HTML、CSS、JS);
2) Service Worker(关键组件)——PWA 的核心;
3) Web 分发模型,即 Web 应用清单——遵循 W3C 规范,这是一个附加到 Web 应用的 JSON 文件,定义了应用安装的元数据,例如名称、图标和主题颜色。
问:如何判断一个 URL 当前是否为 PWA?
答:目前最简单的方法是使用 Lighthouse,它也可以通过 CLI 和 NPM 使用,并且集成在 Web 开发工具中。
- PWA 安装可行性标准:检查 - 应用元数据是否存在;Service Worker 是否已安装(通过 HTTP 或 TLS 安全连接);检查应用是否支持离线/无网络连接运行;检查应用性能

问:如果开发的应用程序符合标准呢?
答:如果它符合标准:
- 它正式成为一款 PWA 应用,安装后即可使用。系统可能会提示用户此应用已通过相关标准。这有助于提升 SEO 标准和提高应用的曝光度。
- 渐进式体验:可对不同的环境做出反应,例如 2G、3G、高端、低端/功能手机设备,在网络带宽和设备支持的硬件范围内,为所有用户提供尽可能良好的体验。
同一段代码在不同上下文和环境下呈现出不同的质量水平。
使用 API 检测环境并采取相应措施,例如屏幕延迟、网络相关问题!
- 渐进式功能:基本网页内容 添加安装 添加服务工作线程 添加硬件使用情况
本文为第一部分简要概述。
非常感谢您的阅读!
请点击以下链接查看第二部分:
https://dev.to/sudhirdontha/pwa-in-brief-part-2-8c5
(或)
https://sudhirdontha.hashnode.dev/pwa-in-brief-part-2



