pwa的基本使用

1.pwa的安装配置

manifest.json

{
    "name": "名称",
    "short_name": "名称",
    "description": "",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#3B77F7",
    "theme_color": "#FFFFFF",
    "icons": [
        {
            "src": "/static/title.png",
            "sizes": "192x192",
            "type": "image\/png"
        }
    ]
}

注意事项：
1.vue项目打包后可能需要适当修改manifest.json中路径前缀，视情况而定
2. 图片大小一定要规范，src也可以使用线上地址

htm中引入即可

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

2.点击按钮安装pwa

uniapp示例

//验证是否可以安装pwa
const deferredPrompt=ref("");
 onMounted(() => {
		let systemInfo = uni.getSystemInfoSync(); //判断
		if (systemInfo.platform !== 'ios') {
			window.addEventListener('beforeinstallprompt', beforeInstallPromptListener)
		}
	})
	// 组件卸载时移除事件监听
	onBeforeUnmount(() => {
		window.removeEventListener('beforeinstallprompt', beforeInstallPromptListener)
	})

// 监听 beforeinstallprompt 事件 是否具备安装pwa条件
	const beforeInstallPromptListener = (event) => {
		// 阻止默认的安装提示
		event.preventDefault()
		// 保存事件对象
		deferredPrompt.value = event
		// 显示安装按钮
		//业务代码 ishowTips3.value = true
	}


//点击安装pwa
	function Installation() {
		console.log(deferredPrompt.value);

		if (deferredPrompt.value) {
			deferredPrompt.value.prompt()
			deferredPrompt.value.userChoice.then((choiceResult) => {
				if (choiceResult.outcome === 'accepted') {
					console.log('用户安装了 PWA')
				} else {
					console.log('用户拒绝安装 PWA')
				
					let systemInfo = uni.getSystemInfoSync(); //判断
					if (systemInfo.platform !== 'ios') {
						window.addEventListener('beforeinstallprompt', beforeInstallPromptListener)
					}
				}
				deferredPrompt.value = null
			})
		}
	}