php网页安装pwa,让PWA可安装【翻译】

PWA系列：

在上一篇文章中，我们介绍了如何通过运用service worker让js13kPWA支持离线工作，现在让我们更进一步，使得在支持的移动浏览器上可以安装web应用，就好像在操作一个本地应用一样。这篇文章介绍了如何实现这个功能，通过两个技术：web清单(web manifest)和添加到主屏幕(add to home screen)技术。

这些技术使得我们可以直接从设备的主屏幕上打开app，而不需要再启动浏览器，输入URL等繁琐的操作。这样你的app就可那些本地应用一样，属于一等公民了。这样我们可以更容易的访问应用，同时可以指定让应用全屏运行(不用看chrome浏览器的边框了)，这样感觉起来就更像个本地应用了。

需要条件

为了让网站可安装，需要完成下面几件事：

一个web清单，正确的参数

可以通过HTTPS访问

一个在设备上显示用的icon

一个注册的service worker，让app离线可用(目前只有Chrome+Android可用)

清单文件

最关键的元素是web清单文件，以JSON形式列出网站的所有信息。

清单通常放在web应用的根文件夹中。包含比如app的标题，不同尺寸的icon(用于移动OS端)，用于加载/初始界面的背景色。当web应用安装或者在主屏幕上显示时，会用到这些信息。

具体的内容：

{

"name": "js13kGames Progressive Web App",

"short_name": "js13kPWA",

"description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",

"icons": [

{

"src": "icons/icon-32.png",

"sizes": "32x32",

"type": "image/png"

},

// ...

{

"src": "icons/icon-512.png",

"sizes": "512x512",

"type": "image/png"

}

],

"start_url": "/pwa-examples/js13kpwa/index.html",

"display": "fullscreen",

"theme_color": "#B12A34",

"background_color": "#B12A34"

}

大多数的参数都很容易理解，让我们看细看一下：

name：web app的全名

short_name：在主界面显示的名字

description：app的简单描述

icons：icon的信息——资源的URL，大小，种类。请确保多添加一个不同尺寸的icon，这样就可以在用户的设备上显示最合适的一个。

start_url：启动应用的入口文件

display：app怎么显示：全屏，standalone(隐藏浏览器UI)，minimal-ui(和standalone类似，不过浏览器会显示一些最基本的导航UI，浏览器不同显示内容可能不同)，browser(原始样式)。

theme_color：操作系统使用的UI主色调。

background_color：背景色，安装和初始屏幕时使用。

最最基本的信息是name和至少一个的icon(包括src，size和type)。推荐添加description，short_name和start_url。除了上述的参数之外，还有其他的一些参数——请查看Web App Manifest reference。

添加到主屏幕(add to home screen)

“添加到主屏幕”(a2hs)特性从应用的清单中获取信息，移动浏览器利用这些信息在设备的主屏幕上添加应用(主要用到的是icon和name信息)。当且仅当你的app满足了上述的条件才可用。

当用户用支持这些特性的移动浏览器访问PWA时，需要提供一个横幅(banner)信息表示此app可以安装为PWA。

enter image description here

当用户点击了横幅，会再显示一个安装横幅。这个横幅由浏览器自动生成，生成的信息基于清单——name和icon信息。

[图片上传失败...(image-3ee3a4-1548861749764)]

在用户点击了按钮之后，最后会显示应用在主屏上的显示效果，并让用户做最后的确认。

enter image description here

当最后确认后，应用会被安装到主屏幕上。

enter image description here

安装成功之后，用户可以从主屏幕上快速启动应用。PWA有时候在创建时会在icon的右下角显示创建的浏览器的来源(取决于你的操作系统和浏览器)。

初始界面

在某些浏览器中，清单也会提供初始界面的信息，用于在PWA启动时显示。

enter image description here

icon，theme和背景色会在这时派上用场。

总结

本章中，我们学习了如何实现PWA的可安装性，主要是通过web清单和添加到主屏幕这两个技术。

想要了解关于添加到主屏幕的更多信息，可以查看Add to Home screen guide。浏览器的支持还相对较弱。

让我们进入最后一个步骤——通过消息推送增加用户粘度(re-engagement)。