渐进式 Web 应用程序介绍

Posted 海拥✘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了渐进式 Web 应用程序介绍相关的知识,希望对你有一定的参考价值。

构建 PWA 背后的核心思想是为所有设备上的普通 Web 应用程序提供最佳用户体验。当我们通过浏览器访问 Web 应用程序时,整体体验永远赶不上原生应用程序提供的体验。因此,在可用的开放网络技术的帮助下,PWA 为使用最新版本浏览器的用户提供了增强的网络体验,与 androidios 或 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之间的关系,用图片解析未来世界,让你轻松走进虚实共生的数字时空,解锁人类新文明,设计属于自己的元宇宙。

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

以上是关于渐进式 Web 应用程序介绍的主要内容,如果未能解决你的问题,请参考以下文章

[译]介绍一下渐进式 Web App(离线) - Part 1

使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

渐进式 Web 应用程序介绍

渐进式 Web 应用程序介绍

渐进式 Web 应用程序介绍

渐进式Web应用(PWA)入门教程(下)