PWA 初体验

阅读时长 5 分钟读完

什么是 PWA?

PWA 全称为 Progreesive Web App,翻译过来就是渐进式 Web 应用。PWA 可以被看做是将 Web 应用打造为体验与 Native 应用相当的 Web 应用。

PWA 带来了很多优点,包括:

  • 可离线使用:当用户失去连接时,可以让用户仍然使用应用,因为 PWA 可以将应用缓存到本地,当网络恢复时,应用将自动更新缓存。
  • 快速响应:PWA 可以缓存应用的某些部分,使得应用可以更快地响应用户的请求。
  • 安全性:PWA 在 HTTPS 协议上运行,可以保障数据的安全性。
  • 无需下载:无需通过应用商店下载安装,用户可以直接访问应用,节省用户的时间和手机存储空间。

实战体验 PWA

1. 创建 PWA

首先,我们需要用脚手架工具 create-react-app 创建一个 React 应用。

然后,我们需要安装 workbox-webpack-plugin 和 pwa-webpack-plugin 这两个插件。

接着,我们需要修改 webpack.config.js 文件。

-- -------------------- ---- -------
----- ---------------- - -----------------------------
----- - ---------- - - ---------------------------------

---

-------- -
  --- ------------------
    ----- --- -----
    ---------- -----
    ------------ --- -------------
    ----------- ----------
    ------------ ----------
    ------- -----
    ---- -----
    ------ -
      -
        ---- -----------------------------------
        ------ ----- -----
        ---- ----
      --
      -
        ---- -----------------------------------
        ------ ------
        ---- ---------
      -
    -
  ---
  --- ------------
    ------------- -----
    ------------ ----
  --
-
展开代码

在配置中,我们可以看到一些关于 PWA 的信息,例如应用名、描述、主题颜色等。

接下来,我们在 public 目录下创建一些必要的文件,包括 icon.png 和 manifest.json。

-- -------------------- ---- -------
-
  ------- --- -----
  ------------- -----
  -------------- ----------
  ------------------- ----------
  ---------- -------------
  -------- -
    -
      ------ ---------------
      -------- ----------
      ------- -----------
    --
    -
      ------ ---------------
      -------- ----------
      ------- -----------
    -
  --
  ------------ ---
-
展开代码

注意,在配置中添加了 workbox-webpack-plugin 和 pwa-webpack-plugin 这两个插件,分别用于生成 Service Worker 和配置 PWA 信息。GenerateSW 的 skipWaiting 属性设为 true,可以让新版本的 Service Worker 在启用时立即接管现有的 Service Worker。

2. 测试 PWA

为了测试我们的 PWA,在本地启动应用。

接着,在浏览器中访问 http://localhost:3000,然后按下 F12,打开开发者工具,选择 Application 面板,找到 Manifest。

如果看到了 Manifest,那么说明我们创建了一个 PWA。

接下来,我们需要测试 PWA 的离线使用和缓存功能,因为这是 PWA 最大的特点之一。

我们可以打开开发者工具的 Network 面板,然后点击离线,将网络断开。然后刷新页面,可以发现应用仍然可以使用。

此时,在 Service Worker 面板可以看到上下文状态变为 offline,表示我们已经离线使用了应用。

此外,我们可以模拟应用更新。

我们只需要修改应用的版本号,然后重新打包应用,那么即使用户未关闭标签页,PWA 应用的 Service Worker 也能够自动更新。

总结

PWA 是一种优秀的技术,它能够很好地缓存数据和加速应用的响应速度,同时具备离线使用功能,无需下载和安装应用,这些特点在移动端尤其突出。

现在,越来越多的 Web 应用(如 Twitter、Pinterest 等)都已经采用了 PWA 技术。如果你是一个前端工程师,不妨也去尝试一下 PWA 技术,为你的 Web 应用带来更好的用户体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64dd278ef6b2d6eab38395e1

纠错
反馈

纠错反馈