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