Webpack4渐进式网络应用程序

发表于 2025-07-07 分类于技术阅读次数：

什么是渐进式网络应用程序

渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers[https://developers.google.com/web/fundamentals/primers/service-workers/] 的网络技术来实现的。

到目前为止，我们一直是直接查看本地文件系统的输出结果。通常情况下，真正的用户是通过网络访问网络应用程序；用户的浏览器会与一个提供所需资源（例如，.html, .js 和 .css 文件）的服务器通讯。

那么让我们来使用一个简易服务器，搭建出我们所需的离线体验。我们将使用 http-server package 包：

1	npm install http-server --save-dev

还要修改 package.json 的 scripts 部分，来添加一个 server:run 脚本：

操作之前如果本地没有实践项目的话，可以使用之前分享的项目来实践，具体操作如下

1 2	git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo npm install

操作完后继续如下操作
在package.json中添加如下

1	"server:run": "npx http-server dist"

添加完后类似如下

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "npx webpack --config webpack.prod.js",
  "build:package": "NODE_ENV=production npx webpack --config webpack.prod.js",
  "start": "npx webpack-dev-server --open --hot --config webpack.dev.js",
  "server:run": "npx http-server dist"
},

我们先打包并运行下，操作如下

1 2	npm run build // 为了顺畅，可以先将webpack-bundle-analyzer关掉 npm run server:run

会有类似如下输出

> xx@xx server:run /Users/durban/nodejs/webpack-react-demo
> npx http-server dist

Starting up http-server, serving dist
Available on:
  http://127.0.0.1:8081
  http://172.18.0.70:8081
Hit CTRL-C to stop the server

如果你打开浏览器访问 http://127.0.0.1:8081，应该会看到在 dist 目录创建出服务，并可以访问 webpack 应用程序。如果停止服务器然后刷新，则 webpack 应用程序不再可访问。

这就是我们最终要改变的现状。“停止服务器然后刷新，仍然可以查看应用程序正常运行”

添加 Workbox
添加 workbox-webpack-plugin 插件，并调整 webpack.prod.js 文件

1	npm install workbox-webpack-plugin --save-dev

webpack.prod.js修改的地方如下
引入

1	const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

plugins中添加

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: true,
  exclude: [/\.map$/],
}),

有了 Workbox，再执行 npm run build 时会发生什么，如下图

可以看到，生成了 2 个额外的文件

service-worker.js
precache-manifest.2f20a332d5e297960a8442509af3aa18.js

注册 Service Worker
修改src/index.jsx，修改添加如下代码

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then((registration) => {
      console.log('SW registered: ', registration);
    }).catch((registrationError) => {
      console.log('SW registration failed: ', registrationError);
    });
  });
}