什么是 PWA？
PWA 全称为 Progressive Web App，是一种基于 Web 技术的应用程序。它可以像原生应用一样运行在用户的设备上，通过 Service Worker 技术可以离线访问，具有快速、安全、可靠等特点。
PWA 应用可以像普通网页一样被搜索引擎抓取，也可以添加到设备的主屏幕上，通过推送通知提醒用户。
PWA 应用在微信中的问题
在微信中打开 PWA 应用时，通常会出现“网页无法打开”或“无法访问该网站”的提示，导致无法正常访问 PWA 应用。
这是因为微信对于网页的访问有一些限制，其中包括：
- 禁止网页通过 JavaScript 跳转到其他网页
- 禁止网页通过 iframe 嵌入其他网页
- 禁止网页通过 XMLHttpRequest 访问非同源的接口
这些限制导致 PWA 应用在微信中无法正常访问，需要进行一些特殊处理。
解决方案
1. 使用中间页跳转
将 PWA 应用放在一个中间页中，通过中间页跳转到 PWA 应用，可以避免微信的限制。
示例代码：
-- -------------------- ---- -------
---- --- ---
--------- -----
------
------
----- ----------------
------------------
--------
----------------------------------------------------
---------
-------
------
--------------
-------
--------- -------------------- ---- -------
-- ------- ------
------------------------------ --------------- -
------------------
------------------------------------- -
------ --- -------------------------- -
-------- ---------------- ------------
---
--
--
---在 Service Worker 中，通过判断请求是否成功来判断是否在微信中打开。如果请求失败，则返回一个包含提示信息的响应。
2. 使用同源代理
将 PWA 应用和代理服务器放在同一个域名下，通过代理服务器来访问 PWA 应用的接口，可以避免微信的限制。
示例代码：
-- -------------------- ---- -------
-- ------- ------
------------------------------ --------------- -
--- --- - --- -----------------------
-- ----------- --- -------------------------------- -
-- -----------
------------ - ------ - -------------
------------------
---------------
--
- ---- -
-- ---- --- --
------------------
--------------------
--
-
---在 Service Worker 中，通过判断请求的 origin 是否为代理服务器的 origin 来决定是否通过代理服务器访问接口。
3. 使用微信 JS-SDK
如果 PWA 应用需要使用微信的接口，可以使用微信提供的 JS-SDK 来调用接口，避免微信的限制。
示例代码：
-- -------------------- ---- -------
-- ------- ------
------------------------------ --------------- -
--- --- - --- -----------------------
-- ------------- --- ------------- -
-- ---- ------
------------------
--- ----------
------- --------------------------------------------------------------
--------
-----------
------ ------
------ --------------
---------- ----------------
--------- ------------------------------------------
---------- -----------------
---------- -----------------
---
---------
-- -
-------- ---------------- ------------
--
--
- ---- -
-- ---- --- --
------------------
--------------------
--
-
---在 Service Worker 中，通过判断请求的 pathname 是否为配置微信 JS-SDK 的接口，来配置微信 JS-SDK。
总结
PWA 应用在微信中无法打开是一个常见的问题，需要进行一些特殊处理。本文介绍了三种解决方案，分别是使用中间页跳转、使用同源代理和使用微信 JS-SDK。通过这些技巧，可以让 PWA 应用在微信中正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660e714bd10417a222ef7443