Web App Manifest 详解及实践

阅读时长 9 分钟读完

随着移动互联网的快速发展，Web App（即基于网页的应用程序）的使用也越来越广泛。Web App Manifest 就是服务于 Web App 的一种新的技术标准，可以帮助开发者将 Web App 包装成一个本地应用程序，提升用户体验和使用流畅度。本文将对 Web App Manifest 进行详解，并介绍如何在实践中应用。

什么是 Web App Manifest

Web App Manifest 可以被理解为一个 JSON 文件，其中包括应用程序的配置、图标、启动方式等信息。它可以让浏览器捕获这些信息，并在使用者将应用程序添加到主屏幕时提供一个类似于本地应用程序的体验。

一个最基本的 Manifest 文件实例如下：

-- -------------------- ---- -------
-
  ------- ---- --- -------- ------
  ------------- --------- ------
  ------------ ----
  ---------- -------------
  ------------------- ----------
  -------------- ----------
  -------- -
    -
      ------ -----------------------------------------------
      -------- ----------
      ------- -----------
    --
    -
      ------ -----------------------------------------------
      -------- ----------
      ------- -----------
    -
  -
-

其中，name 是应用程序的名称，short_name 是应用程序的简称，start_url 是应用程序的起始 URL，display 则定义了应用程序如何显示，可以有以下几个值可选：

  • fullscreen：应用程序使用全屏模式展示；
  • standalone：应用程序使用独立模式展示，没有浏览器的 UI 元素；
  • minimal-ui：应用程序使用最小化的 UI 元素展示；
  • browser：应用程序作为普通网页在浏览器里展示。

background_color 则是应用程序的背景颜色，theme_color 是应用程序的主题颜色，icons 是应用程序的图标，指定了多组适应不同分辨率的图标。

Web App Manifest 还支持其它更复杂的配置，如指定 scope、categories 等信息。

Web App Manifest 的作用

Web App Manifest 的主要作用就是为 Web App 提供一个本地应用程序的体验。有了 Manifest 文件，当用户将一个应用程序添加到手机或电脑的主屏幕时，相当于安装了一个本地应用程序。用户就不需要打开浏览器、输入网址等繁琐的操作，只需要像打开一个本地应用程序一样打开即可，这大大提升了用户的使用体验。

同时，Web App Manifest 还可以为应用程序提供更多的功能和配置选项，如：

  • 通知；
  • 推送；
  • 后台同步；
  • 加速启动速度；
  • 在离线环境下使用等。

正因为如此，Web App Manifest 被称为“超级 PWA（Progressive Web App）”。

如何实现 Web App Manifest

要实现 Web App Manifest，需要完成以下几个步骤：

1. 在 HTML 文件中添加 Manifest 配置

在 HTML 文件中加入以下配置：

其中，rel 指定一个表示链接类型的属性，它定义了当前文档和被链接文档之间的关系；href 表示 Manifest 文件的 URL。

2. 编写 Manifest 文件

如上面的代码示例所示，可以按照实际需求来指定 Manifest 文件中的配置。注意，这里的图标 URL 应该以相对路径指定，而非绝对路径。

3. 站点必须支持 HTTPS

在 HTTPS 网站上，Web App Manifest 文件能够缓存且离线加载。

4. 将应用程序添加到主屏幕

当用户访问了您的应用程序并且 Manifest 文件已经生效时（即显示了一条短语句“添加到主屏幕”），他们就可以点击“添加到主屏幕”按钮。此时，该应用程序将被添加到手机或电脑的主屏幕上。当用户单击该应用程序图标时，将触发离线 Service Worker，此时应用程序就可以在离线环境下进行访问。

实践应用

以下我们将以一个简单的示例来展示如何实践应用 Web App Manifest。假设我们要开发一个提供天气预报信息的 Web App。

首先，我们需要在 HTML 文件中尝试添加 Manifest 配置：

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- ----------------
    ----- --------------- -----------------------------------------------
    -------------- -----------
    ----- ---------- --------------------
    ----- -------------- ----------------------
  -------
  ------
    ---- ------- ---
  -------
-------

然后，我们需要为 Web App 编写一个 Manifest 文件：

-- -------------------- ---- -------
-
  ------- -------- -----
  ------------- -------- -----
  -------------- -- ------- ----------- ---- ----- --- --- ------------ ------ -- ----- ---- ----- --- ---- --- ---- ------- -----------
  ------------ ---------------
  ---------- -------------
  ------------------- ----------
  -------------- ----------
  -------- --
    ------ ------------------------------
      -------- --------
      ------- -----------
    --
    -
      ------ ------------------------------
      -------- --------
      ------- -----------
    ---
      ------ --------------------------------
      -------- ----------
      ------- -----------
    ---
      ------ --------------------------------
      -------- ----------
      ------- -----------
    ---
      ------ --------------------------------
      -------- ----------
      ------- -----------
    ---
      ------ --------------------------------
      -------- ----------
      ------- -----------
    -
  --
  ------- --------
  ------ ------
  -------------- ------
  -------- ----
  ------------- ------------
  ---------------- -
    ------ ----------------------
    -------- ---
  -
-

这个文件指定了应用程序的名称、简称、描述、启动地址、主题颜色、图标、语言、方向以及 Service Worker 等相关信息。接下来，我们需要编写 Service Worker 脚本。

-- -------------------- ---- -------
--- ---------- - ------------------
--- ----------- - -
  -----
  ---------------------
  --------------------
  --------------------------------
  --------------------------------
  ----------------------------------
  ----------------------------------
  ----------------------------------
  ---------------------------------
--

-------------------------------- --------------- -
  ----------------
    -----------------------
      --------------------- -
        ------ --------------------------
      --
  --
---

------------------------------ --------------- -
  ------------------
    ---------------------------
      ------------------------ -
        -- ---------- -
          ------ ---------
        -
        ------ ---------------------
      --
  --
---

其中，’CACHE_NAME‘ 可以定义为任意值。代码将静态文件缓存到本地，以避免加载时间较长。

最后，我们还需要在应用程序的主要 JavaScript 文件中注册 Service Worker。

-- -------------------- ---- -------
-- ---------------- -- ---------- -
    -------------------------------------------------------
        ---------------------------- -
            ------------------------- ----------- ----- ----- --------------------
        --
        ---------------------- -
            -------------------- ------ ------------ ------- -------- -------
        ---
-

总结

通过本文对 Web App Manifest 的详细介绍，我相信大家已经掌握了这一技术并了解了其在开发中的应用场景。使用 Web App Manifest 可以将网页应用程序变成具有本地应用程序的体验，给用户带来更舒适的使用感受。当然，Manifest 文件的编写和实践应用还需深入了解和学习，期待读者通过进一步学习和实践，可以更好地应用 Web App Manifest，开发出更为优秀的网页应用程序。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483163848841e989427e059

纠错
反馈
相关推荐
精选内容