什么是 PWA?
PWA（Progressive Web App）即渐进式 Web 应用程序，是一种 web 应用程序的新型架构，它采用较新的 Web API 和技术（如 Service Worker，Web App Manifest）为 Web 应用带来了更多 Native 应用的体验。PWA 不需要安装就可以像 Native 应用一样可以离线运行，具有快速响应，不会占用用户手机硬盘空间，可以被添加到桌面的特点。
PWA 的目标是：
- 快速加载：在任何网络条件下都能够快速载入应用
- 可靠性：即使在不稳定的网络环境下也能快速响应
- 离线使用：即使没有网络连接，也能够像原生应用一样运行
- 即时互动：快速响应用户的交互，提供无与伦比的用户体验
- App-Shell 模式：让应用主要的 UI 界面和资源立即可用，而无需等到网络请求的异步加载
PWA 与传统 Web 的区别是什么？
相较于传统的 Web 应用程序，PWA 带来的主要变化有以下几点：
- 使用 Web App Manifest 来提供应用程序的元数据信息，包括图标、主题颜色、启动方式等。
- 采用 Service Worker，以 JavaScript 编写后台逻辑，如拦截网络请求、缓存、消息推送等。Service Worker 不仅可以使应用程序离线使用，还可以提供更好的性能。
- 通过 HTTPS 提供安全性保障，确保传输的数据不会被窃听或篡改。
- 可以被添加到桌面，有了更接近于原生应用的界面和体验。
PWA 开发中的兼容性问题
虽然 PWA 带来了更好的用户体验，但在开发过程中，我们也需要注意一些兼容性问题：
- 不是所有的浏览器都支持 PWA 技术，尤其是在 Safari 中，部分 PWA 功能可能无法使用。
- 如果我们需要在离线状态下使用应用程序，我们需要正确地配置 Service Worker 缓存策略，以确保离线状态下应用程序的正常使用。此外，还需要注意排除一些不必要的请求。
- 在 webview（如在 Android 中）使用 PWA 的时候，网络状态发生变化时无法响应。在这种情况下，应该使用 Nativelayer 来检测网络状态并响应相应的操作。
- 在 iOS 中，缓存 API 只支持 50MB 左右的数据缓存，如果缓存数据太大会导致应用崩溃。
如何解决 PWA 的兼容性问题
- 尝试使用 polyfill 解决部分低版本浏览器的不兼容问题，如 workbox、service-worker-shim 等。
- 在开发过程中，需要适当地检测浏览器的兼容性，并提供备用方案。
- 在缓存策略中需要考虑到不同浏览器的不同限制条件，并在实际应用中进行测试。
- 在 webview 的情况下，需要使用原生的 jsbridge 来进行交互，并配合 webView 的回调来响应网络状态的变化。
示例代码：
-- ---------------- -- ---------- -
------------------------------------------
---------------------------- -
-------------------- ------ ------- --------------------
--
---------------------- -
-------------------- ------ ------- -------
---
--------------------------------- --------------- -
----------------
-------------------------------------- -
------ --------------
--------------
--------------
-------------
------------
---
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- --------- --- ---------- -
------ ---------
- ---- -
------ -------------------------------------------- -
--- ------------- - -----------------
-------------------------------------- -
------------------------ ---------------
---
------ ---------
---
-
--
--
---结论
PWA 技术的应用已经越来越广泛，但是在实际开发中也存在一些兼容性问题，因此开发们需要结合实际情况来灵活运用不同的解决方案，以确保开发的应用程序在不同的设备和浏览器上都能正常运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67048032d91dce0dc84f12e3