本文是PWA 技术学习与实践系列的第二篇文章.
PWA 作为今年最火热的技术概念之一, 对提升 web 应用的安全, 性能和体验有着很大的意义, 非常值得我们去了解与学习.
本系列文章PWA 技术学习与实践会逐步拆解 PWA 背后的各项技术, 通过实例代码来讲解这些技术的应用方式. 也正是因为 PWA 中技术点众多, 知识细碎, 因此我在学习过程中, 进行了整理, 并产出了PWA 技术学习与实践系列文章, 希望能带大家全面了解 PWA 中的各项技术. 对 PWA 感兴趣的朋友欢迎关注.
本文中的代码都可以在 learning-pwa 的 manifest 分支 https://github.com/alienzhou/learning-pwa/tree/manifest 上找到(git clone 后注意切换到 manifest 分支).
1. 引言
我们知道, 在 chrome(等一些现代浏览器)中, 你可以将访问的网站添加到桌面, 这样就会在桌面生成一个类似 "快捷方式" 的图标, 当你点击该图标时, 便可以快速访问该网站(Web App). 我们以第一篇文章中的 demo 为例, 其添加到桌面后以及重新打开时的状态如下:
普通 Web App 被添加到桌面后的展示形式
然而, 对于 PWA 来说, 有一些重要的特性:
Web App 可以被添加到桌面并有它自己的应用图标;
同时, 从桌面开启时, 会和原生 app 一样有它自己的 "开屏图";
更进一步的, 这个 Web App 在的样子几乎和原生应用一样 -- 没有浏览器的地址栏, 工具条, 似乎和 Native App 一样运行在一个独立的容器中.
就像下面这样:
PWA 被添加到桌面后的展示形式
接下来, 我们会基于该系列 --PWA 技术学习与实践的前一篇2018, 开始你的 PWA 学习之旅中所提及的一个普通 Web App 的 demo 来进行改造, 来实现 PWA 的这一效果. 或者直接从 github clone learning-pwa( https://github.com/alienzhou/learning-pwa/tree/master )这个仓库也可以. 切换到 manifest 分支, 即可看到本文的最后成果.
2. Web App Manifest
Manifest 是一个 JSON 格式的文件, 你可以把它理解为一个指定了 Web App 桌面图标, 名称, 开屏图标, 运行模式等一系列资源的一个清单.
manifest 的目的是将 Web 应用程序安装到设备的主屏幕, 为用户提供更快的访问和更丰富的体验. -- MDN
我们来看一下, learning-pwa 中的 https://github.com/alienzhou/learning-pwa/blob/manifest/public/manifest.json 文件内容
- {
- "name": "图书搜索",
- "short_name": "书查",
- "start_url": "/",
- "display": "standalone",
- "background_color": "#333",
- "description": "一个搜索图书的小 WebAPP(基于豆瓣开放接口)",
- "orientation": "portrait-primary",
- "theme_color": "#5eace0",
- "icons": [{
- "src": "img/icons/book-32.png",
- "sizes": "32x32",
- "type": "image/png"
- }, {
- "src": "img/icons/book-72.png",
- "sizes": "72x72",
- "type": "image/png"
- }, {
- "src": "img/icons/book-128.png",
- "sizes": "128x128",
- "type": "image/png"
- }, {
- "src": "img/icons/book-144.png",
- "sizes": "144x144",
- "type": "image/png"
- }, {
- "src": "img/icons/book-192.png",
- "sizes": "192x192",
- "type": "image/png"
- }, {
- "src": "img/icons/book-256.png",
- "sizes": "256x256",
- "type": "image/png"
- }, {
- "src": "img/icons/book-512.png",
- "sizes": "512x512",
- "type": "image/png"
- }]
- }
可以看出, 上面的 JSON 配置文件非常直观, 通过声明各个属性的值, 即可改造我们的 Web App. 那么下面就针对每个具体值进行简单的介绍.
2.1. name, short_name
指定了 Web App 的名称. short_name 其实是该应用的一个简称. 一般来说, 当没有足够空间展示应用的 name 时, 系统就会使用 short_name. 可以看到本文的例子中, 图书搜索这个应用在桌面上展示的名称就是 short_name 书查.
2.2. start_url
这个属性指定了用户打开该 Web App 时加载的 URL. 相对 URL 会相对于 manifest. 这里我们指定了 start_url 为 /, 访问根目录.
2.3. display
display 控制了应用的显示模式, 它有四个值可以选择: fullscreen,standalone,minimal-ui 和 browser.
fullscreen: 全屏显示, 会尽可能将所有的显示区域都占满;
standalone: 独立应用模式, 这种模式下打开的应用有自己的启动图标, 并且不会有浏览器的地址栏. 因此看起来更像一个 Native App;
minimal-ui: 与 standalone 相比, 该模式会多出地址栏;
browser: 一般来说, 会和正常使用浏览器打开样式一致.
让我们来看下这四种模式的差异:
display 四种模式的差异
当然, 不同的系统所表现出的具体样式也不完全一样. 就像示例中的虚拟按键在 fullscreen 模式下会默认隐藏.
2.4. orientation
控制 Web App 的方向. 设置某些值会具有类似锁屏的效果(禁止旋转), 例如例子中的 portrait-primary. 具体的值包括:
- any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary
- .
- 2.5. icons, background_color
icons 用来指定应用的桌面图标. icons 本身是一个数组, 每个元素包含三个属性:
sizes: 图标的大小. 通过指定大小, 系统会选取最合适的图标展示在相应位置上.
src: 图标的文件路径. 注意相对路径是相对于 manifest.
type: 图标的图片类型.
需要指出的是, 我一直提的 "开屏图" 其实是背景颜色 + 图标的展示模式(并不会设置一张所谓的开屏图).background_color 是在应用的样式资源为加载完毕前的默认背景, 因此会展示在开屏界面. background_color 加上我们刚才定义的 icons 就组成了 Web App 打开时的 "开屏图".
2.6. theme_color
定义应用程序的默认主题颜色. 这有时会影响操作系统显示应用程序的方式(例如, 在 Android 的任务切换器上, 主题颜色包围应用程序). 此外, 还可以在 meta 标签中设置 theme_color:
- <meta name="theme-color" content="#5eace0"/>
- 2.7. description
这个字段的含义非常简单, 就是一段对该应用的描述.
3. 使用 Manifest
- <meta name="apple-mobile-web-app-title" content="AppTitle">
- apple-mobile-web-app-capable
- <meta name="apple-mobile-web-app-capable" content="yes">
- apple-mobile-web-app-status-bar-style
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="default">
- <meta name="apple-mobile-web-app-title" content="图书搜索">
- <link rel="apple-touch-icon" href="img/icons/book-256.png">
- <meta name="application-name" content="图书搜索" />
- <meta name="msapplication-TileColor" content="#222">
- <meta name="msapplication-square70x70logo" content="img/icons/book-72.png" />
- <meta name="msapplication-square150x150logo" content="img/icons/book-144.png" />
- <meta name="msapplication-square310x310logo" content="img/icons/book-256.png" />
来源: http://www.jianshu.com/p/ddd59c6b29e8