[英]How to add “add to home screen” as a popup in mobile view
I wanted to show "add to homescreen " as a pop up in web site when it will open on mobile view. 我想在网站上以“添加到主屏幕”的弹出窗口形式显示在移动视图中。 i used core php,jquery to build my website
我用核心的PHP,jQuery来建立我的网站
You need to fulfill conditions mentioned on Google Web Fundamentals where are also examples of usage. 您需要满足Google Web基础知识中提到的条件,其中还包括用法示例。
You need to add manifest.json file to your root, that includes: 您需要将manifest.json文件添加到您的根目录,其中包括:
Your website must run on https. 您的网站必须在https上运行。
Has service worker with fetch. 有获取服务的工作人员。
If you meet all those criteria, web should fire beforeinstallprompt event, where you show some button (btnAdd in example lower) or bar and then you can show prompt. 如果满足所有这些条件,则Web应该在installprompt事件之前触发,在该事件中显示一些按钮(示例中为btnAdd)或栏,然后可以显示提示。
Example from google: 来自Google的示例:
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can add to home screen
btnAdd.style.display = 'block';
});
//show prompt on click
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.