WebApp 之 manifest.json

1. 簡述

manifest.json 用于提供應用程序相關描述的文件(名稱,作者,圖標和描述)

2. 如何使用

在HTML頁面的頭部,引入一個鏈接

<link rel="manifest" href="/manifest.json">

3. 基礎案例

{
  "start_url": "/",
  "name": "MyApp",
  "short_name": "MyApp",
  "icons": [
      {
          "src": "./icons/apple-touch-icon-180x180.png",
          "type": "image/png",
          "sizes": "180x180"
      },
      {
          "src": "./icons/apple-touch-icon-152x152.png",
          "type": "image/png",
          "sizes": "152x152"
      }
        // ...其他尺寸192、512
  ],
  "display": "standalone",
  "background_color": "#1b2740",
  "theme_color": "#1b2740"
}

4. 屬性介紹

只介紹部分常用的屬性

  • name

    WebApp的名稱。

    用戶保存WebApp到桌面時,將作為App的名稱。

  • short_name

    為應用程序提供簡短易讀的名稱。 這是為了在沒有足夠空間顯示Web應用程序的全名時使用。

    "short_name": "I/O 2017"
    
  • icons

    應用程序圖標。

    用戶保存WebApp到桌面時,根據適配,將作為App的圖標

"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"
  }
]
字段 描述
sizes 包含空格分隔的圖像尺寸的字符串。
src 圖像文件的路徑。 如果src是一個相對URL,則基本URL將是manifest的URL。
type 提示圖像的媒體類型。此字段的目的是允許用戶代理快速忽略不支持的媒體類型的圖像。
  • start_url

    啟動WebApp時,默認進入的URL。

    "start_url": "/home"
    
  • theme_color

    定義應用程序的默認主題顏色。

    修改電量/信號欄 背景顏色(需要瀏覽器支持)

    "theme_color": "aliceblue"
    
  • background_color

    web應用程序預定義的背景顏色。

    啟動web應用程序和加載應用程序的內容之間創建了一個平滑的過渡。

    "background_color": "red"
    
  • description

    Web應用程序的描述。

    "description": "這是一個WebApp"
    
  • display

    顯示方式

    "display": "standalone"
    
    fullscreen 全屏顯示, 所有可用的顯示區域都被使用, 并且不顯示狀態欄 standalone
    standalone 讓這個應用看起來像一個獨立的應用程序,包括具有不同的窗口,在應用程序啟動器中擁有自己的圖標等。這個模式中,用戶代理將移除用于控制導航的UI元素,但是可以包括其他UI元素,例如狀態欄。 minimal-ui
    minimal-ui 該應用程序將看起來像一個獨立的應用程序,但會有瀏覽器地址欄。 樣式因瀏覽器而異。 browser
    browser 該應用程序在傳統的瀏覽器標簽或新窗口中打開,具體實現取決于瀏覽器和平臺。 這是默認的設置。

5. 其他資料

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 說到養娃,每個老母親都要掬一把辛酸淚。出廠忘記配置說明書的娃,配上隊友神助攻,簡直就是呵呵噠。 突然想到之前看過的...
    花生麻麻是花花閱讀 297評論 0 0
  • 上海終于有了冬天的味道。連日來的大雨讓溫度變得愈加的寒冷。這么冷的天,出門的注定都是真愛。 今天去看了一部計劃外的...
    暁猴紙閱讀 176評論 0 0
  • 女主角:林清挽 男主角:楊軒晨 楊薛晨軍隊中的上校而女主角林清挽是一位醫生!女主角是在一次游樂場事件與男主角相遇,...
    風殤月雪夢閱讀 137評論 0 0
  • 反思日志0728周五 晴 6:00起床 23:00睡覺 運動:(重點關注右側大腿,髂腰肌及骶髂關節的拉伸放松,最終...
    娟妹紙李娟閱讀 187評論 0 0
  • 地上的紫薇被碾碎得嫣紅 天空里飄晃的仍在叱咤 世界與我隔了層玻璃 哪個是善哪個是美
    萬金油VankimYoo閱讀 289評論 0 0