PWA（渐进式 Webb 应用程序）是一种可靠，快速且吸引人的 Web 应用程序开发方式，在近年来已经变得越来越流行。PWA 应用程序利用 Web 技术和现代浏览器的能力来实现可靠性和优质的用户体验，具有安装、离线使用和前台缓存等功能，因此成为当今移动 Web 开发领域的热门话题。
Webpack 是一个流行的打包工具，可帮助开发者构建 PWA 应用程序。它不仅能够将应用程序的代码打包成一个单一的 JavaScript 文件，还能够通过构建过程优化应用程序的性能表现。在本文中，我们将讨论利用 Webpack 如何构建可靠的 PWA 应用程序。
准备
在开始之前，我们需要确保安装了以下工具：
- Node.js 和 NPM。可以从 https://nodejs.org/en/下载安装程序。
- Webpack。运行
npm install webpack webpack-cli --save-dev命令来安装。
接下来，我们需要创建一个 package.json 文件以便于可以安装和管理我们的依赖项。我们可以通过运行 npm init 命令创建此文件。随后可以使用编辑器打开 package.json 文件，添加以下脚本：
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}该脚本使我们能够使用以下命令启动开发服务器：
npm start
或者打包生产版本：
npm run build
配置 Webpack
我们需要创建一个名为 webpack.config.js 的文件，以告诉 Webpack 如何构建我们的应用程序。
首先，我们需要引入一些必需的模块：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');然后，我们需要定义入口和出口文件。这告诉 Webpack 应该从哪里开始构建，以及构建后放置输出文件的位置。
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},我们还需要添加一些 loader，以便于 Webpack 可以正确地解析我们的代码。
- Babel loader
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-- CSS loader
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}现在我们需要引入 HtmlWebpackPlugin 插件。这个插件将自动为我们生成 index.html 文件，并在打包时将它包含进去。
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'My App',
template: './public/index.html',
filename: 'index.html'
})
],在这里我们使用了 CleanWebpackPlugin 来清除 dist 目录下的文件，在下面的部分中我们将更多地了解 PWA 方面的代码优化以及清除缓存的操作。
PWA 实现
下一步，我们需要添加 PWA 能力以便我们的应用程序可靠性。以下是我们需要添加的功能：
- 添加一个 Service Worker，可以使应用程序离线时继续运行。
- 实现 Web App Manifest，可以让应用程序在设备中像应用程序一样被安装。
- 增加资源缓存，使应用程序能够更快地启动并脱机工作。
Service Worker
Service Worker 可以使您的应用程序在没有网络连接时继续运行。它能够托管所有页面缓存，并在离线时动态提供缓存文件。为了启用 Service Worker，我们需要将一个注册文件添加到我们的应用程序中。
创建 src/service-worker.js 文件如下所示：
-- -------------------- ---- -------
----- --------- - ---------------
----- ------------ - -
----
--------------
-----------
------------
--
-------------------------------- ------- -- -
----------------
----------------------
------------- -- -
------ ---------------------------
--
--
---
--------------------------------- ------- -- -
----------------
------------------------------- -- -
------ ------------
------------------------ -- -
------ -------------------------- -- ---- --- ----------
------------- -- -
------ --------------------
--
--
--
--
---
------------------------------ ------- -- -
------------------
---------------------------
---------------- -- -
------ -------- -- ---------------------
--
--
---我们在上面的代码中定义了三个事件。
install
在安装事件中，我们打开一个具有指定缓存名称的新缓存，之后将需要缓存的文件添加到其中。
activate
在激活事件中，我们旨在清理旧缓存。根据定义的缓存名称，我们比对所有缓存，并在名称不匹配时删除缓存。
fetch
在 fetch 事件中，我们尝试匹配现有缓存，并如果存在缓存，直接返回。如果不存在缓存，则通过由-fetch API 代理返回一个完整的响应。
最后，在 src/index.js 文件中的下面添加以下代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------------------
-------------------- -- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ----- -- -
-------------------------- ------------ ------- -- -----
---
---
-这部分代码的作用是在网页加载时，如果浏览器支持 Service Worker 相关 API，就进行注册。
Web App Manifest
Web App Manifest 是一个 JSON 文件，用于定义 PWA 应用程序的元数据，例如应用程序的名称、图标、主题色和起始网址等。在以下 public/manifest.json 文件中定义了上述元数据：
-- -------------------- ---- -------
-
------- --- -----
------------- --- -----
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
-------- -
-
------ ------------------------------
-------- --------
------- ------------
---------- ---- ---------
--
-
------ ------------------------------
-------- --------
------- ------------
---------- ---- ---------
--
-
------ ------------------------------
-------- --------
------- ------------
---------- ---- ---------
--
-
------ --------------------------------
-------- ----------
------- ------------
---------- ---- ---------
--
-
------ --------------------------------
-------- ----------
------- ------------
---------- ---- ---------
--
-
------ --------------------------------
-------- ----------
------- ------------
---------- ---- ---------
--
-
------ --------------------------------
-------- ----------
------- ------------
---------- ---- ---------
--
-
------ --------------------------------
-------- ----------
------- ------------
---------- ---- ---------
-
-
-在上面的 JSON 对象中，我们定义了应用程序的基本信息，包括应用程序的名称、缩略名称、起始 URL、显示模式、背景颜色、主题颜色和 icon 等信息。
App Shell
App Shell 是指应用程序的基本框架、代码等，它是过滤网络上的内容并显示主要信息的方式。在 PWA 中，App Shell 的优化至关重要，以确保应用程序能够快速启动并充分利用缓存。
在本文所演示的示例中，我们采用首选技术 Stencil，用于构建高性能 Web 应用程序。我们在 src/components/app-root/app-root.tsx 文件中定义了应用程序的 App Shell。
-- -------------------- ---- -------
------ - ---------- - - ---- ----------------
------------
---- -----------
--------- --------------
--
------ ----- ------- -
-------- -
------ -
-----
--------
------ --------
---------
------
---------- -- -- --------
-------
------
--
-
-清除缓存
在开发时，我们通常需要对缓存清空浏览器缓存。有时候可以通过刷新页面并清除浏览器缓存来达到这个目的，但是这种方法很麻烦，也不是最可靠的方式。
在 webpack.config.js 文件中添加 clean-webpack-plugin 插件，可以在打包前清空旧的资源文件。
-- -------------------- ---- -------
----- - ------------------ - - --------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
-- ---
-
--总结
在本文中，我们演示了如何利用 Webpack 构建可靠的 PWA 应用程序。我们添加了 Service Worker 来使应用程序离线工作，添加了 Manifest，以使应用程序可以被安装，同时引入一些最佳实践，以确保性能和可靠性优化。我们推荐您对以上示例代码，自行跑一遍体验一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a14fdf48841e9894d95da6