在现代 web 开发中，PWA (Progressive Web Apps) 已经成为一个备受关注的技术。PWA 可以提供一个类似于原生 app 的用户体验，不需要安装即可使用，并且可以在各种平台上运行。然而，有时候会遇到一个问题，那就是用户会看到一个空白屏幕，而不是等待应用程序加载。本文将介绍这个问题的原因，并提供解决方案。
什么是 PWA “空白屏幕” 问题
当你首次访问一个 PWA 应用，可能会遇到一个延迟。如果这个延迟非常长，用户可能会忽略这个应用，因为他们误以为这个应用已经崩溃了。当发生这种情况时，用户会看到一个空白的屏幕，而不是等待应用程序加载。
探索 "空白屏幕" 问题的原因
在探究 "空白屏幕" 问题的原因之前，让我们先快速浏览一下 PWA 的一些基础知识。PWA 通常是由一个称为 Service Workers 的特殊类型的 JavaScript 程序支持的。Service Workers 可以使 Web 应用程序脱机运行，并且可以存储网络请求的缓存。当用户首次访问 PWA 应用程序时，Service Workers 需要被下载、安装和激活。当 Service Worker 安装和激活期间，应用程序处于“空白”状态，并且延迟时间取决于网络速度和 Service Worker 的大小。
因此，从本质上讲，空白屏幕问题可能是由于较慢的安装和激活 Service Worker 引起的。这个问题通常会在 PWA 配置不当的情况下变得更复杂。然而，更重要的是认识到，如果服务工作程序被正确优化，这个问题是可以避免的。
如何解决 "空白屏幕" 问题
下面是一些解决 PWA 中“空白屏幕”问题的解决方案：
1. 最小化 Service Worker 体积
Service Worker 对于 PWA 的良好体验至关重要，但是如果 Service Worker 体积过大，将导致安装和激活时间变慢。因此，在编写 Service Worker 代码时，请尽可能避免使用不必要的依赖项，以确保最小化 Service Worker 文件的大小。
2. 在 Service Worker 安装期间显示加载状态
在 Service Worker 安装过程中，可以添加一个加载状态指示器，告诉用户当前正在下载内容，以便他们知道应用程序仍然在进行。这样会让用户知道应用程序仍在处理，从而减少了因空白屏幕而造成的厌烦心理。
3. 启用 App Shell
App Shell 是指应用程序的主要界面组件，提供应用程序的基础样式和功能，而其他内容（如图片和数据）根据需要动态加载。在 PWA 中，将 App Shell 预先缓存到 Service Worker 中可以提高应用程序的响应能力和降低加载时间。在首次加载应用程序时，用户将只看到 App Shell，而不是空白的屏幕。
4. 优化资源加载
许多 PWA 应用程序需要加载大量的资源，例如 JavaScript、CSS 文件和字体库。可以使用一些技术优化资源加载，例如代码分割（code splitting）、资源压缩和 HTTP/2。这些技术可以帮助优化网络请求、减少带宽使用，并减少加载时间，从而减少空白屏幕。
示例代码
App Shell 缓存示例：
-- -------------------- ---- -------
----- ---------- - ---------------
----- ------ - -
--------------
-----------------
-------------
-- --- ----- -------- ------ ---
--
-- - ------- ------ ------ --- -----
-------------------------------- --- -- -
------------
-----------------------
------------- -- ---------------------
--
---
-- -------------- --- -----
------------------------------ --- -- -
--------------
-----------------------
---------------- -- -------- -- -----------------
--
---在 Service Worker 安装和激活期间显示加载状态示例：
-- -------------------- ---- ------- -------------------------------- --------------- - -- ------ ------------------- --- --------------------------------- --------------- - -- ------ --------------------- ---
总结
PWA 为 Web 应用程序带来了更好的性能、更快的加载时间和更高的专业程度。但是，“空白屏幕”问题也可能会影响用户体验。在本文中，我们探讨了这个问题的原因，并提供了解决方案，包括最小化 Service Worker 体积、在 Service Worker 安装期间显示加载状态、启用 App Shell 和优化资源加载。如果你按照这些技术来避免空白屏幕，并优化应用程序的性能和用户体验，你的 PWA 将无疑成为一个成功的高标准 web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d3439bb5eee0b525ad0336