利用 Webpack 构建可靠的 PWA 应用程序

阅读时长 12 分钟读完

PWA(渐进式 Webb 应用程序)是一种可靠,快速且吸引人的 Web 应用程序开发方式,在近年来已经变得越来越流行。PWA 应用程序利用 Web 技术和现代浏览器的能力来实现可靠性和优质的用户体验,具有安装、离线使用和前台缓存等功能,因此成为当今移动 Web 开发领域的热门话题。

Webpack 是一个流行的打包工具,可帮助开发者构建 PWA 应用程序。它不仅能够将应用程序的代码打包成一个单一的 JavaScript 文件,还能够通过构建过程优化应用程序的性能表现。在本文中,我们将讨论利用 Webpack 如何构建可靠的 PWA 应用程序。

准备

在开始之前,我们需要确保安装了以下工具:

  1. Node.js 和 NPM。可以从 https://nodejs.org/en/下载安装程序。
  2. Webpack。运行 npm install webpack webpack-cli --save-dev 命令来安装。

接下来,我们需要创建一个 package.json 文件以便于可以安装和管理我们的依赖项。我们可以通过运行 npm init 命令创建此文件。随后可以使用编辑器打开 package.json 文件,添加以下脚本:

该脚本使我们能够使用以下命令启动开发服务器:

或者打包生产版本:

配置 Webpack

我们需要创建一个名为 webpack.config.js 的文件,以告诉 Webpack 如何构建我们的应用程序。

首先,我们需要引入一些必需的模块:

然后,我们需要定义入口和出口文件。这告诉 Webpack 应该从哪里开始构建,以及构建后放置输出文件的位置。

我们还需要添加一些 loader,以便于 Webpack 可以正确地解析我们的代码。

  • Babel loader
-- -------------------- ---- -------
------- -
    ------ -
        -
            ----- ----------
            -------- ----------------------------------
            ---- -
                ------- ---------------
                -------- -
                    -------- ---------------------
                -
            -
        -
    -
-
  • CSS loader

现在我们需要引入 HtmlWebpackPlugin 插件。这个插件将自动为我们生成 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

纠错
反馈