Chrome in Android and Desktop supports "beforeinstallpromp" event which is can show up add to homescreen banner. I'm try to use the same javascript code for my PWA in iOS but it is doesn't work.
/**
* Clear caches
*/
function pwaClearCaches()
{
//Clear caches
caches.keys().then(function(names) {
for (let name of names) {
caches.delete(name);
}
});
}
var pwa_app_installed = false; //PWA is already installed
var deferredPrompt; //Link to show dialog event
$(document).ready(function(){
if (window.location.protocol === 'http:') { //Если это HTTP протокол, а не HTTPS
console.log(lang.t('You need HTTPS for work'));
}
if ('serviceWorker' in navigator) {
/**
* Подвешиваемся на переключение режима правки, чтобы сразу очистить кэш
*/
$('.debug-mode-switcher').on('click', function () {
if (!$('.debug-mode-switcher .toggle-switch').hasClass('on')) {
//Delete service worker
navigator.serviceWorker.getRegistrations().then(function (registrations) {
for (let registration of registrations) {
registration.unregister();
}
});
//Clear caches
pwaClearCaches();
}
});
}
if ($.cookie('update_pwa_cache')){ //Update cache if we have cookie на обновление
pwaClearCaches();
$.cookie('update_pwa_cache', '', {expires: -1});
}
/**
* Close window with prompt
*/
function closePWAInstallWindow()
{
$("#pwaInstall").hide();
$.cookie('not_show_pwa', '1');
}
let body = $('body');
/**
* Add to homescreen event
*/
body.on('click', '#pwaAddToHomeScreen', function(){
deferredPrompt.prompt(); // Show alert to install
deferredPrompt.userChoice.then((choiceResult) => {//Wait for user choose
if (choiceResult.outcome === 'accepted') { //Accept install
closePWAInstallWindow();
} else { //Cansel install
closePWAInstallWindow();
}
deferredPrompt = null;
});
return false;
});
/**
* Close intalll window
*/
body.on('click', '#pwaCloseInstall', function(){
closePWAInstallWindow();
return false;
});
});
console.log('out');
//If we not in webapp and no session that we need to install
if (!(window.matchMedia('(display-mode: standalone)').matches) && !$.cookie('not_show_pwa')) {
/**
* Event that app is installed
*/
$(window).on('appinstalled', (evt) => {
pwa_app_installed = true;
});
console.log('not fired');
/**
* Event beforeinstallprompt from browser
*/
$(window).on('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.originalEvent;
console.log('fired');
var is_mobile_android = false;
var ua = navigator.userAgent;
if (/Android/i.test(ua) && /Chrome/i.test(ua)){ //If we in Android and it is Chrome prevent native window
is_mobile_android = true;
}
if (!pwa_app_installed && !is_mobile_android){
let body = $('body');
body.append('
' +
'
Please install our app
' +
'
');
setTimeout(function () { //Show our banner
$("#pwaInstall").addClass('show');
}, 100);
}
});
}
Run code snippetExpand snippet
And I have manifest.json
{
"short_name": "VaporStore",
"name": "VaporStore & FreeVape",
"description": "Магазин свободного пара",
"icons": [
{
"src": "/storage/system/resized/xy_64x64/0f08cd435767735a778ea63fea5b5efd_e2f1b76.png",
"type": "image/png",
"sizes": "64x64"
},
{
"src": "/storage/system/resized/xy_128x128/0f08cd435767735a778ea63fea5b5efd_b510eb77.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "/storage/system/original/0f08cd435767735a778ea63fea5b5efd.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/storage/system/original/272d68dfbb5e80ef67f6c7abcb2391cb.png",
"type": "image/png",
"sizes": "512x512"
}
],
"background_color": "#ffffff",
"theme_color": "#ff9800",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"scope": "/"
}
And I have service worker based on workbox from Google.
Does iOS support the "beforeinstallpromp" event or not? On Android and Desktop chrome works fine.
Update 04.04.2019 The most full answer is given here:
https://www.youtube.com/watch?v=s5ASNwnBttQ
from the clip: "iOS 12.2 does not support beforeinstallprompt" (mention is made of add to home screen behavior via 'Share Screen')
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
