让PWA可安装【翻译】

2019-01-22  本文已影响0人  zydmayday

PWA系列:

  1. PWA简介【翻译】
  2. PWA架构【翻译】
  3. 利用Service workders使得PWA支持离线工作【翻译】
  4. 让PWA可安装【翻译】
  5. 利用消息推送增强PWA用户粘度【翻译】

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

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

需要条件

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

清单文件

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

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

<head>中包含了js13kpwa.webmanifest

<link rel="manifest" href="js13kpwa.webmanifest">

具体的内容:

{
    "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和至少一个的icon(包括srcsizetype)。推荐添加descriptionshort_namestart_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)。

上一篇下一篇

猜你喜欢

热点阅读