【前端】跟进新趋势- PWA WebAssembly

不定期更新及补充实战。建议关注收藏点赞。

PWA（渐进式 Web 应用，Progressive Web App）

PWA 是一种提升 Web 应用体验的技术，使其具备与原生应用相似的功能和性能。PWA 强调的是“渐进式”，即可以根据设备的能力逐步增强其功能。

• 主要特点：
  • 离线支持： 使用 Service Worker，可以使应用在没有网络连接时也能运行。Service Worker 是一种浏览器后台脚本，能够拦截并缓存网络请求，使得 Web 应用在离线状态下仍然能够继续工作。
  • 推送通知： PWA 可以向用户推送通知，即使他们没有打开应用，提升用户参与度。
  • 响应式设计： PWA 具有响应式设计，可以适应不同的屏幕尺寸和设备，提供一致的用户体验。
  • 安装到主屏幕： 用户可以将 PWA 安装到他们的设备上，类似于原生应用。这通常通过 Web App Manifest 文件配置，它提供了有关应用外观、名称、图标等信息。
  • 快速加载： 通过资源缓存、懒加载和其他性能优化手段，PWA 可以提供比传统 Web 应用更快速的加载体验。
• 使用场景：
  需要在没有稳定网络的情况下工作，如离线文档编辑器、离线新闻阅读器等。
  需要提升用户参与度的应用，通过推送通知与用户保持互动。
  需要跨平台应用并提供与原生应用相似体验的 Web 应用。

WebAssembly（WASM）

WebAssembly 是一种新的二进制格式，旨在使 Web 浏览器能够执行高性能的低级语言代码（如 C、C++、Rust 等）。与 JavaScript 相比，WASM 提供了更高的执行速度，并允许开发者将计算密集型任务移至 Web 应用中进行高效处理。

• 主要特点：
  • 高性能： WebAssembly 编译后能够直接执行机器码，相比于 JavaScript 的解释执行，能够获得更高的执行效率，适合计算密集型任务。
  • 语言无关： WebAssembly 支持多种编程语言的编译，如 C、C++、Rust 等，使开发者可以将现有的非 Web 代码迁移到 Web 上运行。
  • 跨平台： 由于 WebAssembly 是标准化的二进制格式，它可以在任何支持 WebAssembly 的平台上运行，包括浏览器、Node.js 环境等。
  • 安全性： WebAssembly 在沙盒环境中运行，不允许直接访问本地文件系统或其他潜在危险的操作，保证了运行时的安全性。
  • 与 JavaScript 的互操作性： WebAssembly 可以与 JavaScript 配合使用，开发者可以利用 JavaScript 调用 WebAssembly 提供的功能，也可以将 WebAssembly 用作 JavaScript 的加速器。
• 使用场景：
  游戏开发： 高性能的游戏引擎可以通过 WebAssembly 运行在浏览器中，为用户提供接近原生应用的游戏体验。
  图像处理和视频编解码： 图像处理、音视频编解码等任务需要较高的计算能力，WebAssembly 可以显著提升这些计算密集型任务的执行速度。
  科学计算和大数据处理： WebAssembly 可以用来运行大量数据分析、机器学习等复杂的算法。
  跨平台应用： 使用非 Web 技术（如 C、C++）开发的应用可以通过 WebAssembly 迁移到浏览器中运行，减少重新开发的成本。