📌  相关文章
📜  如何将应用程序添加到主屏幕:渐进式 Web 应用程序

📅  最后修改于: 2022-05-13 01:56:26.789000             🧑  作者: Mango

如何将应用程序添加到主屏幕:渐进式 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);
});
}