【PWA】Manifest

╰半夏微凉° 2022-06-03 08:47 216阅读 0赞

`manifest` 文件我们以前在做富应用缓存时用到过，那时候的用法是用来缓存网页上的一些资源。即：

<!DOCTYPE HTML>
    <html manifest="demo.appcache"> ... </html>

使用这种方式来进行离线缓存。我们参考一下里面的具体内容：

CACHE MANIFEST
    # 2012-02-21 v1.0.0
    /theme.css
    /logo.gif
    /main.js
    
    NETWORK:
    login.asp
    
    FALLBACK:
    /html5/ /404.html

大致就是上面这样的，不过在 WebApp 中的 manifest 可以说，完全不是一回事。接下来，我们来看一下 WebApp manifest 的相关内容。

## 干嘛的？ ##

现在 PWA 越来越流行，我们 Web 开发方式也越来越好了。而 manifest 就是 PWA 概念的一环，用来将我们的应用添加到桌面上。mainfest 通过一些文本描述，具体定义显示到桌面上的内容。

使用方法如下：

这就和以前用来作为缓存使用 manifest 区别开来，这里，`manifest` 只是作为一个配置文件使用。

具体内容：

{
      "dir": "ltr",
      "lang": "zh-cn",
      "name": "villianHR个人首页",
      "scope": "/",
      "display": true,
      "start_url": "/",
      "short_name": "villianHR个人首页",
      "theme_color": "black",
      "description": "blog_entry page: /index.html",
      "orientation": "any",
      "background_color": "transparent",
      "related_applications": [],
      "prefer_related_applications": false,
      "icons": [
        {
          "src": "https://www.villainhr.com/favicon.ico",
          "type": "image/png",
          "sizes": "128x128"
        },
        {
          "src": "http://villainhr.com/apple-icon.png",
          "type": "image/png",
          "sizes": "128x128"
        }
      ]
    }

上面是一个整体的内容，使用上面的内容，就可以添加到你的左面，并且可以看到指定的 title 和 icon。不过，大家对上面的相关字段可能会有些迷茫，这里我们来简单介绍一下。

## 字段说明 ##

mainfest 的文件格式大家理解为 JSON 即可。相关字段我们从重要到可选进行介绍。

### name ###

当 Web 添加到桌面后，会出现的 icon 和 name。`name` 就是用来定义桌面上显示的名字：

name:"个人博客-villainhr"

不过，如果你的名字取的太长，大于 icon 的宽度，可能会造成显示上的问题。所以，这里还有另外一个 `short_name` 用来当宽度不够时，显示的精简版字体。

### short\_name ###

上面提到过，是用来显示精简版的名字。

short_name:博客HR

### display ###

定义 web 在打开时使用哪种预览模式。这里主要有 4 种：

*  fullscreen：全屏。所有可用的区域都可以被排列，目前该特性还未被完全支持。
 *  standalone：当做一个独立应用。该模式是忽略掉浏览器本身的一些导航栏。不过，它可以进行下拉刷新。
 *  minimal-ui：该模式的外观和 `standalone` 差不多，不过它会提供用来控制 `navigator`的最小 UI。不支持
 *  browser：使用默认浏览器模式。

其中 `standalone` 和 `browser` 的具体区别如下：

![image\_1b9uqba6lsj64v1stlcrata89.png-171.5kB][image_1b9uqba6lsj64v1stlcrata89.png-171.5kB]

不过，后面我们可以通过一些 [CSS][] 样式来自定义 `navigator` 的显示。

### icons ###

用来定义 WebAPP 在桌面上显示的具体 ICON。基本格式为：

"icons": [
      {
        "src": "icon/lowres.webp",
        "sizes": "48x48",
        "type": "image/webp"
      },
      {
        "src": "icon/lowres",
        "sizes": "48x48"
      },
      {
        "src": "icon/hd_hi.ico",
        "sizes": "72x72 96x96 128x128 256x256"
      },
      {
        "src": "icon/hd_hi.svg",
        "sizes": "72x72"
      }
    ]

