manifest

  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"

}