From ae9bf02c491850d0992b5d50f5a79be80b52ac45 Mon Sep 17 00:00:00 2001 From: ostertun Date: Fri, 2 Oct 2020 17:42:33 +0200 Subject: [PATCH] RA-#13 Dont show install promt when welcome banner active --- client/scripts/pwa.js.php | 125 +++++++++++++++++++++----------------- 1 file changed, 69 insertions(+), 56 deletions(-) diff --git a/client/scripts/pwa.js.php b/client/scripts/pwa.js.php index 35667bd..f407660 100644 --- a/client/scripts/pwa.js.php +++ b/client/scripts/pwa.js.php @@ -1,10 +1,10 @@ //Loading the Service Worker var swRegistration = null; @@ -16,31 +16,31 @@ if ('serviceWorker' in navigator) { } -$(document).ready(function(){ - 'use strict' - +$(document).ready(function(){ + 'use strict' + var pwaVersion = ''; //must be identical to _manifest.json version. If not it will create update window loop var pwaCookie = true; // if set to false, the PWA prompt will appear even if the user selects "maybe later" var pwaNoCache = false; // always keep the cache clear to serve the freshest possible content - - + + $('[data-pwa-version]').data('pwa-version', pwaVersion); - + //Creating Cookie System for PWA Hide function createCookie(e, t, n) {if (n) {var o = new Date;o.setTime(o.getTime() + n * 365 * 24 * 3600 * 1e3);var r = "; expires=" + o.toGMTString()} else var r = "";document.cookie = e + "=" + t + r + "; path=/"} function readCookie(e) {for (var t = e + "=", n = document.cookie.split(";"), o = 0; o < n.length; o++) {for (var r = n[o];" " == r.charAt(0);) r = r.substring(1, r.length);if (0 == r.indexOf(t)) return r.substring(t.length, r.length)}return null} function eraseCookie(e) {createCookie(e, "", -1)} - + //Enabling dismiss button setTimeout(function(){ $('.pwa-dismiss').on('click',function(){ console.log('User Closed Add to Home / PWA Prompt') createCookie('Sticky_pwa_rejected_install', true, 1); - $('body').find('#menu-install-pwa-android, #menu-install-pwa-ios, .menu-hider').removeClass('menu-active'); + $('body').find('#menu-install-pwa-android, #menu-install-pwa-ios, .menu-hider').removeClass('menu-active'); }); },1500); - + //Detecting Mobile Operating Systems var isMobile = { Android: function() {return navigator.userAgent.match(/Android/i);}, @@ -49,8 +49,8 @@ $(document).ready(function(){ }; var isInWebAppiOS = (window.navigator.standalone == true); var isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches); - - //Firing PWA prompts for specific versions and when not on home screen. + + //Firing PWA prompts for specific versions and when not on home screen. if (isMobile.Android()) { console.log('Android Detected'); function showInstallPromotion(){ @@ -60,7 +60,7 @@ $(document).ready(function(){ setTimeout(function(){ $('.add-to-home').addClass('add-to-home-visible add-to-home-android'); $('#menu-install-pwa-android, .menu-hider').addClass('menu-active') - },4500); + },3000); } } else { console.log('The div #menu-install-pwa-android was not found. Please add this div to show the install window') @@ -70,7 +70,12 @@ $(document).ready(function(){ window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferredPrompt = e; - showInstallPromotion(); + var welcomActive = $('#menu-welcome').hasClass('menu-active'); + if (welcomActive) { + $('#menu-welcome-a-okay').click(showInstallPromotion); + } else { + showInstallPromotion(); + } }); $('.pwa-install').on('click',function(e){ deferredPrompt.prompt(); @@ -87,26 +92,34 @@ $(document).ready(function(){ window.addEventListener('appinstalled', (evt) => { $('#menu-install-pwa-android, .menu-hider').removeClass('menu-active') }); - } - + } + if (isMobile.iOS()) { if(!isInWebAppiOS){ console.log('iOS Detected'); if($('#menu-install-pwa-ios, .add-to-home').length){ if (!readCookie('Sticky_pwa_rejected_install')) { - console.log('Triggering PWA / Add to Home Screen Menu for iOS'); - setTimeout(function(){ - $('.add-to-home').addClass('add-to-home-visible add-to-home-ios'); - $('#menu-install-pwa-ios, .menu-hider').addClass('menu-active'); - },4500); + function triggerPwaInstallIos() { + console.log('Triggering PWA / Add to Home Screen Menu for iOS'); + setTimeout(function(){ + $('.add-to-home').addClass('add-to-home-visible add-to-home-ios'); + $('#menu-install-pwa-ios, .menu-hider').addClass('menu-active'); + },3000); + } + var welcomActive = $('#menu-welcome').hasClass('menu-active'); + if (welcomActive) { + $('#menu-welcome-a-okay').click(triggerPwaInstallIos); + } else { + triggerPwaInstallIos(); + } }; } else { console.log('The div #menu-install-pwa-ios was not found. Please add this div to show the install window') } } - } + } + - //Creating Update Modal function updateModal(){ var body = $('body'); @@ -116,7 +129,7 @@ $(document).ready(function(){ if(!updateModal.length){ body.append(''); setTimeout(function(){ - body.find('#menu-update').load('menu-update.html?ver='+menuUpdate); + body.find('#menu-update').load('menu-update.html?ver='+menuUpdate); },250); } }; @@ -132,8 +145,8 @@ $(document).ready(function(){ window.location.reload(true) } }, 1000); - caches.delete('workbox-runtime').then(function() { - console.log('Content Updated - Cache Removed!'); + caches.delete('workbox-runtime').then(function() { + console.log('Content Updated - Cache Removed!'); }); //localStorage.clear(); sessionStorage.clear() @@ -143,17 +156,17 @@ $(document).ready(function(){ }); }); }; - - //Check Version + + //Check Version function check_version(){ if($('link[data-pwa-version]').length){ - function versionCheck(){ + function versionCheck(){ var dt = new Date(); var maniTimeVersion = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); var localVersionNumber = $('link[rel="manifest"]').data('pwa-version'); var onlineVersionJSON = "/manifest.json.php?ver=" + maniTimeVersion; var onlineVersionNumber = "Connection Offline. Waiting to Reconect"; - $.getJSON(onlineVersionJSON, function(onlineData) {onlineVersionNumber = onlineData.version;}); + $.getJSON(onlineVersionJSON, function(onlineData) {onlineVersionNumber = onlineData.version;}); setTimeout(function(){ //console.log(' Checking PWA Content for updates...\n PWA Server Version: ' + onlineVersionNumber + '\n' + ' PWA Cached Version: ' + localVersionNumber); if(onlineVersionNumber != localVersionNumber && onlineVersionNumber != "Connection Offline. Waiting to Reconect"){ @@ -161,16 +174,16 @@ $(document).ready(function(){ console.log('New Version of Content Available. Refreshing. On Desktop Browsers a manual refresh maybe required.') setTimeout(function(){ $('body').find('#menu-update').addClass('menu-active'); - $('.menu-hider').addClass('menu-active-no-click'); + $('.menu-hider').addClass('menu-active-no-click'); updateButton(); },500); - } - if(onlineVersionNumber == localVersionNumber){/*No update required. Versions Identical*/} - if(onlineVersionNumber === "undefined"){/*Error Checking for Updates*/} + } + if(onlineVersionNumber == localVersionNumber){/*No update required. Versions Identical*/} + if(onlineVersionNumber === "undefined"){/*Error Checking for Updates*/} if(onlineVersionNumber === "Finding Online Version..."){ - $('.reloadme').addClass('disabled'); + $('.reloadme').addClass('disabled'); $('body').find('#menu-update').removeClass('menu-active'); - $('.menu-hider').removeClass('menu-active-no-click'); + $('.menu-hider').removeClass('menu-active-no-click'); } },3000); } @@ -184,15 +197,15 @@ $(document).ready(function(){ if(pwaCookie == false){ eraseCookie('Sticky_pwa_rejected_install'); } - - //Reload To Clear Button + + //Reload To Clear Button $('body').on('click', '.page-update, .reloadme', function() { location.reload(); }); - + //Check for Version Change if Online If not Kill the Function if (navigator.onLine) {check_version();} else {function check_version(){}} - + //Adding Offline Alerts var offlineAlerts = $('.offline-message'); @@ -200,24 +213,24 @@ $(document).ready(function(){ $('body').append('