icons 是一个数组，里面可以放入不同大小/类型的 icon。每个 icon 对象有 3 个字段：

*  src：图片的下载路径。如果是相对路径，则是相对于当前 manifest 的路径
 *  sizes: 用来规定 Icon 的尺寸。并且可以给一张 Icon 设置多个尺寸值，中间使用 `空格` 分开。
 *  type: 用来代表图片的类型。

### scope ###

用来定义 WebAPP 作用域，即，如果你 Web 是分多端进行开发（PC，手机），假如，你把手机端放到 `/mobileApp/` 的路径下，而 PC 你是直接放在根域名的。那么为了区分哪一部分能够使用 WebAPP 的形式预览，你就可以使用 `scope` 来定义有效路径。

"scope": "/mobileApp/"

### start\_url ###

用来定义当 WebAPP 打开时的 URL 连接。如果是相对链接，则，相当于 `manifest` 文件所在的路径。

"start_url": "./?utm_source=web_app_manifest"
    
    // 使用绝对路径
    
    "start_url": "/?webapp_mode"

### orientation ###

用来显示 WebAPP 打开的默认方向，最常用的有 3 个值：

*  any：默认系统方向（默认值）
 *  landscape：采用横屏
 *  portrait：采用竖屏

### background\_color ###

该是用来设置 `splash screen` 的背景颜色。`splash screen` 我们等下回详细描述，先看下基本的这个属性 `background_color`。

// 将背景设置为 红色
    "background_color": "red"

### theme\_color ###

如果你采用的是 `browser` 模型来阅览网页，那么，设置 theme\_color 可以显示的改变 `navigator bar` 的颜色值。

"theme_color": "red"

另外，还有一些其他的属性，比如：`lang`，`dir`，`related_application`等。我这里就不过多赘述，有兴趣的可以查看一下：[MDN links][]

## splash screen ##

在正式说明 manifest 和 `splash screen` 之间的关系时。首先，我们需要了解一下什么叫做 `splash screen`。中文翻译，我们可以简单的了解为 `过渡屏`。也就是，当你的 Service Worker 正在打开，或者资源正在加载的时候，`splash screen` 就可以起到一个过渡的作用，来缓解用户的等待情绪。

如何使用 `splash screen` 主要和 manifest 定义的几个字段有关：`icons`，`background_color`，`name`。一个简单 splash screen 的样板可以参照：

![image\_1b9v4q02pcqj127iu4k199a1r5f12.png-17.9kB][image_1b9v4q02pcqj127iu4k199a1r5f12.png-17.9kB]

所以，根据上图，我们可以了解到 `splash screen` 所需的几个基本的内容，Icon，name，background\_color。 其中 icon 需要是接近 128dpi 的图片才行。

那么，大致的过程为：

![image\_1b9v8lf4p1qh8u73bp41n541tfi1f.png-27.1kB][image_1b9v8lf4p1qh8u73bp41n541tfi1f.png-27.1kB]

## banners 的弹出 ##

如果你网站使用的是 PWA，那么，在使用 Chrome 或者相关浏览器的时候，你会遇到浏览器默认的 banner 弹窗–请求将你的网页添加到桌面上。例如：

![image\_1b9vab8jffea1ft4ilp1lcq14oo1s.png-16.3kB][image_1b9vab8jffea1ft4ilp1lcq14oo1s.png-16.3kB]

不过，并不是所有的网页都有这样的权利可以享有添加到桌面上的优势。一般而言会有些前提条件（让你的网页拥有更好的体验）

*  manifest 的必备字段。`name`,`background_color`,`icons`等。
 *  service worker
 *  HTTPS
 *  使用频率很高

在具备上面基本条件之后，我们就可以对 `app install banner` 进行相关的优化。

