PWA笔记四：Web App Manifest 介绍

Brandonxiang NOV 5, 2019

首先，在 vue 的初始化 webpack 项目中存在 manifest.js，这个文件更多是静态脚本的代码指纹。但是它和 PWA 的 Web App Manifest 是两个概念。下面是 webkit.org 对它的定义。

A JSON-format manifest file for developers to place metadata associated with a web application. Web App Manifest 是用 json 格式文件来配置网页应用。

网页应用需要配置哪些方面？

PWA 指的是网页应用，Web App Manifest 主要针对的是单页面应用而言，包含了应用名字，图标，起始路径。如今最新版本的 ios 和 Android 都已经支持 Web App Manifest，用户可以把网页应用直接“留在”手机桌面上，它就像小程序后台一样注册你的应用信息。手机操作系统会根据你提供的信息，帮你注册这款网页应用到收集当中，以后会把该应用也可能出现在对应的 appStore。

{
  "background_color": "#ffffff",
  "theme_color": "#333333",
  "name": "Brandon's Blog",
  "short_name": "Brandon's Blog",
  "description": "A Web Developer's Blog",
  "display": "standalone",
  "start_url": "/",
  "scope": "/",
  "icons": [
    {
      "src": "logo-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "share_target": {
    "action": "compose/share",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    },
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded"
  },
  "prefer_related_applications": false
}

通过这个 manifest，app 的名字和图标可以被设置（其中还包括分享模块）。该manifest.json需要在页面 header 被引入，service-worker 会控制它的缓存机制。

<!-- 在html头部引入manifest.json -->
<link rel="manifest" href="../static/manifest.json" />

Chrome 的支持

最新版本的 chrome 能够支持桌面级别的 pwa 应用，当它检测到该页面是 pwa 时，地址栏处会出现一个加号，可以将 pwa 安装至电脑本地。它正如一个 app 般存在于你的电脑里。

IOS 的支持

最新版本的 IOS 也对 pwa 应用有着最新的支持，能够对status-bar或者苹果应用图标有特殊的设置，此处，IOS 并没有取 manifest 中的 icon，需要对apple-touch-icon进行设置。

此处注意下对 iPhoneX 刘海屏的样式支持，此处采用viewport-fit的属性进行最简单的设置，具体复杂的适配方案不在这里展开。

<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="Brandon's Blog" />
<meta
  name="viewport"
  content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=contain"
/>
<link rel="apple-touch-icon" href="icon/appicon.png" />