渐进式 Web 应用程序介绍

Posted 2023-02-14 海拥✘

• 💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
• 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
• 💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

构建 PWA 背后的核心思想是为所有设备上的普通 Web 应用程序提供最佳用户体验。当我们通过浏览器访问 Web 应用程序时，整体体验永远赶不上原生应用程序提供的体验。因此，在可用的开放网络技术的帮助下，PWA 为使用最新版本浏览器的用户提供了增强的网络体验，与 android、ios 或 Windows 等依赖于操作系统的应用程序相当。

是什么让它如此酷

• 可以从任何具有现代浏览器的设备访问它。
• 可以像普通网站一样访问、共享和添加书签。
• 它离线工作。
• 它可以像任何其他具有主屏幕快捷方式的本机应用程序一样安装。
• 它可以处理推送通知。
• 它可以访问设备的硬件功能，如相机、蓝牙等。
• 在开发本机应用程序时，我们需要为每个平台维护一个代码库，但开发 PWA 只需要一个代码库。因此，它降低了可维护性。
• 本机应用程序会不断提醒用户新的更新。PWA 通过简单的页面刷新自动在后台更新内容。
• 通过应用适当的 SEO 技术，PWA 可以被搜索引擎索引，因此可以扩大应用程序的可见性。
• 与原生应用相比，开发 PWA 所需的时间要少得多。因此，它大大降低了开发成本。

关联

Pinterest 的网站很旧，网络性能很差。通过分析，他们意识到提升用户群的难度，尤其是在未经身份验证的网络用户数量庞大的情况下。因此，3 个月后，他们使用 React 重建了现有的 Web 应用程序，并将其转换为 PWA，从而使他们的业务实现了巨大增长。他们还成功地减少了 Web 应用程序的捆绑包大小，这也导致 CPU 性能发生了巨大变化。

结果，用户在平台上花费的时间增加了 40%，广告产生的收入增长了 44%。

PWA 的构建块

1.响应式：由于 PWA 提供跨设备兼容性，因此它必须在所有设备上响应。
2.Service worker：这是一个脚本文件，可以在不影响页面性能的情况下在后台异步运行任务。
3.HTTPS：由于 PWA 需要服务工作者，因此它必须从 HTTPS 端点托管。
4.Manifest：这是一个 json 文件，我们可以在其中包含与我们的应用程序关联的所有元数据。

让我们再深入一点……

Service worker

Service Worker 负责确保 PWA 可靠且独立于网络状态。

它可以从客户端访问缓存，并可以存储数据，例如不需要反复获取的静态资产，如样式表、html、图像等。这使 PWA 能够在离线模式下仅加载必要的数据. 因此，它可以减少页面加载延迟，也可以提高整体性能。

我们还可以让 service worker 监听网络变化期间发生的事件，并可以动态地服务、修改或拦截应用程序内的网络请求。

简而言之，PWA 的两个主要功能（例如一次性安装和缓存）是使用 Service Worker 脚本完成的。它还可以用于在用户不使用网站时处理推送通知。

HTTPS

由于以下原因，PWA 必须使用 HTTPS 协议提供服务：

1.Service Worker 需要 HTTPS 连接。
2.保护用户的隐私
3.保证内容的真实性

Manifest file

这是一个 json 文件，其中包含有关 PWA 的所有必要元数据。此文件还使 PWA 可跨设备安装。此元数据包括我们应用程序的标题、主题颜色、显示方式、添加徽标等。创建 manifest.json 文件后，我们可以将其链接到 html 文件的 head 标记中。

总结

总而言之，PWA 缩短了 Web 应用程序和原生应用程序之间的差距。毫无疑问，我们可以说 PWA 是 Web 应用程序的未来。现在世界各地的许多公司都在将他们的 Web 应用程序转换为 PWA，这确保了它将成为软件行业的开路者。

⭐️ 好书推荐

《元宇宙》

【内容简介】

本书以简单易懂的文字，搭配轻松诙谐的原创漫画，让更多人理解什么是元宇宙的 “宏架构”，了解从原子到比特的逻辑，明白智能合约、数学及NFT之间的关系，用图片解析未来世界，让你轻松走进虚实共生的数字时空，解锁人类新文明，设计属于自己的元宇宙。

📚 京东自营购买链接：《元宇宙》