如何将应用程序添加到主屏幕:渐进式 Web 应用程序
Web App Manifest 是一个简单的 JSON 文件,它告诉浏览器您的 Web 应用程序以及它在“安装”在用户的移动设备或桌面上时的行为方式。
我们需要添加 Manifest 的链接,以便将 Web App 添加到主屏幕。
写在代码的 HTML Head 中。
清单文件的创建方式:
要创建此文件,我们需要具有某些属性,例如:
1. 识别您的应用程序(标识) - 这必须包含名称和 Short_Name
"name" : "EbullientMind",
"short_name" : "EbullientMind"
2. 展示你的应用程序(Presentation) ——这必须包含 Start_URL、Theme_color、Background_color、Orientation 和 Display
"start_url" : "[provide_path]",
"background_color" : "[provide_color]",
"theme-color" : "[provide_color]",
"orientation" : "any",
"display" : "standalone"
3. Icons - 这必须包含某些功能,例如:src,type,sizes
"icons" :
[{
"src" : "[provide_path]",
"type" : "[provide_type_of_image]",
"sizes" : "[provide_size_of_image]"
}]
4. Miscellaneous – 这必须包含 dir、lang、description、scope、service worker
"dir" : "ltr",
"lang" : "en-US",
"description" : "Describe your app",
"scope" : "/",
"serviceworker" :
{
"src" : "[provide_path]",
"scope" : "/"
}
5. Applications - 这必须包含 Related_Applications、Prefer_related_applications、Screenshots
"screenshots" :
[{
"src" : "[provide_path]"
}],
"related_applications" :
[{
"platform" : "play",
"url" : "[provide_path]",
"id" : "[provide_id]"
}],
"prefer_related_applications" : true
程序化事件是 Manifest :
1. onapp安装:
window.addEventListener('appinstalled',evt => {
console.log('App Installed'); })
2.安装前提示:
window.addEventListener('beforeinstallprompt',evt => {
evt.userchoice.then(choice => {
var message = choice.outcome === 'dismissed' ? 'User Cancelled' : 'User Installed' ;
console.log(message);
});
});
window.addEventListener('beforeinstallprompt',evt => {
evt.preventDefault();
prompt Evt = evt;
return false;
});
if(promptEvt ! = undefined){
promptEvt.prompt()
promptEvt.userchoice.then(choice => {
console.log('User choice:', choice.outcome);
});
}