如果一上来就提示 `add to desktop` 的话，会让用户有种被 `rape` 的感觉，所以，官方默认标准提供了一些列控制事件–`beforeinstallprompt`。

我们可以通过，choiceResult 中自带的相关属性（outcome 有两个取值：“dismissed” || “accepted”），来探知用户是否允许添加到桌面。不过，为了更好的交互性，我们一般会选择在合适的时候，提醒用户是否接受弹窗。例如，根据某个 Btn 来决定是否启用弹窗：

var deferredPrompt;
    
    window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      e.preventDefault();
    
      deferredPrompt = e;
    
      return false;
    });
    
    btnSave.addEventListener('click', function() {
      if(deferredPrompt !== undefined) {
        deferredPrompt.prompt();
    
        deferredPrompt.userChoice.then(function(choiceResult) {
    
          console.log(choiceResult.outcome);
    
          if(choiceResult.outcome == 'dismissed') {
          // 拒绝添加
            console.log('User cancelled home screen install');
          }
          else {
            console.log('User added to home screen');
          }
    
          // 不在提醒
          deferredPrompt = null;
        });
      }
    });

或者，如果你的 Web 只是想作为引流，而不想在桌面上添加相关的 ICON 时，可以直接取消提醒：

window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      e.preventDefault();
      return false;
    });

另外，还有一种更彻底的引流方式。可以直接在当前 Web 页面提示下载。不过，要想达到这样结果，有几点条件需要具备：

*  manifest 文件
    
     *  short\_name
     *  name 用在 prompt 中的名字
     *  icon 里面需要有 144\*144 大小的图片。并且类型为 `image/png`。
     *  related\_applications 必须
 *  HTTPS
 *  用户重新访问

之后，我们需要在 `related_applications` 设置好相关参数：

"related_applications": [
      {
      "platform": "play",
      "id": "com.google.samples.apps.iosched"
      }
    ]

此外，如果你不想提示而是静默下载（系统也会默认提示），可以添加 `prefer_related_applications` 参数。

"prefer_related_applications": true,
    "related_applications": [
      {
      "platform": "play",
      "id": "com.google.samples.apps.iosched"
      }
    ]

## manifest debugger ##

manifest 怎么进行测试呢？Chrome 浏览器已经提供给我们一些方法和手段，直接进入 `Application` 板块，选择 `manifest` 选项卡，即可，将它添加到 Chrome 应用中。

![image\_1b9vmt6tj6bda77oeu2rn1ler2i.png-64.9kB][image_1b9vmt6tj6bda77oeu2rn1ler2i.png-64.9kB]

然后，我们只要关注一下控制台即可。

## manifest 更新 ##

manifest 文件的更新，大家需要注意，一旦用户已经将你的 Icon 添加到桌面，那么它的 manifest 文件将不能被更新，除非重新添加到桌面。

[image_1b9uqba6lsj64v1stlcrata89.png-171.5kB]: /images/20220603/6bbf6083393d4fc7b3d619661e23fd37.png
[CSS]: https://developer.mozilla.org/docs/Web/CSS/@media/display-mode
[MDN links]: https://developer.mozilla.org/en-US/docs/Web/Manifest#theme_color
[image_1b9v4q02pcqj127iu4k199a1r5f12.png-17.9kB]: /images/20220603/59b83a6c696946beaee6d0c024fa3159.png
[image_1b9v8lf4p1qh8u73bp41n541tfi1f.png-27.1kB]: /images/20220603/be814db150fd47e5ba2c1c403cd9827d.png
[image_1b9vab8jffea1ft4ilp1lcq14oo1s.png-16.3kB]: /images/20220603/1b76e9443a174d08bce4a6568bad41e4.png
[image_1b9vmt6tj6bda77oeu2rn1ler2i.png-64.9kB]: /images/20220603/a3e96fc00b434b4e9c702e2c8bf77803.png

【PWA】Manifest

发表评论取消回复

还没有评论，来说两句吧...

相关阅读