0
点赞
收藏
分享

微信扫一扫

manifest

陬者 2022-03-14 阅读 70

  manifest

使用步骤

 1 新建一个 manifest.json 文件

 2 在 index.html 引入  manifest.json 文件

 3 在 manifest.json 文件中提供常见的配置

 4 需要在 https 协议或者 http://localhost 下访问项目


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


配置地址:

https://developer.mozilla.org/zh-CN/docs/Web/Manifest



name: 应用的名称,启动画面的文字

short_name: 短名称

start_url: 启动页加载的URL,可以是绝对路径和相对路径 => 'index.html'

icons: 应用图标 144*144

   "icons": [{

       "src": "images/touch/homescreen48.png",

       "sizes": "48x48",

       "type": "image/png"

   }, {

       "src": "images/touch/homescreen72.png",

       "sizes": "72x72",

       "type": "image/png"

   }, {

       "src": "images/touch/homescreen96.png",

       "sizes": "96x96",

       "type": "image/png"

   }, {

       "src": "images/touch/homescreen144.png",

       "sizes": "144x144",

       "type": "image/png"

   }, {

       "src": "images/touch/homescreen168.png",

       "sizes": "168x168",

       "type": "image/png"

   }, {

       "src": "images/touch/homescreen192.png",

       "sizes": "192x192",

       "type": "image/png"

   }],

background_color: 应用的背景色

theme_color:  主题颜色

display: 指定显示模式

        fullscreen 全屏显示 没有导航头部

        standalone 让这个应用看起来更像是一个独立的应用程序, 推荐配置这个

        minimal-ui  浏览器会显示地址栏


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


{

   "name":"豆瓣APP-PWA",

   "short_name": "豆瓣APP",

   "start_url":"/index.html",

   "icons":[

       {

           "src": "images/1.png",

           "sizes": "144x144",

           "type": "image/png"

       }

   ],

   "background_color":"skyblue",

   "theme_color":"yellow",

   "dislplay": "standalone"

}

举报

相关推荐

0 条评论