谷歌最近推出了一个名为 Workbox 的 Progressive Web App（PWA）框架，它能够使用 Service Workers 更高效地缓存和预取数据。对于开发人员来说，这是一个非常有用的工具，可以帮助他们构建更快、更易于使用的 Web 应用程序。
什么是 PWA？
PWA 是一种 Web 应用程序，它可以像本地应用程序一样运行，并具有更快的加载速度、更好的性能和更好的离线体验。它们可以通过 Web 浏览器访问，无需下载和安装，也可以像普通的网站一样被搜索引擎索引和发现。
什么是 Workbox？
Workbox 是一个谷歌开源的 PWA 应用框架，它提供了一套用于缓存和预取数据的高级 API 和工具库。使用 Workbox，开发人员可以更轻松地编写 Service Workers，以实现更高效的缓存和预取功能。
如何使用 Workbox？
为了使用 Workbox，开发人员需要先安装它。可以在命令行中使用 npm：
npm install workbox-cli --global
安装完成后，可以使用 workbox-cli 命令来生成一个基本的 Service Worker 文件，该文件可以用作开始使用 Workbox 的模板。
workbox wizard
使用此命令会提示您回答一些问题，例如要缓存的 URL，要缓存的资源类型等。回答完这些问题后，Workbox 将生成一个自定义 Service Worker 文件。根据应用程序的需求，可以根据需要修改该文件。
在自定义 Service Worker 文件中，可以使用 Workbox 提供的 API 和方法来缓存和预取数据。以下是一个简单的示例：
-- -------------------- ---- -------
-----------------------------------------------------------------------------------------
------------------------------
----------- -- ------------------- --- --------
--- -------------------------------
--
------------------------------
------- -- ---------- --- -------------------------------
--- -----------------------------------------
---------- ---------------------
--
--此示例演示了如何使用 Workbox 来缓存图像和谷歌字体。第一个路由会缓存所有请求目的地为“image”的 URL。它使用了 CacheFirst 策略，这意味着 Service Worker 将首先尝试从缓存中提取资源。如果找不到缓存，它将从网络中获取资源，并将其添加到缓存中。
第二个路由将缓存来自谷歌字体服务器的所有字体。它使用了 StaleWhileRevalidate 策略，这意味着 Service Worker 将尝试从缓存中返回字体文件，并在请求失败时从网络提取资源，以保持缓存最新。
结论
Workbox 是一个令人兴奋的 PWA 应用框架，它为开发人员提供了强大的工具，以使用 Service Workers 更高效地缓存和预取数据。通过使用 Workbox，开发人员可以将他们的 Web 应用程序转换为快速、响应性和可靠性的 PWA 应用程序。
如果您希望了解更多关于 Workbox 和 PWA 的信息，请参阅 Google 开发者文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772615b6d66e0f9aad8513b