作为现代 Web 应用程序的重要组成部分之一，PWA（Progressive Web Apps）已经成为前端开发中的热门话题。而一个完整而漂亮的 PWA 动画也是吸引用户的重要因素之一。在本文中，我们将介绍如何制作一个漂亮的 PWA 加载动画，为您准备了深度学习指南和示例代码。
什么是 PWA?
在开始制作 PWA 加载动画之前，我们需要先了解什么是 PWA。PWA 是一种类似于原生应用的 Web 应用程序。PWA 可以在任何地方进行浏览，也可以脱离网络进行使用，具有极高的性能、可靠性和用户体验。
PWA 具有以下几个要素：
- 可安装 - 用户可以通过添加到主屏幕或安装包来安装 PWA，就像安装原生应用一样。
- 脱机功能 - 即使在弱网或无网络情况下，PWA 也可以正常运行并提供基本的功能，如使用缓存等。
- 现代 Web 技术 - PWA 借助最新的 Web 技术，如 Service Worker 和 Manifest 等来提供应用程序样式的交互功能。
- 安全性 - PWA 必须使用 HTTPS 来确保数据的安全传输。
- 响应式设计 - 在不同设备上都有良好的适应性。
制作 PWA 加载动画
接下来，我们将介绍如何制作漂亮的 PWA 加载动画。在我们开始之前，请确保您已经了解了下面的技术。
- HTML 和 CSS 风格设置
- JavaScript 和 Promise 编程
- Service Workers
- Web 消息通信 API
步骤 1：设计你的动画
在编写代码之前，我们需要考虑如何设计一个漂亮而有效的加载动画。由于加载时间是在等待数据和应用准备阶段使用的，如果没有传递给用户信任、保证和满意感，那么用户的印象可能会很差。好的 PWA 加载动画可以让用户注意到你的应用程序正在加载，并调整期望时间，同时也为用户提供了一些乐趣。
您可以从以下动画效果中选择一种或多种算法：
- 旋转
- 弹跳
- 波动
- 基于 Canvas 的动画
- 焦点旋转屏保
在本教程中，我们将以“旋转”为范例。
步骤 2：添加 HTML 和 CSS 风格设置
现在，我们开始编写 HTML 和 CSS 风格设置来制作动画。
<div class="spinner"> <div class="spinner-item"></div> <div class="spinner-item"></div> <div class="spinner-item"></div> </div>
-- -------------------- ---- -------
-------- -
------- - -----
------ -----
------- -----
--------- ---------
-------- -------------
-
------------- -
------ -----
------- -----
-------------- ----
----------------- --------
--------- ---------
---------- -----
-
-------------------------- -
---- -----
----- -----
---------- ------- ---- ------ ---------
-
-------------------------- -
---- --
----- -----
---------- ------- ---- ------ -------- --------
-
-------------------------- -
---- -----
----- -----
---------- ------- ---- ------ ---------
-
---------- ------- -
-- -
---------- -------------
-
---- -
---------- ---------------
-
-在上述示例中，我们创建了一个“spinner”元素，它包括三个子元素（“spinner-item”）进行设置，具有位置、大小和颜色等样式设置。每个 spinner-item 都有一个感知 CSS 动画，动画是由 "@keyframes rotator" 实现的，如上 codepen 中可见。
步骤 3：添加 JavaScript 编程
现在，我们需要使用 JavaScript 和 Promise 编辑器来启动动画。通过使用 Service Workers 和 Web 消息通信 API，我们可以确保这个动画仅在 PWA 加载时显示。
-- -------------------- ---- -------
-- ---------------- -- ---------- - -- ----- --- ------
------------------------------- ---------- -
----- --------- - -----------------------------------------------
------------------------------- -
---------------------------------- --------------- -
----- ------ - ------------------
-- ------- --- -------------- -
------------------------------------------------ - --------
- ---- -- ------- --- -------------- -
------------------------------------------------ - -------
-
---
---
---
-在上述示例中，我们创建了一个事件侦听器来侦听服务工作者是否加载完成。一旦加载完成，我们可以通过先注册 service.js 文件以建立与消息传递 API 的连接，然后通过添加事件侦听器来触发 "showSpinner" 消息来启动动画。当应用程序加载完毕后，我们再次向消息传递 API 发送 "hideSpinner" 消息来停止动画。请注意，"service.js" 必须在服务器上启动，以确保所有 PWA 功能工作良好。
步骤 4：启用 Service Worker
最后，我们需要启用 Service Worker 来确保我们的 PWA 能够正常工作。只需创建 service.js 文件，其中需要使用 Service Workers API 注册成功以具体实现消息传递 API。
-- -------------------- ---- -------
----- ---------- - ---------------
----- ----------- - -
-------------
------------
---------
----------------
--------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
------ -------- - -------- - ---------------------
--
----------------- -
-- ------------------- --- ----------- -
------ ------------------------------
-
--
--
---
-------------------------------- --------------- -
-- ------------------ --- -------------- -
---------------------------------------------- -
-------------------------------- -
--------------------
------- -------------
---
---
---
- ---- -- ------------------ --- -------------- -
---------------------------------------------- -
-------------------------------- -
--------------------
------- -------------
---
---
---
-
---在上述示例中，我们首先定义了一个 CACHE_NAME 常量，然后设置预缓存的 URL 列表。我们接下来添加一个事件侦听器来等待安装事件。当 Service Worker 安装成功时，我们使用 caches.open() 方法打开缓存并添加 URL 列表。
我们接下来添加另一个事件侦听器来监听 "fetch" 事件。当浏览器请求服务器时，我们检查是否存在缓存结果。如果存在，则返回缓存结果；否则，我们会发起一个网络请求来获取资源。如果出现任何错误，则我们可以尝试在应用程序备用缓存中查找资源。
最后，我们添加另一个事件侦听器，侦听从 JavaScript 发送的 showSpinner 和 hideSpinner 消息。当事件触发时，我们使用 clients.matchAll() 方法为所有客户端发送消息。cliente.postMessage() 方法可用于发送消息到客户端。
结论
在本教程中，我们介绍了 PWA 及其组成元素，并讨论了如何设计并实现 PWA 加载动画。通过使用 HTML 和 CSS 风格设置、JavaScript 和 Promise 编程、Service Workers 和 Web 消息通信 API，我们可以利用现代 Web 技术创建漂亮、流畅的 PWA 加载动画。希望这个教程可以对你有所帮助。如果您有任何问题，请随时在下面的评论中与我们联系。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6713fe86ad1e889fe21178bd