随着移动互联网的快速发展，越来越多的用户使用移动设备访问互联网。传统的网站虽然在 PC 端呈现效果还不错，但在手机终端上打开则会出现各种问题，比如加载慢、内容不清晰、无法离线访问等。解决这些问题的方案之一是 PWA（Progressive Web Apps，渐进式 Web 应用），它结合了 Web 应用和 Native 应用的优点，能够提供更加优秀的用户体验。
然而，开发 PWA 应用也存在很多坑点。本文将总结 PWA 在开发过程中的一些常见问题，并提供解决方案，帮助开发者提高开发效率，减少开发中的困难。
1. Service Worker 的缓存问题
Service Worker 是 PWA 的核心之一，它能够在浏览器背景中运行，拦截网络请求并缓存资源。但是 Service Worker 的缓存机制也存在一些问题。
1.1 缓存策略不当
Service Worker 的缓存策略会影响应用的访问速度。如果缓存过于频繁，可能会导致缓存数据过期，反而增加网络请求的次数。如果缓存过于保守，又会影响应用的访问速度。
解决方案：我们可以使用 sw-precache 和 sw-toolbox 等工具帮助我们管理 Service Worker 的缓存策略。
-- -------------------- ---- -------
-- -----------
-----------------------------------------------------------------------------------------
----- ----------- - -
------------------------- -
------------ ------------
--
---------------- -
---- -- --------
----------------------------------------------------- -- --------
--
----------------- ---- -- --------------
--
-- ----
------------------------------
-- ----------
-------------------
---------------
--------------------
------ -
----- ----------------
----------- ----
--
------- --------------------
----------------- ----------------------------------
---------------------- --
--
--1.2 缓存过期和更新
在实际开发中，一些页面和资源是会改动的，这就需要我们及时更新缓存。
解决方案：我们可以设置缓存过期时间，在过期时间达到后，再通过网络请求获取最新数据。或者在页面更新时通知 Service Worker 更新缓存。
-- -------------------- ---- -------
-- --------
-- -----------
------------------
-- ---
---------------- -
----------- ----
-------------- -- - -- - --- -- ------
------------------ ---- -- ------------
--
---
-- ----------
-------------------
------------
--------------------
-- ---
-------------- -- - -- - --- -- ------
-- ---
--
--
-- ------
-------------------------------- -------- ------- -
----------------
----------------------
-------------- ------- -
------ -------------------------------
--
-------- -- -
--------------------- ------- ------- ------
--
--
---
-- ------- ----- ------------
-- ---------- ------- ---- -- --- -----
------------------------------ -------- ------- -
------------------
--------------------
-------------- ---------- -
------
----------------
-------------- ------- -
------------------------ ----------
---
------ -----------------
--
--------- -- -
------ ----------------------------
----
---2. PWA 应用的性能问题
PWA 应用的在线状态可能不稳定，而且它要求页面渲染速度快、响应速度快，这就对 PWA 应用的性能提出了更高的要求。本节将针对 PWA 应用的性能问题给出解决方案。
2.1 页面级别的性能问题
2.1.1 非关键资产过多
非关键资产的过多也是 PWA 应用的性能问题之一。例如，某些应用使用了多个第三方 JavaScript 库和 CSS 库，这些库在页面加载的过程中会拉取大量 JavaScript 和 CSS 资源，导致页面加载缓慢。
解决方案：通过以下方法来减少非关键资产的数量，提升页面渲染速度。
- 压缩 JavaScript，CSS 和 HTML 文件，尽量减少文件大小。
- 分类文件类型，并合并文件，减少网络请求次数。
- 异步加载资源，不影响主渲染树的加载速度。
2.1.2 用户体验低下
PWA 应用需要提供良好的用户体验，但是部分 PWA 应用的用户体验不佳，例如页面加载缓慢、页面响应时间长、图像和视频不清晰等等。
解决方案：以下是提升用户体验的方法。
- 在页面加载之前显示 loading。
- 尽量减少不必要的动画效果。
- 图像和视频提供不同大小的资源，适应不同设备的显示屏幕，减少资源浪费。
- 动态加载模块，提升模块加载效率。
2.2 Service Worker 级别的性能问题
2.2.1 服务 Worker 运行时间过长
Service Worker 会维护一个缓存列表，在每次请求时启用缓存，并实时更新缓存，这就需要很高的性能来保证 Service Worker 正常运行。
解决方案：为了提高 Service Worker 的性能，我们可以对缓存列表进行分类，减少缓存列表的开销，同时，也可以在需要的时候清空缓存列表。
-- -------------------- ---- -------
--- ---------- - -------------------
--- ----------- - -
----
-------------------
---------------------
--
-- ----
-------------------------------- -------- ------- -
-- --
----------------
------------------------------------- ------- -
--------------------
------ --------------------------
--
--
---
-- ----
------------------------------ -------- ------- -
------------------
---------------------------
-------------- ---------- -
------------------- -------------------
-- ------
-- ---------- -
------ ---------
-
-- ----- --
------ --------------------
-------------- --------------- -
-- -------------------------------------- --- --- -
--- ------------------ - ----------------------
------------------------------------- ------- -
------------------------ --------------------
---
-
-- ------------------------------
------ --------------
---
--
--
---
-- ----
--------------------------------- -------- ------- -
--- -------------- - ---------------------
----------------
--------------------------- ------------ -
------ ------------
----------------------- ----------- -
-- ---------------------------------- --- --- -
-- ----
------ -------------------------
-
--
--
--
--
---2.2.2 同时处理过多请求
在用户频繁地访问应用时，可能会导致 Service Worker 同时处理过多请求，使得 Service Worker 被占满，反而影响应用的性能。
解决方案：为了避免这种情况发生，我们可以限制 Service Worker 处理请求的并发数量。
-- -------------------- ---- -------
-- -------- -
--- ----------------------- - --
--- -------------------- - --
------------------------------ -------- ------- -
-- --- --- ---------
-- --------------------- --- ----- -- ---------------------------------------------------- -
-------
-
-- --------------------------
-- --------------------- - ------------------------ -
------------------
-
---
--- ------- --
-------- ----------------- -
-- ------
-----------------------
----------------
-- -- ----- --
--------------------
-------------- -- -
-- ----
---------------------------------- -- ------------------------ -----------
-- ----
------ -----------------
--
--------- -- ---------------------------
-------------- -- -
-- -------
-- ---------- -
------ -----------------
-
-- -----------------
------ --- -------------------------
------ --------- --- --------- ---------
--- -
-------- -
--------------- -------------------
---------------- -----------
--
---
--
-
----------- -- -
-- ----------------
-----------------------
-- ------------
-- ---------------- - -- -
----- ----------- - -----------------
------------------------
-
--
--
-3. 安全隐患
PWA 应用作为一种新生的应用形态，在安全方面也存在一些问题。
3.1 Service Worker 的安全问题
Service Worker 是 PWA 应用的一大特色，但也面临着安全威胁。
解决方案：这里提供一些提高 Service Worker 安全性的方法。
- Service Worker 只能被页签同源的页面加载。可以筛选原始请求的源和 referrer header 来确保只在特定的来源上运行 Service Worker。
- 加密 HTTPs，服务端强制开启 HTTPs，避免对于数据的窃密。
- 对于发送来的数据进行内容检查，避免恶意代码的植入。
3.2 页面安全问题
PWA 应用的页面安全问题也比较突出，需要开发者注意。以下是提高 PWA 应用页面安全性的方法。
- 不开启全局作用域。
- 不要在全局作用域暴露属性和方法。
- 使用类，避免代码被外部访问。
- 谨慎使用 eval() 方法，外部不安全函数。
总结
PWA 应用是一种新的应用形态，相比传统 Web 应用和 Native 应用具有更大的优势，但也存在着许多的问题和挑战。为了开发出更好的 PWA 应用，本文总结了 PWA 应用开发中的一些常见问题，并提供了针对这些问题的解决方案。最后，我们希望这些解决方案能够帮助大家更好地开发 PWA 应用，提高开发效率，减少开发中的困难。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652268d995b1f8cacd9da66e