前言
PWA（Progressive Web App）是一种新兴的 Web 应用程序模型，它可以使 Web 应用程序能够像本地应用程序一样运行。PWA 具有离线访问、可安装、推送通知等特性，是未来 Web 开发的趋势。然而，PWA 在 Android 低版本浏览器上的兼容性问题却一直困扰着开发者，本文将从实际项目中的踩坑经验出发，分享一些适配 Android 低版本浏览器的技巧和经验。
遇到的问题
我所在的团队最近开发了一款基于 PWA 的 Web 应用程序，使用了 Service Worker、Web App Manifest 等 PWA 技术。在测试阶段，我们发现在 Android 4.4 和 5.0 的低版本浏览器上，应用程序无法正常运行，出现了以下问题：
- Service Worker 无法注册。
- Web App Manifest 无法生效。
- 离线访问功能无法使用。
- Add to Home Screen 功能无法使用。
这些问题让我们陷入了困境，因为我们无法忍受应用程序在某些设备上无法正常运行的情况。经过一段时间的探索和实践，我们终于找到了一些解决方案。
解决方案
1. Service Worker 无法注册
在 Android 低版本浏览器上，Service Worker 的注册会出现问题，导致无法缓存资源和实现离线访问。我们需要通过一些 hack 的方式来解决这个问题。
首先，我们需要检测浏览器是否支持 Service Worker，如果不支持，则不进行注册。代码如下：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
console.log('ServiceWorker registration failed: ', err);
});
}其次，我们需要在 Service Worker 的 install 事件中手动添加资源缓存。代码如下：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
-----------------
-------------
---------------
---
--
--
---最后，我们需要在 Service Worker 的 fetch 事件中手动读取缓存资源。代码如下：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---这样，我们就可以在 Android 低版本浏览器上正常使用 Service Worker 了。
2. Web App Manifest 无法生效
Web App Manifest 可以让我们定义应用程序的图标、名称、主题色等信息，让应用程序更像本地应用程序。但是，在 Android 低版本浏览器上，Web App Manifest 无法生效，导致应用程序图标和名称无法显示。我们需要通过一些 hack 的方式来解决这个问题。
首先，我们需要在 HTML 页面的 head 中手动添加 manifest 链接。代码如下：
<link rel="manifest" href="/manifest.json">
其次，我们需要在 Service Worker 的 install 事件中手动添加 manifest 缓存。代码如下：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
-----------------
-------------
----------------
----------------
---
--
--
---最后，我们需要在 Service Worker 的 fetch 事件中手动读取 manifest 缓存。代码如下：
-- -------------------- ---- -------
------------------------------ --------------- -
-- ---------------------------------------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
-
---这样，我们就可以在 Android 低版本浏览器上正常使用 Web App Manifest 了。
3. 离线访问功能无法使用
离线访问是 PWA 的核心功能之一，可以让用户在没有网络的情况下继续访问应用程序。但是，在 Android 低版本浏览器上，离线访问功能无法使用，导致用户无法访问应用程序。我们需要通过一些 hack 的方式来解决这个问题。
首先，我们需要在 Service Worker 的 fetch 事件中手动读取缓存资源。代码如下：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---其次，我们需要在 Service Worker 的 activate 事件中删除旧版本缓存。代码如下：
-- -------------------- ---- -------
--------------------------------- --------------- -
----------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ ------------------------------ -- --------- --- -----------
-------------------------- -
------ -------------------------
--
--
--
--
---最后，我们需要在 HTML 页面中添加 meta 标签，告诉浏览器什么时候可以使用离线访问。代码如下：
<meta name="theme-color" content="#ffffff"> <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"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
这样，我们就可以在 Android 低版本浏览器上正常使用离线访问功能了。
4. Add to Home Screen 功能无法使用
Add to Home Screen 功能可以让用户将应用程序添加到主屏幕上，像本地应用程序一样访问。但是，在 Android 低版本浏览器上，Add to Home Screen 功能无法使用，导致用户无法添加应用程序到主屏幕上。我们需要通过一些 hack 的方式来解决这个问题。
首先，我们需要在 Service Worker 的 install 事件中手动添加 manifest 缓存。代码如下：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
-----------------
-------------
----------------
----------------
---
--
--
---其次，我们需要在 HTML 页面中添加 meta 标签，告诉浏览器应用程序的名称、图标等信息。代码如下：
<meta name="apple-mobile-web-app-title" content="My App"> <link rel="apple-touch-icon" href="/img/icons/icon-192x192.png">
最后，我们需要在 Service Worker 的 fetch 事件中手动读取 manifest 缓存，并在 install 事件中添加 Add to Home Screen 事件。代码如下：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
-----------------
-------------
----------------
----------------
---
------------------ -
-------------------
-- --------------------------------------- -
------------------------------ --------------- -
-- ---------------------------------------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
-
---
---------------------------------------------- --------------- -
-----------------------
--------------------- - ------
------ ------
---
-
--
--
---
--------------------------------- --------------- -
----------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ ------------------------------ -- --------- --- -----------
-------------------------- -
------ -------------------------
--
--
------------------ -
---------------------
--
--
---这样，我们就可以在 Android 低版本浏览器上正常使用 Add to Home Screen 功能了。
总结
在适配 Android 低版本浏览器时，我们需要通过一些 hack 的方式来解决 PWA 的兼容性问题。具体来说，我们需要手动添加缓存资源、手动读取缓存资源、手动注册 Add to Home Screen 事件等。当然，这些 hack 的方式并不是万能的，仍然会有一些无法解决的问题。但是，通过这些 hack 的方式，我们可以提高 PWA 在 Android 低版本浏览器上的兼容性，让更多的用户能够享受到 PWA 带来的便利和体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660f6884d10417a222fe1d2a