什么是 PWA
PWA 是 Progressive Web App 的缩写，它是 Web App 的一种新的形态，能够给用户带来更好的使用体验。和原生应用不同，PWA 应用不需要在应用商店下载，而是可以通过浏览器直接安装到用户的移动设备上，具有像原生应用一样的离线、推送等能力。
闪屏问题的原因
在打开 PWA 应用时，经常会出现一个短暂的白屏或者黑屏，这种现象称之为闪屏问题。闪屏问题通常是由于加载的 JavaScript 和 CSS 文件较多，而浏览器需要花费一定的时间来加载这些文件，导致界面无法立即渲染。
解决闪屏问题的方法
1. Service Worker 预缓存
一个优秀的 PWA 应用应该提供离线能力，为了实现这一点，通常要使用 Service Worker 技术。而 Service Worker 还可以预缓存一些核心文件，当用户打开应用时，这些文件已经被提前加载到了浏览器缓存中，可以大大减少闪屏时间。
以下是一个示例代码，使用 Workbox 进行 Service Worker 预缓存：
-- -------------------- ---- -------
-----------------------------------------------------------------------------------------
-- --------- -
----- ---------- - --- --------------------------------
---------------------------------------------------------------- ------------
------------------------------
--------- -- ------------------ --- -------------
--- ----------------------------------
--
-2. App Shell
App Shell 是一种前端架构模式，可以在首次加载应用时立即渲染应用的框架，再通过异步加载数据来填充内容，从而避免闪屏问题。如下图所示，App Shell 可以分为两部分：
2.1 Shell 部分
Shell 部分是指应用的框架，包括头部、底部、侧边栏等基本布局。Shell 部分的HTML和CSS可以在首屏加载时就渲染出来，从而给用户呈现出完整的应用骨架。
以下是 App Shell 的一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
---------- -----------
----- ---------- ------------------------------------
----- -------------- ----------------------
----- ---------------- ---------------------
-------
------
--------
---------------
--------------
---------
------
----------- -- --- --------
-----------------
-------
--------------------
-------
-------2.2 Content 部分
Content 部分是指应用的内容，包括动态生成的数据。Content 部分可以延迟加载，以避免白屏或黑屏。
以下是 App Shell 的一个示例代码：
fetch('/api/content').then(response => {
return response.json();
}).then(data => {
let content = document.createElement('div');
content.innerHTML = data;
document.querySelector('main').appendChild(content);
});3. 骨架屏
骨架屏是一种优化页面加载体验的技术，可以在真正的内容加载出来之前展示一个基于样式的占位符，从而使用户感觉到页面正在加载，减少白屏或黑屏的影响。
以下是骨架屏的一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
---------- -----------
----- ---------------- ---------------
-------
------
--------
---------------
--------------
---------
------
----------- -- --- --------
---- -----------------------
-------
--------------------
------- ----------------------
-------
-------.skeleton {
background-color: #f4f4f4;
border-radius: 4px;
height: 200px;
margin: 20px 0;
}总结
闪屏问题是 PWA 应用常见的问题之一，但通过使用 Service Worker 预缓存、App Shell、骨架屏等技术，可以有效地解决这个问题，从而给用户带来更好的使用体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b34547d4982a6eb521d3a