前言
近年来，随着移动端设备的普及，手机成为了人们生活中不可或缺的工具之一。同时，人们对于网站性能和用户体验的要求也越来越高。因此，一种名为“渐进式Web应用程序（PWA）”的技术逐渐兴起。该技术不仅可以提高网站性能，改善用户体验，还能实现离线访问。
在本文中，我们将深入介绍如何用 PWA 技术实现可离线的电子商务网站。
什么是 PWA？
PWA（Progressive Web Apps），即渐进式Web应用程序，是一种利用现代Web开发技术，以更接近原生应用的方式进行打造的Web应用程序。它可以提供更好的性能、更好的用户体验，同时也支持离线访问。
为什么选择 PWA 实现电商网站？
使用PWA技术可以带来以下好处：
更好的性能 - 由于PWA角色更接近于本机应用，因此加载速度比普通Web应用程序更快。
更好的用户体验 - PWA不像普通的Web应用程序，需要将用户从浏览器中打开到一个新的页面。它们能够在屏幕上为用户提供与本机应用程序相同的体验。
支持离线访问 - PWA将网站缓存到设备上，在没有互联网连接的情况下仍然能够访问。
如何实现一个可离线的 PWA 电商网站？
步骤一：创建代表性页面
在开始之前，首先需要创建一个代表性的电商页面。在该页面上，您需要使用必需的 HTML 、CSS和Javascript创建一个完整的网站。在这个例子中，我们将使用 React框架来搭建电商网站。
下面是一个基础的电商页面：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ------------------- ----- ---------------- ----------------- ------- ------ ---- ---------------- ------- ------------------------ ------- -------
步骤二：添加 PWA 功能
在创建了页面之后，您需要添加PWA功能。幸运的是，Google为我们提供了Workbox库，可使此进程非常简单。
在这个例子中，我们将使用Workbox推荐的方法。Workbox 提供了一个 CLI 工具，你可以安装它，使用如下命令：
npm install workbox-cli --global
然后，运行下面的命令，可以自动添加 PWA 功能所需的文件和代码：
workbox wizard
运行上述命令会引导您完成以下步骤：
- 提供您网站的URL。
- 配置您的缓存策略，以决定哪些文件需要缓存。
- 配置您的服务工作线程的名称和位置。
- 确认您的配置。
运行完上述命令后，您会发现项目根目录下生成了一个 javascript文件夹，其中包含了 PWA 所需的相关文件。
步骤三：注册服务工作线程
PWA 的核心是服务工作线程。服务工作线程是一种允许网络请求被拦截、存储和操作响应的 JavaScript Worker。我们需要在网站根目录下创建一个service-worker.js文件和一个注册脚本registerServiceWorker.js 。
registerServiceWorker.js 的基本代码如下：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -------- -- -
-------------------------------------------------------------------- -------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- -------- ----- -
-------------------------- ------------ ------- -- -----
---
---
-需要说明的是，在浏览器的开发模式下无法启动 ServiceWorker，为了达到这个目的，在开发中可以安装 npm 包 serve，使用 serve 命令可以开启一个本地服务器将应用运行起来，方式如下：
npm install -g serve serve -s build
步骤四：缓存并离线
下一步是要确保您的网站可以缓存并离线访问。我们需要做的第一件事就是添加一个缓存清单。此清单定于哪个文件是需要缓存和离线访问的。
// service-worker.js workbox.precaching.precacheAndRoute([]);
通过以上代码，Workbox 将缓存host root下的所有文件。接下来，如果您想多缓存一些特定的请求，可以使用precacheAndRoute
workbox.precaching.precacheAndRoute([ '/index.html', 'https://cdn.example.com/jquery.js', '/fonts/**' ]);
步骤五：支持推送通知
最后，我们还需要将电商网站的 PWA 功能扩展到桌面，并将其开发为桌面应用程序。在实现这个功能之前，您需要生成安全密钥。请按照以下步骤生成 Key：
- 打开控制台。
- 选择“应用程序”。
- 在较新的版本中，您将看到通知部分。单击查看一些密钥和 ID。
- 单击“生成”的按钮，然后从生成的密钥和ID中选择一个。
-- -------------------- ---- -------
-- ------
----- ---------------------- - ----- -- -- -
----- -------------- - ----------
----- ---------- - --- ---------------------
----- -------- - ----- ------------------------------------------------------ -
------ ---
---
----- ------------ - ----- --------------------------------
---------------- -----
--------------------- ----------------------------------
---
------ ----------------- -
------- -------
----- -----------------------------
-------- -
--------------- ------------------
-
---
-
---
- - ------ ------ ---------- ------
- --------
--
-------- -------------------------------- -
----- ------- - ------------- - ------------------- - -- - ---
----- ------ - ------------- - --------
-------------- ----
-------------- -----
----- ------- - --------------------
----- ----------- - --- ---------------------------
--- ---- - - -- - - --------------- ---- -
-------------- - ----------------------
-
------ ------------
-步骤六：测试您的电商网站
完成以上步骤后，您可以测试您的在线电商网站。启动本地服务器 serve -s build，并在工具栏上单击“安装”按钮以添加缩略图。使用Chrome DevTools的Network Tab可以模拟无网络情况，然后浏览您的网站看看是否支持离线访问。
总结
本文深入介绍了如何使用PWA技术实现可离线的电子商务网站，并介绍了相关代码示例。如果您正在开发一个类似的网站，希望这篇文章能对您有所帮助。PWA技术是一项重要的进步，有助于提高网站性能和用户体验，同时使我们的应用变得更加可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5ee8d95c405902ee40fec