渐进式 Web 应用程序介绍

• 💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
• 🤟 前端学习课程👉【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之间的关系用图片解析未来世界让你轻松走进虚实共生的数字时空解锁人类新文明设计属于自己的元宇宙。

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