什么是 PWA？
PWA (Progressive Web App) 是一种使用 modern web capabilities（现代 web 技术）来提升 web 应用程序体验的方法。它允许开发者为 web 应用程序提供类似于原生应用的功能和体验，包括：离线模式、推送通知、主屏幕图标、快速加载等。
PWA 的优点
- 用户体验好。PWA 提供原生应用所拥有的特性，包括离线模式、推送通知等，从而提高用户体验。
- 轻量级。PWA 相比于 native app，在下载、安装和使用方面都更加轻便，因为 PWA 只是一个网页，无需在应用商店中进行下载或更新。
- 更新简单。PWA 是基于 web 技术，因此更新会更方便，无需像 native app 那样需要上架审核和发布。
PWA 的坑
- 浏览器兼容性问题。
PWA 支持的浏览器并不是所有的浏览器，例如：IE、Edge、Safari 等浏览器还不支持 PWA，这就导致了兼容性问题。
- 服务端配置问题。
要实现 PWA 需要后台支持。PWA 包含了 manifest.json 文件以便在用户设备上安装应用程序。此文件描述了应用程序的名称、图标，以及其他相关信息。如果服务器没有正确配置，就无法获得这些信息，用户就无法安装应用程序。
- 安装问题。
有时候在安卓手机上点击 「添加到主屏幕」，会发现 PWA 应用并没有像 native app 那样快捷地出现在手机桌面上。
解决方案
- 浏览器兼容性问题。
针对浏览器兼容性问题，可以通过 polyfill 的方式解决。具体来说，就是通过引入 polyfills 来模拟出 PWA new API 的运行环境，从而实现在不支持 PWA 的浏览器上使用 PWA 特性。
-- -------------------- ---- -------
------ ----------------------- -- ---------
------ --------------------- -- -----------
-- ---------------- -- ---------- -
-- -------- ------- ------
------------------------------------------
-------- -- -------------------- ------ ---------- ----------------
------------ -- -------------------- ------ ------------ --------- --------
-- ---- ------------
----------------------------------------------------------- -- -
--------------------------------------------------- -- -
-- ------ -
------------------------------------
---------------- -----
--------------------- --------------------------------
---
-
--
---
-- 服务端配置问题。
要解决服务端配置问题，需要在服务器上配置 service worker。需要注意的是，不是所有的服务器都支持 service worker 的部署，服务器必须支持 HTTPS 协议才能使用 service worker。
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
--------------------------------------------- -
------ --------------
---------------
-----------
-----------
---
---------- -- -
------ -------------------
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---- 安装问题。
要解决安卓手机安装问题，可以在 HTML 文档的 head 中添加如下代码:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- iOS版本Safari浏览器中控制状态栏的显示模式 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- iOS版本Safari浏览器中控制状态栏的外观 --> <meta name="theme-color" content="#4a90e2"> <!-- Chrome 浏览器中控制顶部状态条的背景色 --> <meta name="apple-mobile-web-app-title" content="这是一个测试应用"> <!-- 添加到主屏幕后的应用名称 --> <link rel="manifest" href="./manifest.json" /> <!-- 应用所需文件，包含应用名称，版本号等 --> <link rel="apple-touch-icon" href="./icon.png"/> <!-- Safari浏览器中添加到主屏幕后显示的图标 -->
总结
本文分享了使用 PWA 的坑以及相应的解决方案。虽然 PWA 可以提供类似于原生应用的功能和体验，但是它也存在浏览器兼容性问题、服务端配置问题、安装问题等。不过只要注意这些问题，遵循相应的解决方案，我们就可以充分利用 PWA 提供的优势，为 web 应用程序带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c12ab283d39b4881586f45