效果 (谷歌下 在地址栏将出现下载按钮)
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 需安装插件