11

Service Worker学习与实践（二）——PWA简介

 3 years ago
source link: https://zhuanlan.zhihu.com/p/57225063
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Service Worker学习与实践（二）——PWA简介

这周，Chrome 70正式版本发布，Progressive Web Apps（PWA）已经正式支持到Windows 10平台，然而，早在前几个版本之前，Chrome就已经通过chrome://flags支持开启实验性的功能，早就支持在Windows 10平台上安装Progressive Web Apps（PWA）。谷歌表示安装在桌面的网页应用使用体验非常接近于本地应用，并且应用的服务商可以缓存所有资源因此这些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 App和Native App的优点。

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

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

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

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

总的说来，只要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_name和name。此外，最好设定好start_url，表示启动的根页面路径，如果不添加，则是使用当前路径。

display为standalone，则会隐藏浏览器的UI界面，如果设置display为browser，则启动时保存浏览器的UI界面。

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

background_color和theme_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与上述方法类似，这里就不做过多阐述

移动端（以`IOS`为例）

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

<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了！

IOS在11.3版本之后也支持PWA了，知道这一消息的我，卸载了手机上很多软件，立刻体验上了PWA。

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

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

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

小结

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

下一篇文章中，主要讲述Service Worker在PWA实践中的重要能力：Web Push。

文章最后，打个广告：腾讯医疗部门招前端工程师啦，HC无限多，社招、校招均可内推。如果有想来腾讯的小伙伴，可以添加我的微信：xingbofeng001，如果有想交朋友、交流技术的小伙伴也欢迎添加我的微信~


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK