随着移动设备的普及，用户对于移动网页的体验要求也越来越高，特别是对于离线访问的需求，这正是 PWA（Progressive Web Apps，渐进式网络应用）得以发展的原因。然而，由于浏览器 API 不同，不同浏览器实现 PWA 的方法也有所不同，因此本文将介绍如何在不同浏览器上实现 PWA 的浏览器兼容方法。
PWA 的基本概念
PWA 实际上是一种基于 Web 技术的应用程序，可以像原生应用一样提供离线访问、推送通知、添加到主屏幕等功能。其核心概念是 Web App Manifest 和 Service Worker。
Web App Manifest 是一个 JSON 文件，指定了应用的名称、图标、主题色、起始 URL 等信息，浏览器可以根据它创建启动屏幕和主屏幕图标，用户可以通过添加到主屏幕的方式轻松访问该应用，同时还可以控制 PWA 如何在设备上显示。
Service Worker 是一个独立线程的 JavaScript 文件，可以控制浏览器网络请求和缓存，使得应用可以在离线情况下提供服务。Service Worker 可以拦截网络请求，将请求发送到缓存中，当网络连接可用时再将数据发送给客户端。
浏览器兼容性
不同浏览器对 PWA 的支持程度不同，根据查询 caniuse.com 得出如下表格：
| 浏览器 | Web App Manifest | Service Worker |
|---|---|---|
| Chrome | 支持 | 支持 |
| Firefox | 支持 | 支持 |
| Safari | 支持 | 不可用（12.1 及以上版本可用） |
| Edge | 支持 | 支持 |
| IE | 不支持 | 不支持 |
由此可见，chrome、firefox 和 edge 已经完全支持 PWA 技术，而 safari 只从 12.1 版本开始支持 PWA 技术。
实现方法
Web App Manifest
Web App Manifest 可以添加到网站的根目录中，由浏览器自动加载。以下是 Manifest 文件的示例代码：
-- -------------------- ---- ------- - ------- --- ----------- --- ----- ------------- --- ----- -------- - - ------ ----------- -------- ---------- ------- ----------- -- - ------ --------------- -------- ---------- ------- ----------- - -- ------------ -------------- ---------- ------------- -------------- ---------- ------------------- --------- -展开代码
其中，name 指定了应用的名称，short_name 指定应用的短名称，icons 列表指定了应用的图标，start_url 指定了应用的起始 URL，display 指定应用在主屏幕上的显示方式，theme_color 指定了应用的主题颜色，background_color 指定了应用的背景颜色。
Service Worker
Service Worker 需要注册，可以在 JavaScript 文件中实现。以下是 Service Worker 的示例代码：
-- -------------------- ---- ------- -------------------------------- ----- -- - ---------------- ----------------------- ----------- -- -------------- ---- -------------- ----------- ------------ --- -- --- ------------------------------ ----- -- - ------------------ --------------------------- -------------- -- -------- -- --------------------- -- ---展开代码
上述代码实现了 Service Worker 的两个事件 install 和 fetch，其中 install 事件用于首次注册 Service Worker，将页面文件缓存起来；fetch 事件用于拦截网络请求，如果存在缓存，则直接从缓存中读取，否则从网络上请求数据。
总结
PWA 技术是未来 Web 应用发展的重要方向，可以为用户提供更优秀的离线体验，同时也可以像原生应用一样添加到主屏幕，更方便快捷。由于浏览器兼容性的不同，在实现 PWA 应用时，需要根据不同浏览器的支持程度和兼容性做出相应的处理和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64980fb448841e9894522226
