阿夸漫谈

PWA 系列(1)—— 简介

发表于 2019-02-28

PWA 是 Google 在 2015 年提出的一门技术,旨在提高用户体验,让用户在网页上和原生 app 上有一样的体验。本文将介绍什么是 PWA,并概述下 PWA 中使用的核心技术以及相关工具。更具体的使用将在以后的系列中逐一介绍。

1. 什么是 PWA

PWA(Progressive Web App)中文名渐进式网络应用,从名字中可以看出 PWA 是渐进式的,即在不兼容 PWA 的浏览器中,PWA 不生效,但网站可以和以前一样访问。当浏览器支持 PWA 的时候,就可以体验到 PWA 带来的提升。

从 Google 提供 PWA 的官网中可以看出,PWA 有三个特点:

  • Reliable:在不稳定的网络下,可以通过提前缓存关键资源,实现迅速加载,不会出现小恐龙快跑(Chrome 在没有网络的时候出现的小恐龙游戏)
  • Fast:当网页加载时间超过 3s,53% 的用户会在选择关闭网页。在这方面,PWA 加载迅速,不存在用户操作卡顿的情况。
  • Engaging:体验和原生 app 相似。PWA 可以直接添加图标到手机屏幕,不用经过 app store,而且还可以进行通知推送、提醒。

2. 核心技术

2.1 Web App Manifest

Web App Manifest 是通过定义 manifest.json,实现安装 Web App 到设备的主屏幕。该 json 文件定义了 Web App 的图标、名称、运行方式等,

2.2 Service Worker

Service Worker 简称 SW, 是一个在网页后台运行的服务进程,一种特殊的 Web Worker。SW 可以对网络请求进行拦截、缓存服务器响应内容、消息的推送、消息的通知等

2.3 Push Notification

Push Notification 即消息推送与提醒,是两个不同的功能,Push API 和 Notification API。Push 是服务器端将更新的信息传递给 SW ,Notification 是 SW 将更新的信息推送给用户。

2.4 App Shell

App Shell 架构是构建 PWA 应用的一种方式。App Shell 提供了一个基本的 Web App 框架,包含基础所需的 HTML、JS、CSS。用户打开页面就可以看到 Web App 基本结构,如头部、底部、菜单栏等,获取数据后就可渲染出完整页面,使用户体验接近 Native App。

3 相关工具

下面是开发 PWA 常用的工具,可以让你在开发的时候事半功倍。

3.1 Chrome 开发者工具

Chrome 开发者工具是 Chrome 浏览器内置中的 Web 开发和调试工具,用来对网站进行调试和分析。

3.2 Lighthouse

Lighthouse 是一个在 github 上开源的自动化工具,通过对页面进行一系列的测试,生成页面性能报告。我们可以根据报告改进网站,提高网站的质量。

Lighthouse 安装方式:

  • Chrome 开发者工具自带,在 Audits 面板中,通过 Run audits 按钮直接使用
  • 在 Chrome 应用商店中找到,作为 Chrome 拓展程序使用
  • npm 中下载,全局安装使用

3.3 Puppeteer

Puppeteer 是一个 Node 库,通过 Chrome DevTools 协议提供的高级 API 来控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,可以实现我们在网页中的大多数行为,

3.4 Workbox

Workbox 是一套 PWA 的静态资源本地存储的解决方案,包含一些 JS 库和构建工具,取代了较早推出的 sw-precache 和 sw-toolbox 库。

(完)

目录