Pwa ( 将Web页面添加到桌面 ）

效果 （谷歌下 在地址栏将出现下载按钮）

1. 根目录创建 manifest.json 文件夹

在 manifest.json 内 进行代码基本配置

值得注意的是 "icons" 配置项 也就是生成桌面应用之后的图标 必须大于 144x144

{
    "name":"TestWork",
    "display":"standalone",
    "start_url":"./index.html",
    "background_color": "#999",
    "theme_color":"#292d3e",
    "icons":[{
        "src":"./image/icon.png",
        "sizes":"144x144",
        "type":"image/png"
    }]
}

 2. 主文件 引入 manifest.json

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

3. 可书写javaScript 来自己操作下载

// 下载按钮
let installBtn = document.querySelector('.installApp')

// 下载对象
let appPromptEvent = null

// 浏览器地址支持下载的话触发此事件
window.addEventListener('beforeinstallprompt', e => {
    appPromptEvent = e
})

// 点击下载按钮
installBtn.addEventListener('click', () => {
    if (appPromptEvent !== null) {
        // 调用安装
        appPromptEvent.prompt()
        // 回调
        appPromptEvent.userChoice.then((res)=>{
            if (res.outcome === 'accepted') {
                console.log('install succeed')
            }
            else{
                console.log('cancel install')
            }
            appPromptEvent = null
        })
    }
})

// 监听安装完成
window.addEventListener('appinstalled',() => {})

// 判断是否桌面打开
if (window.matchMedia('(display-mode: standalone)').matches) {}

4.可用css 媒体查询来判断用户是网页打开还是桌面打开

注意 此 Css 和 上方 JavaScript 代码中 的display-mode：之后的参数 对标的是 manifest.json文件中display的参数

@media all and (display-mode: standalone) {}

5. 配置完成后 需注意

本地文件路径直接打开是没有下载按钮的  需要http形式 打开网页才能出现 

hbuilderX 运行方式可不用配置

vscode 需安装插件