前言
PWA（Progressive Web Apps）是一种新型的 Web 应用程序模型，它允许您创建具有原生应用程序体验的 Web 应用程序。PWA 的核心在于离线访问和缓存，这使得应用程序可以即使在没有网络连接的情况下也可以继续运行。
在 PWA 应用程序中，我们需要缓存一些资源以实现离线访问。这些资产包括应用程序的核心 JavaScript、CSS 文件、图像等。但是，当我们需要添加新资产时，如何将它们添加到缓存中呢？
本文将介绍在 PWA 实现中如何添加新的资源到缓存，并提供示例代码以指导读者学习。
步骤
在 PWA 应用程序中，我们需要使用 Service Worker 来缓存和管理资源。我们可以通过 Service Worker 的生命周期来添加新的资产。下面是添加新资产的步骤：
1. 在 Service Worker 文件中添加新资产
我们需要在我们的 Service Worker 文件中添加新的资产。在此示例中，我们添加了一个新的图像文件 new-img.jpg。
-- -------------------- ---- -------
-------------------------------- ----------- -
------------
------------------------------------------ -
------ --------------
----
--------------
--------------
---------
----------------
-------------- -- ------
---
--
--
---在上面的代码中，我们在 cache.addAll 方法中添加了 '/new-img.jpg' 图像文件。
2. 更新缓存版本
我们还需要更新缓存的版本以确保 Service Worker 知道我们已经添加了新的资产。我们可以通过更改 Service Worker 文件的版本号来实现这一点。
-- -------------------- ---- -------
--- --------- - ---------
--------------------------------- ----------- -
------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ ---------------------------- -- --------- --- -------------
-------------------------- -
------ -------------------------
--
--
--
--
---------------------
---在上述代码中，我们将 Service Worker 文件的缓存版本更改为 app-v2。当我们添加了新的资产后，我们可以将此版本更改为 app-v3。
3. 激活 Service Worker
最后，我们需要激活我们的 Service Worker，以便它可以开始控制我们的应用程序。
-- -------------------- ---- -------
--------------------------------- ----------- -
------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ ---------------------------- -- --------- --- -------------
-------------------------- -
------ -------------------------
--
--
--
--
---------------------
---在上述代码中，我们注册了一个 activate 事件，我们在其中删除旧的缓存。
示例代码
完整的示例代码如下。请注意，这只是一个示例代码，您可以更改代码以满足您的特定需求。
-- -------------------- ---- -------
--- --------- - ---------
-------------------------------- ----------- -
------------
------------------------------------------- -
------ --------------
----
--------------
--------------
---------
----------------
-------------- -- ------
---
--
--
---
--------------------------------- ----------- -
------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ ---------------------------- -- --------- --- -------------
-------------------------- -
------ -------------------------
--
--
--
--
---------------------
---
------------------------------ ----------- -
--------------
----------------------------------------------- -
------ -------- -- -----------------
--
--
---结论
在 PWA 应用程序中，我们需要使用 Service Worker 来缓存和管理资产。在添加新资源时，我们需要更新缓存版本并重新激活 Service Worker。本文提供了一个示例代码以帮助您了解如何添加新资产到缓存中，并指导您学习 PWA 总体概述。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670226c4d91dce0dc8469baf