评论

Service Worker学习与实践(二)——PWA简介

Service Worker学习与实践(二)——PWA简介

在上一篇文章Service Worker学习与实践(一)——离线缓存中,已经讲到Service Worker的生命周期、如何创建、激活、更新Web应用程序的Service Worker,并且给出了一个简单的示例来说明使用Service Worker来实现离线缓存的原理,在这篇文章里,主要是对Service Worker实现原生应用程序的能力做出一定解析,下一篇文章,将通过一个例子阐述如何使用Service Worker实现消息推送功能。

Progressive Web Apps(PWA)

Progressive Web App, 简称 PWA,是提升Web App的体验的一种新方法,能给用户原生应用的体验。

PWA能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA本质上是Web App,借助一些新技术也具备了Native App的一些特性,兼具Web AppNative App的优点。

PWA的主要特点包括下面三点:

可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
体验 - 快速响应,并且有平滑的动画响应用户的操作
粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面
PWA本身强调渐进式,并不要求一次性达到安全、性能和体验上的所有要求,开发者可以通过PWA Checklist查看现有的特征。

通过上面的PWA Checklist,总结起来,PWA大致有以下的优势:

  • 体验:通过Service Worker配合Cache Storage API,保证了PWA首屏的加载效率,甚至配合本地存储可以支持离线应用;
  • 粘性:PWA是可以安装的,用户点击安装到桌面后,会在桌面创建一个 PWA 应用,并且不需要从应用商店下载,可以借助Web App Manifest提供给用户和Native App一样的沉浸式体验,可以通过给用户发送离线通知,让用户回流;
  • 渐进式:适用于大多数现代浏览器,随着浏览器版本的迭代,其功能是渐进增强的;
  • 无版本问题:如Web应用的优势,更新版本只需要更新应用程序对应的静态文件即可,Service Worker会帮助我们进行更新;
  • 跨平台:WindowsMac OSXAndroidIOS,一套代码,多处使用;
  • 消息推送:即使用户已经关闭应用程序,仍然可以对用户进行消息推送;

总的说来,只要Web应用支持的功能,对于PWA而言,基本都支持,此外,还提供了原生能力。

使用PWA manifest添加桌面入口

注意这里说的manifest不是指的manifest缓存,这个manifest是一个JSON文件,开发者可以利用它控制在用户想要看到应用的区域(例如移动设备主屏幕)中如何向用户显示网络应用或网站,指示用户可以启动哪些功能,以及定义其在启动时的外观。

manifest提供了将网站书签保存到设备主屏幕的功能。当网站以这种方式启动时:

  • 它具有唯一的图标和名称,以便用户将其与其他网站区分开来。
  • 它会在下载资源或从缓存恢复资源时向用户显示某些信息。
  • 它会向浏览器提供默认显示特性,以避免网站资源可用时的过渡过于生硬。

下面是我的博客网站的manifest.json文件,作为桌面入口配置文件的示例:

{
  "name": "Counterxing",
  "short_name": "Counterxing",
  "description": "Why did you encounter me?",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#ACE",
  "theme_color": "#ACE",
  "icons": [{
    "src": "/images/logo/logo072.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}

上面的字段含义也不用多解释了,大致就是启动的icon样式,应用名称、简写名称与描述等,其中必须确保有short_namename。此外,最好设定好start_url,表示启动的根页面路径,如果不添加,则是使用当前路径。

displaystandalone,则会隐藏浏览器的UI界面,如果设置displaybrowser,则启动时保存浏览器的UI界面。

orientation表示启动时的方向,横屏、竖屏等,具体参数值可参考文档

background_colortheme_color表示应用程序的背景颜色和主题颜色。

在创建好manifest.json后,将、使用link标签添加到应用程序的所有页面上,<link rel="manifest" href="/manifest.json">

安装到桌面

桌面端(以Mac OSX为例)

只有注册、激活了Service Worker的网站才能够安装到桌面,在Chrome 70版本之前,需要手动开启实验性功能,步骤如下:

  1. 进入chrome://flags
  2. 找到Desktop PWAs,选择Enabled

此时,进入一个支持PWA的网站(例如Google I/O),在Chrome浏览器右上角,点击安装。即可安装到桌面。这里以我的博客为例:

可以到awesome-pwa查找目前支持PWA的网站列表

接着点击安装:

这样,一个PWA应用就安装到你的机器上了,这里我的操作系统为Mac OSX,应用程序可以通过Launchpad打开,在Windows也是同理的,会被安装到桌面上,可通过开始菜单找到应用程序。

打开应用程序,发现其与原始应用几乎没有任何差距:

Windows与上述方法类似,这里就不做过多阐述

Windows 10下安装PWA效果图:

移动端(以IOS为例)

由于当初苹果推出PWA时,并没有一个统一的manifest的规范,最开始的设计是通过metalink标签来设定应用的对应参数的,所以,在移动端上的PWA应用,为了兼容Windows PhoneiPhone,需要在所有页面的HTMLhead中添加以下的标签:

<meta name="msapplication-TileImage" content="./images/logo/logo152.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Counterxing">
<link rel="apple-touch-icon" href="./images/logo/logo152.png">

添加好后,就可以体验我们的PWA了!

IOS11.3版本之后也支持PWA了,知道这一消息的我,卸载了手机上很多软件,立刻体验上了PWA

这里以豆瓣移动端为例使用Safiri浏览器打开一个网站,点击下方分享图标,选择添加到主屏幕。

然后在新弹出的一个浏览器页面,选择添加:

就以上简短的步骤,移动端上的一个PWA桌面应用就添加好了,赶紧体验吧!

小结

本文是笔者写的Service Worker学习与实践系列文章的第二篇,主要讲述的是配合Service Worker使用的PWA的优势,如何配置manifest.json文件来实现将PWA安装到桌面,并通过Mac OSXIOS如何安装PWA到桌面的详细步骤,阐述了如何配置PWA,使其方便地安装到桌面上。

下一篇文章中,主要讲述Service WorkerPWA实践中的重要能力:Web Push

点赞 1
收藏
评论
登录 后发表内容