《Progressive Web Apps》读书笔记五

第五章 观感

5.1 Web 应用清单

Web 清单文件是简单的 JSON 文件，描述了应用相关的有用信息（名称、作者、图标和描述等），可使用户将 Web 应用安装到设备的主屏幕上，允许开发者自定义启动页面、模板颜色、URL。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  "name": "Progressive Times Web App",
  "short_name": "Progressive Times",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#FFDF00",
  "background_color": "FFDF00",
  "icons": [
    {
      "src": "homescreen.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "homescreen-144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

• name：用作当提示用户安装应用时出现的文本。
• short_name：用作当应用安装后出现在用户主屏幕上的文本。
• start_url：决定了当用户从设备的主屏幕开启 Web 应用时所出现的第一个页面。
• 根据构建的 Web 应用类型，可能需要预设如何首次加载。display 字段表示开发者希望他们的 Web 应用如何向用户展示。
• 通过使用 theme_color 字段，可以对浏览器的地址栏进行着色，以符合网站的主色调。
• icons 字段决定了当把 Web 应用添加到设备主屏幕上时所显示的颜色。

在页面中引入清单文件：

1

<link rel="manifest" href="/manifest.json">

5.2 添加到主屏幕

要显示添加到主屏幕，需要满足几个条件：

• 需要 manifest.json 文件
• 清单文件需要启动 URL
• 需要 144 x 144 像素的 PNG 图标
• 网站必须使用通过 HTTPS 运行的 Service Worker
• 用户至少需要访问过网站两次，并且两次访问间隔在 5min 之上（浏览器内置的条件，确保该功能不会引起用户反感）

5.2.1 定制图标

1
2
3
4
5
6
7

"icon": [
    {
        "src": "homescreen.png",
        "sizes": "144x144",
        "type": "image/png"
    }
]

5.2.2 添加启动画面

用户单击主屏幕上 Web 应用的图标后，在浏览器渲染页面的第一帧，将显示一个临时的“启动页面”。启动页面的内容是根据清单文件生成的。主要用到 name、background_color、icon 几个属性。

5.2.3 设置启动样式和 URL

显示模式决定了你想如何在用户的设备上呈现你的 Web 应用，启动 URL 是用户单击主屏幕图标时将到达的第一个页面。

start_url 用来指定当用户从设备启动应用时加载的 URL。如果给定的是相对路径，那么基础路径就是清单的路径。

显示模式表示 Web 应用在操作系统环境中的展现方式：

• fullscreen：打开 Web 应用并占用整个可用的显示区域
• standalone：打开 Web 应用以看起来像一个独立的原生应用。用户代理将排除诸如 URL 栏等标准浏览器 UI 元素，但可以包括诸如状态栏和系统返回按钮的其他系统 UI 元素。
• minimal-ui：类似 fullscreen，但为用户提供了可访问的最小 UI 元素集合，例如后退按钮、前进按钮、重载按钮以及查看网页地址的一些方式。
• browser：使用操作系统内置的标准浏览器打开 Web 应用。

display 是可选项，默认以 browser 模式来显示。

5.3 添加到主屏幕的高级用法

5.3.1 取消提示

如果不希望显示添加到主屏幕操作栏，可以取消该操作。

1
2
3
4

window.addEventListener('beforeinstallprompt', function (e) {
  e.preventDefault()
  return false
})

5.3.2 判断使用情况

通过监听 beforeinstallprompt 事件，可以判断出用户是否决定添加 Web 应用到主屏幕或者直接关掉提示。

1
2
3
4
5
6
7
8
9
10

window.addEventListener('beforeinstallprompt', function (event) {
  event.userChoice.then(function (result) { // 判断用户的选择并返回 promise
    console.log(result.outcome)
    if (result.outcome == 'dismissed') { // 根据用户的选择来决定如何执行
      // 发送数据进行分析
    } else {
      // 发送数据进行分析
    }
  })
})

5.3.3 推迟提示

结合以上代码使得用户可以控制是否要添加网站，而不是浏览器决定何时显示操作栏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var btnSave = document.getElementById('btnSave')
var savedPrompt

window.addEventListener('beforeinstallprompt', function (e) {
  e.preventDefault()
  btnSave.removeAttribute('disabled')
  savedPrompt = e
  return false
})

btnSave.addEventListener('click', function () {
	if (savedPrompt !== undefined) {
		savedPrompt.prompt()

		savedPrompt.userChoice.then(function (result) {
			if (result.outcome === 'dismissed') {
				console.log('User dismissed homescreen install')
			} else {
				console.log('User added to homescreen')
			}

			savedPrompt = null
		})
	}
})

5.4 调试清单文件

Chrome 开发者工具的 Application 标签中，有 Manifest 菜单可快速有效查看和调整。