' + strings['inetMsgOffline'] + '

'); $('body').append('

' + strings['inetMsgOnline'] + '

'); } - + //Offline Function Show function isOffline(){ $('.offline-message').addClass('offline-message-active'); $('.online-message').removeClass('online-message-active'); setTimeout(function(){$('.offline-message').removeClass('offline-message-active');},2000); } - + //Online Function Show function isOnline(){ $('.online-message').addClass('online-message-active'); $('.offline-message').removeClass('offline-message-active'); setTimeout(function(){$('.online-message').removeClass('online-message-active');},2000); - } - + } + $('.simulate-offline').on('click',function(){isOffline();}) $('.simulate-online').on('click',function(){isOnline();}) - + //Disable links to other pages if offline. //Warning! Enabling offline for iOS can cause issues //To allow offline functionality delete the next 7 lines @@ -226,9 +239,9 @@ $(document).ready(function(){ if(detectHREF.match(/.html/)){ isOffline(); return false; - } - } - + } + } + //Check if Online / Offline function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline"; @@ -243,10 +256,10 @@ $(document).ready(function(){ } window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOfflineStatus); - - + + if(pwaNoCache == true){ - caches.delete('workbox-runtime').then(function() { + caches.delete('workbox-runtime').then(function() { }); localStorage.clear(); sessionStorage.clear() @@ -256,6 +269,6 @@ $(document).ready(function(){ }); }); } - - -}); \ No newline at end of file + + +});