manifest.json文件指南 | 网络应用程序清单

迪鲁宾
773 阅读3分钟

在这篇博文中，我们将学习网络应用程序清单--manifest.json文件的实例与教程。

网络应用程序清单--manifest.json文件

网络应用程序清单是一个JSON文件，其中包括网络应用程序的元数据。它告诉浏览器，当应用程序安装在移动或桌面设备上时，用户界面应该是什么样子。

manifest.json也被称为manifest.webmanifest。这也可用于渐进式网络应用程序，将网络应用程序视为本地应用。

在chrome等浏览器中，需要使用manifest文件来启用add to home screen prompt feature

以下应用程序类型可以添加 manifest.json 文件:

  • 网络应用程序或桌面
  • 移动应用程序
  • 渐进式网络应用程序 PWA
  • Chrome扩展应用

manifest json文件 支持以下浏览器和设备:

  • 火狐浏览器
  • 浏览器
  • Safari
  • 安卓应用
  • IOS应用程序

manifest.json文件包含名称、图标和启动网址等基本信息的键和值，以及方向和显示等高级信息。

属性

以下是不同的应用程序属性

参数说明
名称一个应用程序的名称
短名称网络应用程序的短名称，显示给使用桌面或手机的用户。
描述一个应用程序的描述
作者应用程序的作者
版本应用程序版本
图标为一个应用程序指定的图标，它是一个json对象，包含src、大小和类型
主题色主题颜色代码，将显示在手机上
start_url它是一个应用程序的主页网址
背景色在安卓或IOS手机应用中启动应用程序时作为闪屏的背景颜色。
显示应用程序如何显示在浏览器上，数值为standalone,fullscreen 。minimul-ui
方向应用程序的默认方向landscape 或portrait
范围应用程序的进入和退出路径

name,short_name 和description 是 manifest.json 的必填字段。其余字段为选项

  • name:- 应用程序名称，在用户主屏幕上显示该值
  • short_name:- 应用程序的简短名称。这将在安装添加到主屏幕功能时显示。
  • icons- 这些是在应用程序安装、添加到主屏幕、闪屏中使用的图标 。 这将包含一个图像集合，当用户将网站添加到主屏幕时，将显示这些图像。
  • start_url这将是应用程序启动时的默认URL。应用启动时的登陆页面
  • theme_color- 这是应用程序工具条的颜色 background_color 这指定了闪屏的颜色
  • Display- 指定应用程序启动时的显示方式，数值为全屏、独立、最小化、浏览器 Orientation - 应用程序的方向模式 - 横向或纵向

manifest.json样本文件示例下载

以下是 manifest.json 或 manifest.webmanifest 示例文件。

   
{  
  "name": "Todo PWA Application",  
  "short_name": "Todo",  
  "description": "To Do Progressive web application.",  
  "start_url": "./index.html?home=true",  
  "icons": [  
    {  
      "src": "/icons/todo-36.png",  
      "sizes": "36x36",  
      "type": "image/png"  
    },  
    {  
      "src": "/icons/todo-48.png",  
      "sizes": "48x48",  
      "type": "image/png"  
    },  
    {  
      "src": "/icons/todo-512.png",  
      "sizes": "512x512",  
      "type": "image/png"  
    }  
  ],  
  "theme_color": "#111111",  
  "background_color": "#DDDDDDD",  
  "display": "fullscreen",  
  "orientation": "portrait"  
}

我们可以使用 HTML 网页的链接标签将 manifest.json 文件包含在头部。这将向浏览器介绍 manifest.json。

href属性包含文件路径。

通常 manifest.json 或 manifest.webmanifest 文件位于应用程序的根目录下。

您还可以选择将manifest.webmanifest

manifest json文件在应用程序中提供了以下功能

  • 应用程序元数据信息，如名称、图标和start_url等。
  • 添加到主屏幕的功能
  • Spalsh屏幕细节
  • 应用程序安装提示信息 隐私和内容指南 权限细节
  • 安装和卸载事件
  • 应用程序的显示和方向 配置细节

结论

总而言之，清单是配置你的应用程序的重要步骤，这将有助于它在桌面、浏览器或手机上如何显示给用户。这是一个重要的步骤，在渐进式网络应用程序中加入这一点。

avatar
文章
阅读
粉丝