PWA介绍及快速上手搭建一个PWA应用的方法

营销型网站
2023-11-29 11:09:56

PWA(Progressive Web App)是一种新型的WEB应用程序模型，它融合了 Web 和 Native 应用的优势。在移动端可更好的解决应用安装、流量消耗、离线访问、消息推送等问题，能够将您的网站变成一个类似于原生移动应用的东西。

本文将介绍PWA的相关知识，并提供快速上手的搭建PWA应用的方法。

PWA介绍

PWA其实是一种思路，而不是某个具体的技术，因此也没有一个严格定义。PWA 可以看做是提供一种能像原生应用那样让 Web 应用具备“可以离线浏览”、“消息推送”以及“添加到桌面”等特性的技术方案。PWA主要由 App Shell、Service Worker和Web App Manifest 组成。

App Shell

App Shell 是指 Web App 应用的骨架部分，是 Web App 的核心架构和内容，相当于是一个很轻量的原生应用。第一次访问应用时，浏览器会下载 App Shell，并将其缓存到本地，以便下次访问时更快地呈现页面。同时，App Shell 负责设置应用的样式，这样应用在第一时间就天然地获得了原生应用般流畅的体验。

Service Worker

Service Worker 是一个完全脱离页面的 JavaScript 运行环境。它可以在后台进行运行，这样就可以监控请求、访问缓存等，从而提供离线访问的能力。

通过 Service Worker 可以将相应的资源缓存下来，以便用户离线浏览时可以被直接调用，从而提高页面的访问速度和离线访问的能力。另外，Service Worker 还可以用来进行消息推送，这样可以在不打开页面的情况下通知用户。

Web App Manifest

Web App Manifest 是一个 JSON 文件，它提供了应用的相关信息，包括应用名称、图标图像、主题颜色等，以及应用在添加到桌面后显示的样式。

快速上手搭建一个PWA应用

接下来，我们将讲解如何手动搭建一个 PWA 应用。首先，我们需要一个 Web 应用，可用 Visual Studio Code 编写，在本机搭建一个基本的 Web 应用：

使用npm init命令初始化项目环境；
使用npm install http-server -g命令安装http-server服务器；
在项目根目录下，新建一个index.html文件，添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello PWA</title>
    <link rel="manifest" href="./manifest.json">
  </head>
  <body>Hello PWA</body>
</html>

将以下代码复制到项目根目录下的manifest.json文件中：

{
  "name": "Hello PWA",
  "short_name": "HelloPWA",
  "theme_color": "#1976d2",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    {
      "src": "/img/icons/256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}

其中name属性表示应用名称，short_name表示两个或更少的字符应用名称，theme_color和background_color分别表示应用的主色调和背景色，display属性可以使用的值有：fullscreen, standalone, minimal-ui和browser。

在项目目录下新建一个img/icons/256x256.png文件，这个文件对应于应用在桌面上的图标。
在项目目录下，运行http-server命令，开启静态文件服务器，并访问http://localhost:8080。在 Chrome 浏览器下开发者模式中找到“Add to Homescreen”按钮将其加入到桌面。

至此，您已经成功创建了一个 PWA 应用，可以通过离线访问或者在桌面上打开并享受沉浸式、原生应用级别的用户体验了。

示例说明

示例1

为了更好的示例演示，我们以一款新闻类 App 为例，实现一些比较实用的性能和使用效果。

1. 建立 App Shell

首先，建立一个 APP Shell。App Shell 是一个简单的骨架结构，相当于提前用于存放与页面实际内容无关的组件以及设置通用样式和脚本，可以在首次加载后缓存 Web 应用程序，这样可以更快的响应用户操作。

2. 使用 Service Worker(PWA核心)

通过以上基础结构做好后，我们就要在根目录开启 Service Worker，使我们的程序具备一些 PWA 的特性。

注：Service Worker 在根目录开启，于是在所有页面的请求中生效，就等于我们可以在 SW 服务器中操作所有相关请求。因此，我们有 “拦截” 请求的能力，可以处理请求，打造 PWA App 的离线使用等特性。

3. 添加 Web App Manifest

接着，添加 Web App Manifest。这个清单文件描述了关于 App 的元数据，就是一下脚手架中的 package.json 或者 gruntfile.js 之类。清单指定了应用程序的名称、简短名称、主题色、启动URL、应用程序预期用途或者对浏览器 UI 的影响等。

4. 缓存与离线访问

PWA 最强大的地方是离线访问。在上面的示例中，我们已经实现了根据缓存判断是否需要重新拉取，如果缓存已过期，则触发从服务器重新拉取数据，缓存到 Cache 中再响应请求的流程。

5. 添加离线消息推送（Service Work Tips）

在网络上有一种原生 app 所具有的能力，就是推送通知，使应用更具可用性或提高用户忠诚度。在 WebPack Service Worker 中同样提供了这样一个机制。

示例2

为了进一步说明 PWA 的强大之处，我们可以在 Service Worker 中加载像 Jacklsiting 开发的库如 Workbox，以在 Service Worker 使用 Workbox 模块，大大降低开发学习门槛，让我们通过类似于页面路由的方式约定不同的内容缓存策略，进一步优化我们的 PWA App。