Progressive Web Apps (PWA) 是一项新兴的技术，它结合了 Web 应用程序和原生应用程序的优点，可以提供与原生应用程序相似的用户体验。PWA 应用程序可以离线工作，具有快速启动和响应速度，并且可以安装在用户的设备上，使用户可以通过启动器或应用库访问它们。
React 是一个流行的 JavaScript 库，用于构建用户界面。与 PWA 相结合，可以通过使用 Service Worker，Web App Manifest 和其他技术来构建快速、可靠和安全的 PWA 应用程序。本文将介绍如何基于 React 技术栈构建 PWA 应用程序。
1. 创建 React 应用程序
首先，我们需要创建一个新的 React 应用程序。可以使用 create-react-app 工具快速创建一个新的 React 应用程序。在终端中运行以下命令：
npx create-react-app my-app cd my-app npm start
这将创建一个新的 React 应用程序，并启动开发服务器。
2. 添加 Service Worker
Service Worker 是一个运行在浏览器后台的 JavaScript 脚本，可以拦截网络请求并缓存响应，从而实现离线和快速加载。PWA 应用程序必须使用 Service Worker。
要添加 Service Worker，我们可以使用 Workbox，它是一个 Google 打造的用于构建 PWA 应用程序的库。运行以下命令来安装 Workbox：
npm install workbox-cli --save-dev
然后，在 src 目录下创建一个名为 sw.js 的文件，并添加以下代码：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');
workbox.routing.registerRoute(
({request}) => request.destination === 'script',
new workbox.strategies.CacheFirst(),
);这将注册一个对所有 JavaScript 文件的缓存优先策略。
然后，在 index.js 文件中，我们需要注册 Service Worker：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}这会检查浏览器是否支持 Service Worker，并在页面加载时注册它。
3. 添加 Web App Manifest
Web App Manifest 是一个 JSON 文件，描述了 PWA 应用程序的一些元数据，例如应用程序名称、图标、主题颜色等。它告诉浏览器如何在设备上安装 PWA 应用程序。
要添加 Web App Manifest，我们可以在 public 目录下创建一个名为 manifest.json 的文件，并添加以下代码：
-- -------------------- ---- -------
-
------- --- --- -----
------------- --- -----
------------ ----
---------- -------------
-------------- ----------
------------------- ----------
-------- -
-
------ --------------
-------- ------ ----- ----- -------
------- --------------
--
-
------ --------------
------- ------------
-------- ---------
--
-
------ --------------
------- ------------
-------- ---------
-
-
-这里定义了一些元数据，例如应用程序名称、短名称、启动 URL 等。此外，还定义了一些图标，以及主题颜色和背景颜色。
然后，我们需要在 index.html 文件中添加一个 link 元素，将 Web App Manifest 连接到我们的应用程序中：
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
4. 优化应用程序资源
为了使 PWA 应用程序更快，我们需要优化资源，例如 JavaScript、CSS 和图像文件。我们可以使用一些工具来缩小、压缩和优化这些资源，例如 webpack 和 minify。
为了优化 JavaScript 和 CSS，我们可以使用 webpack，它是一个流行的模块打包器。要使用 webpack，我们需要安装一些必要的依赖项：
npm install webpack webpack-cli webpack-dev-server --save-dev npm install babel-loader css-loader style-loader --save-dev
然后，在根目录下创建一个 webpack.config.js 文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
----------- ----
--
---------- -
------------ ---------
--
------- -
------ -
-
----- --------------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
-
----- ---------
---- ---------------- --------------
--
-
----- -----------------------
---- ----------------
--
--
--
--这里定义了 webpack 的一些配置选项，例如入口文件、输出文件、开发服务器和模块规则。我们还使用了 Babel 和 css-loader，从而能够在应用程序中使用 ES6 和 CSS。
要优化图像文件，我们可以使用 imagemin，它是一个用于压缩图像的库。安装 imagemin：
npm install imagemin imagemin-cli imagemin-webp --save-dev
然后，在 package.json 文件中添加以下脚本：
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open",
"imagemin": "imagemin src/assets/images/* --out-dir=dist/assets/images"
}这里定义了一些 npm 脚本，例如 build 用于构建应用程序，start 用于启动开发服务器，imagemin 用于压缩图像。
5. 使用 PWA 应用程序
现在，我们可以启动我们的 PWA 应用程序并测试它了。在终端中运行以下命令：
npm start
这会启动开发服务器，在浏览器中打开应用程序。
在开发者工具中，可以查看 Application 面板，其中列出了与 PWA 相关的信息，例如：
- Manifest：列出了 Web App Manifest 文件中定义的元数据。
- Service Workers：列出了注册的 Service Worker，并允许我们为其设置一些选项。
- Cache Storage：列出了 Service Worker 访问的缓存存储，允许我们查看、清除或添加缓存。
- IndexedDB：列出了应用程序的 IndexedDB 数据库。
我们可以模拟离线情况，以测试我们的 PWA 应用程序是否可以工作。在开发者工具中，可以暂停网络并重新加载页面。此时，我们的应用程序将使用 Service Worker 缓存的响应。
示例代码
完整的示例代码可以在 GitHub 上找到。这个应用程序由两个页面组成，它们使用 Bootstrap 和 Material-UI 进行样式处理。
总结
本文介绍了如何基于 React 技术栈构建 PWA 应用程序。我们添加了 Service Worker 和 Web App Manifest，优化了应用程序资源，并使用开发者工具测试了应用程序。PWA 是一个新兴的技术，它结合了 Web 应用程序和原生应用程序的优点，可以为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5ea42f6b2d6eab3163ea5