TF-4122 Display CTA to download mobile application in main screen
This commit is contained in:
dab246
+2
-3
@@ -37,7 +37,6 @@
|
||||
|
||||
<script type="application/javascript" src="assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
|
||||
<script type="application/javascript" src="assets/packages/flutter_charset_detector_web/assets/web/jschardet.min.js" defer></script>
|
||||
<script src="splash/splash.js"></script>
|
||||
<script src="worker_service/worker_service.js"></script>
|
||||
<script src="i18n/translater.js"></script>
|
||||
<script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>
|
||||
@@ -48,7 +47,7 @@
|
||||
<img src="splash/img/icon_twp.png" alt="Twake Workplace logo" class="bottom-image">
|
||||
|
||||
<div class="smart-banner">
|
||||
<button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
|
||||
<button class="button close" onClick="closeSmartBanner()">
|
||||
<picture class="close-icon">
|
||||
<source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: light)">
|
||||
<source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: dark)">
|
||||
@@ -66,7 +65,7 @@
|
||||
<div class="banner-description" id="banner-description-id"></div>
|
||||
</span>
|
||||
<span style="flex: 1"></span>
|
||||
<span class="open-button" id="open-button-id" onClick= {handleOpenTwakeMailApp()}></span>
|
||||
<span class="open-button" id="open-button-id" onClick="openTwakeMailApp()"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
function removeSplashFromWeb() {
|
||||
document.getElementById("splash")?.remove();
|
||||
document.getElementById("splash-branding")?.remove();
|
||||
document.body.style.background = "transparent";
|
||||
}
|
||||
@@ -29,32 +29,6 @@ body {
|
||||
width:100%; height:100%;
|
||||
}
|
||||
|
||||
.cover {
|
||||
display:block;
|
||||
width:100%; height:100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.bottomLeft {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bottomRight {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bottom-image {
|
||||
position: absolute; /* Position relative to the .container */
|
||||
bottom: 40px; /* 40px from the bottom */
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.smart-banner {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999999; /* always above Flutter canvas */
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -1,66 +1,117 @@
|
||||
const androidStore = 'https://play.google.com/store/apps/details?id=com.linagora.android.teammail';
|
||||
const iosStore = 'https://apps.apple.com/app/twake-mail/id1587086189';
|
||||
const openAppDeepLink = 'twakemail.mobile://openapp';
|
||||
const iosPlatform = 'iOS';
|
||||
const androidPlatform = 'android';
|
||||
const otherPlatform = 'other';
|
||||
|
||||
function handleContinueTwakeMailOnWeb() {
|
||||
console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.');
|
||||
closeSmartBanner();
|
||||
}
|
||||
|
||||
function getPlatform() {
|
||||
console.info('[TwakeMail] getPlatform(): ', navigator.userAgent);
|
||||
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
|
||||
return iosPlatform;
|
||||
}
|
||||
if (/Android/i.test(navigator.userAgent)) {
|
||||
return androidPlatform;
|
||||
}
|
||||
const ua = navigator.userAgent || navigator.vendor || window.opera;
|
||||
console.info('[TwakeMail] getPlatform():', ua);
|
||||
if (/iPhone|iPad|iPod/i.test(ua)) return iosPlatform;
|
||||
if (/Android/i.test(ua)) return androidPlatform;
|
||||
return otherPlatform;
|
||||
}
|
||||
|
||||
function handleOpenTwakeMailApp() {
|
||||
function openTwakeMailApp() {
|
||||
const os = getPlatform();
|
||||
console.info('[TwakeMail] handleOpenTwakeMailApp() - OS:', os);
|
||||
|
||||
let fallbackTimer;
|
||||
let hiddenAt = null;
|
||||
|
||||
const clearFallback = (reason) => {
|
||||
if (fallbackTimer) clearTimeout(fallbackTimer);
|
||||
console.info(`[TwakeMail] Cancel store redirect: ${reason}`);
|
||||
window.removeEventListener('blur', onBlur);
|
||||
document.removeEventListener('visibilitychange', onVisibility);
|
||||
window.removeEventListener('pagehide', onPageHide);
|
||||
};
|
||||
|
||||
const onVisibility = () => {
|
||||
if (document.hidden) {
|
||||
hiddenAt = Date.now();
|
||||
clearFallback('document hidden (user left browser)');
|
||||
}
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
hiddenAt = Date.now();
|
||||
clearFallback('window blurred (likely app opened)');
|
||||
};
|
||||
|
||||
const onPageHide = () => clearFallback('page hidden');
|
||||
|
||||
document.addEventListener('visibilitychange', onVisibility);
|
||||
window.addEventListener('blur', onBlur);
|
||||
window.addEventListener('pagehide', onPageHide);
|
||||
|
||||
const tryOpen = (deeplink, storeUrl) => {
|
||||
const start = Date.now();
|
||||
window.location.href = deeplink;
|
||||
|
||||
// fallback only if still visible after 1500 ms AND page wasn’t hidden recently
|
||||
fallbackTimer = setTimeout(() => {
|
||||
if (!document.hidden && (!hiddenAt || Date.now() - hiddenAt > 800)) {
|
||||
console.info('[TwakeMail] Deep link failed — redirecting to store.');
|
||||
window.location.href = storeUrl;
|
||||
} else {
|
||||
console.info('[TwakeMail] App likely opened — skip store redirect.');
|
||||
}
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
if (os === androidPlatform) {
|
||||
document.location.replace(androidStore);
|
||||
tryOpen(openAppDeepLink, androidStore);
|
||||
} else if (os === iosPlatform) {
|
||||
document.location.replace(iosStore);
|
||||
tryOpen(openAppDeepLink, iosStore);
|
||||
} else {
|
||||
console.info('[TwakeMail] Unsupported platform. No app open.');
|
||||
}
|
||||
|
||||
closeSmartBanner();
|
||||
}
|
||||
|
||||
function initialTmailApp() {
|
||||
const os = getPlatform();
|
||||
const originInUrl = window.location;
|
||||
|
||||
console.info('[TwakeMail] initialWorkerService(): OriginInUrl:', originInUrl);
|
||||
console.info('[TwakeMail] initialTmailApp(): OriginInUrl:', originInUrl);
|
||||
|
||||
// For desktop, we don't show the open on app popup
|
||||
// Skip displaying the banner on desktop browsers
|
||||
if (os === otherPlatform || typeof window === 'undefined') {
|
||||
console.info('[TwakeMail] Skipping smart-banner on desktop.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.location.pathname.includes('/login')) {
|
||||
console.info('[TwakeMail] initialWorkerService(): Login callback');
|
||||
handleContinueTwakeMailOnWeb();
|
||||
} else {
|
||||
openSmartBanner();
|
||||
}
|
||||
// By default, show the banner on mobile
|
||||
showSmartBanner();
|
||||
|
||||
// Ensure the banner stays on top after Flutter re-renders
|
||||
const observer = new MutationObserver(() => {
|
||||
const banner = document.querySelector('.smart-banner');
|
||||
if (banner) banner.style.zIndex = '9999999';
|
||||
});
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
function openSmartBanner() {
|
||||
console.info('[TwakeMail] openSmartBanner(): Open the smart banner.');
|
||||
const smartBanner = document.querySelector(".smart-banner");
|
||||
function showSmartBanner() {
|
||||
console.info('[TwakeMail] showSmartBanner(): Displaying the smart banner.');
|
||||
const smartBanner = document.querySelector('.smart-banner');
|
||||
if (!smartBanner) return;
|
||||
|
||||
smartBanner.style.display = "block";
|
||||
document.body.style.overflow = "hidden";
|
||||
smartBanner.style.zIndex = '9999999';
|
||||
smartBanner.style.top = "16px";
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeSmartBanner() {
|
||||
console.info('[TwakeMail] closeSmartBanner(): Closing the smart banner.');
|
||||
const smartBanner = document.querySelector(".smart-banner");
|
||||
const smartBanner = document.querySelector('.smart-banner');
|
||||
if (!smartBanner) return;
|
||||
|
||||
smartBanner.style.display = "none";
|
||||
document.body.style.overflow = "auto";
|
||||
smartBanner.style.top = 0;
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
Reference in New Issue
Block a user