PWA(Progressive Web App)是一种新型的 Web 应用程序体验,它可以像原生应用程序一样为用户提供完整的功能,比如离线访问、后台推送、添加到主屏幕等。在这个感性化的时代,PWA 为我们的 Web 应用程序定义了新的标准。本文将教你如何在 React 应用中添加缓存来提升它们的离线体验。
为什么缓存是重要的?
无论是传统的服务器端渲染应用还是现代的单页应用,Web 应用程序都需要加载许多资源,例如样式表、脚本、图片和內容。这些资源由于需要从远程服务器加载,所以会有一定的延迟。这在移动设备上的体验尤为明显,因为移动设备的带宽和网络连接不如桌面设备稳定。
当应用程序进入离线状态时,它通常会在用户界面上显示错误页面或空白页面,降低了用户体验,并可能导致流量损失。通过使用缓存机制,我们可以在应用程序离线时存储所需的资源,以允许应用程序提供一种更好的、无需互联网连接的解决方案。
如何在 React 应用中使用缓存
React 使用通过 Webpack 和其他工具构建的 JavaScript 文件来编译,所以我们可以使用类似 Service Worker 的 API 从这些文件中缓存我们的资源。在本文中,我们将使用 Workbox,一个 Google 开发的工具,用于利用 Service Worker 实现 Web 应用程序的离线功能。
步骤一:安装 Workbox
首先,你需要安装 Workbox,可以通过以下命令在你的项目中进行安装:
npm install workbox-cli
步骤二:在 React 应用中添加 Service Worker
在 React 项目中,你可以使用 cra-template-pwa 模板来初始化一个带有 Service Worker 的应用程序。该模板已包含了 Workbox 和外观库,可以通过以下方式进行安装:
npx create-react-app my-app --template cra-template-pwa
安装完成后,将会自动生成 Service Worker 文件和 favicon.svg,可以通过 Chrome 开发者工具来查看,并且支持离线模式。
步骤三:配置 Workbox
现在,我们需要让 Workbox 来缓存请求的资源。我们可以使用 Workbox 注册 Service Worker,并缓存我们的 HTML、CSS 和 JavaScript 文件。
在 src/index.js 文件中添加以下代码:
-- -------------------- ---- ------- ------ - -------- - ---- ----------------- -- ---------------- -- ---------- - ----- -- - --- ------------------------------ -------------------------------- ------- -- - -- ----------------- - -------------------- ------ --------- --- --- ----- -------- - --- -------------- - ---- - -------------------- ------- --- --- ------------- -
步骤四:缓存我们的资源
现在,我们需要编写一些代码来缓存我们的资源。我们将把所有静态资源放在一个数组中:
-- -------------------- ---- ------- ----- ------------ - - ---- -------------- ----------------- --------------------- --------------------- --------------- --------------- -------------- --------------------------- ------------------------ ----------------------- ----------------------------- -------------------------- --
然后,我们需要创建一个 Service Worker,这样我们就可以使用 Workbox 为我们创建缓存:
/* global self, workbox */ self.__WB_MANIFEST = [ ...filesToCache, ...self.__WB_MANIFEST ]; workbox.precaching.precacheAndRoute( self.__WB_MANIFEST.filter((item) => item !== '/service-worker.js') );
我们现在已经可以使用 Workbox 缓存我们的资源。我们可以启动我们的应用程序并在离线时离线缓存。
在你的应用程序中,你现在可以通过以下命令来测试缓存是否已生效:
const fromCache = await caches.match(request); if (fromCache) { console.log('Response from cache found!', request.url); return fromCache; }
总结
本文我们介绍了如何使用 Workbox 以及 Service Worker 来在 React 应用中使用缓存。这将帮助我们提高我们应用程序的性能、并为我们的用户提供更好的体验,同时还有着更低的流量成本。在今天的 Web 开发中,缓存是一个必不可少的方面,PWA 则强调了缓存的重要性。如果你想深入了解 PWA,请访问 PWA 简介。
示例代码
-- -------------------- ---- ------- ------ - -------- - ---- ----------------- -- ---------------- -- ---------- - ----- -- - --- ------------------------------ -------------------------------- ------- -- - -- ----------------- - -------------------- ------ --------- --- --- ----- -------- - --- -------------- - ---- - -------------------- ------- --- --- ------------- - ----- ------------ - - ---- -------------- ----------------- --------------------- --------------------- --------------- --------------- -------------- --------------------------- ------------------------ ----------------------- ----------------------------- -------------------------- -- -- ------ ----- ------- -- ------------------ - - ---------------- --------------------- -- ------------------------------------ -------------------------------- -- ---- --- --------------------- -- ----- -------- ----------------------- - ----- ----- - ----- --------------------------- ----- --------- - ----- --------------------- -- ----------- - --------------------- ---- ----- -------- ------------- ------ ---------- - --------------------- ---- ----- --- -------- ------------- - ----- -------- ------------------------ - ----- -------- - ----- --------------- --------------------- ---- ------ --------- ------ --------- - ----- -------- --------------------- - ----- ----- - ----- --------------------------- ----- -------- - ----- --------------- --------------------- ---- ------ --- ------- -------- ------------- ----- ------------------ ------------------ ------ --------- - ----- -------- ------------------------- - ----- - ------- - - ------ ------------------ -------------------------------- -- ------------------------------------------- - -- - ------------------------------ --------------------
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ca00d45ad90b6d0418f62e