Progressive Web Apps（PWA）是一种新的 Web 应用程序类型，利用现代 Web 平台的功能（APIS 和服务工作线程）以实现更快，更稳定和更直接的用户体验。与原生应用程序不同，PWA 应用可以在设备的主屏幕上添加图标，并且在离线环境下也可以继续运行。Splash screen 是 PWA 应用程序的一个重要元素，它会在启动应用程序时显示短暂的 Logo 图像或其他信息，使用户体验更流畅。
在本文中，我们将详细介绍如何为 PWA 应用程序添加一个 splash screen，并提供示例代码和指导意义。
准备工作
在添加 splash screen 之前，我们需要确保我们的 PWA 应用已经满足以下要求：
- HTTPS：我们的应用必须在 HTTPS 协议下才能注册 service worker，因此我们需要为应用程序提供安全的连接。
- 明确的首选项图片：在添加 splash screen 之前，我们需要准备一个具有清晰和明确 Logo 的图片，并将其命名为 "apple-touch-icon.png"。
一旦我们满足了上述要求，我们可以开始为我们的 PWA 应用添加 splash screen。
添加 Splash Screen
1. HTML 文件
我们需要在应用程序的 HTML 文件中添加一个与以下代码类似的代码片段：
<link rel="apple-touch-startup-image" href="/splash-screen.png">
/splash-screen.png 指的是我们刚刚准备好的 Logo 图片。我们可以通过更改 href 属性中的路径来更改图片名称和路径。
2. Web App Manifest
Web App Manifest 是一个 JSON 文件，它为我们的 PWA 应用程序提供了控制显示外观的元数据。
我们需要将以下代码添加到 Web App Manifest 文件中：
-- -------------------- ---- -------
--------------- -
--------- ---------------------
---------------- -------------------------------
--------------- ------------------------------
------------------- --------------------------------------
------------------ -------------------------------------
------------------------ --------------------------------------
------------------------- ---------------------------------------
------------------------ --------------------------------------
------------------------- ---------------------------------------
------------------------- --------------------------------------
-------------------------- ---------------------------------------
-------------------------- --------------------------------------
--------------------------- ---------------------------------------
--------------------------- --------------------------------------
---------------------------- --------------------------------------
-在这里，我们定义了多个页面，以确保我们的应用程序能够在不同的设备类型和方向上有效地运行。我们还需要将资源文件路径替换为我们实际准备的 Logo 图片路径。
3. Service Worker 文件
最后，我们需要在 service worker 文件中添加以下代码：
self.addEventListener('fetch', function (event) {
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
event.respondWith(caches.match(event.request));
}
});该代码片段确保在设备没有互联网连接的情况下，应用程序仍然可以打开 Splash Screen。
总结
通过将 Splash Screen 添加到我们的 PWA 应用程序中，我们可以提供更流畅的用户体验，并为我们的应用程序增加一个视觉层。但请注意，在添加 Splash Screen 之前，请确保你的应用程序已经满足了所有必要的要求，并且你准备了一个清晰的 Logo 图片。
希望本文对您理解如何添加 Splash Screen 有帮助。如果您需要了解更多有关 PWA 的信息，请参见 PWA Progressivewebschool。
以下是完整的示例代码：
-- -------------------- ---- -------
----- ------------------------------- --------------------------
--------------- -
--------- ---------------------
---------------- -------------------------------
--------------- ------------------------------
------------------- --------------------------------------
------------------ -------------------------------------
------------------------ --------------------------------------
------------------------- ---------------------------------------
------------------------ --------------------------------------
------------------------- ---------------------------------------
------------------------- --------------------------------------
-------------------------- ---------------------------------------
-------------------------- --------------------------------------
--------------------------- ---------------------------------------
--------------------------- --------------------------------------
---------------------------- --------------------------------------
-
------------------------------ -------- ------- -
-- -------------------- --- ---------------- -- ------------------ --- -------------- -
-----------------------------------------------
-
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451060e980a9b385b9dc6b4