TF-2565: Create bottom sheet and handle choose options when open app on mobile browser
This commit is contained in:
HuyNguyen
committed by
Dat PHAM HOANG
Dat PHAM HOANG
parent
b444a345c8
commit
8a2ccf0822
@@ -21,44 +21,34 @@
|
||||
|
||||
.sheet-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sheet-content h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sheet-content p {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.open_on_mobile_title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
color: #000;
|
||||
}
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.open_on_mobile_actions {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
|
||||
& > span {
|
||||
margin-left: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
& > span {
|
||||
margin-left: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
const androidStore = 'https://play.google.com/store/apps/details?id=com.linagora.android.teammail';
|
||||
const iosStore = 'https://apps.apple.com/vn/app/twake-mail/id1587086189';
|
||||
const iosPlatform = 'iOS';
|
||||
const androidPlatform = 'android';
|
||||
const otherPlatform = 'other';
|
||||
var serviceWorkerVersion = null;
|
||||
var scriptLoaded = false;
|
||||
|
||||
function loadMainDartJs() {
|
||||
if (scriptLoaded) {
|
||||
return;
|
||||
}
|
||||
scriptLoaded = true;
|
||||
var scriptTag = document.createElement('script');
|
||||
scriptTag.src = 'main.dart.js';
|
||||
scriptTag.type = 'application/javascript';
|
||||
document.body.append(scriptTag);
|
||||
}
|
||||
|
||||
function fetchServiceWorker() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
// Service workers are supported. Use them.
|
||||
// Wait for registration to finish before dropping the <script>tag.
|
||||
// Otherwise, the browser will load the script multiple times,
|
||||
// potentially different versions.
|
||||
navigator.serviceWorker.register('firebase-messaging-sw.js').then(serviceWorkerRegistration => {
|
||||
console.info('[TwakeMail] fetchServiceWorker(): Service worker firebase-messaging was registered.');
|
||||
}).catch(error => {
|
||||
console.error(
|
||||
'[TwakeMail] fetchServiceWorker(): An error occurred while registering the service worker firebase-messaging.'
|
||||
);
|
||||
console.error(error);
|
||||
});
|
||||
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
|
||||
navigator.serviceWorker.register(serviceWorkerUrl)
|
||||
.then((reg) => {
|
||||
function waitForActivation(serviceWorker) {
|
||||
serviceWorker.addEventListener('statechange', () => {
|
||||
if (serviceWorker.state == 'activated') {
|
||||
console.log('[TwakeMail] fetchServiceWorker(): Installed new service worker.');
|
||||
loadMainDartJs();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!reg.active && (reg.installing || reg.waiting)) {
|
||||
// No active web worker and we have installed or are installing
|
||||
// one for the first time. Simply wait for it to activate.
|
||||
waitForActivation(reg.installing || reg.waiting);
|
||||
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
|
||||
// When the app updates the serviceWorkerVersion changes, so we
|
||||
// need to ask the service worker to update.
|
||||
console.log('[TwakeMail] fetchServiceWorker(): New service worker available.');
|
||||
reg.update();
|
||||
waitForActivation(reg.installing);
|
||||
} else {
|
||||
// Existing service worker is still good.
|
||||
console.log('[TwakeMail] fetchServiceWorker(): Loading app from service worker.');
|
||||
loadMainDartJs();
|
||||
}
|
||||
});
|
||||
// If service worker doesn't succeed in a reasonable amount of time,
|
||||
// fallback to plaint <script> tag.
|
||||
setTimeout(() => {
|
||||
if (!scriptLoaded) {
|
||||
console.warn(
|
||||
'[TwakeMail] fetchServiceWorker(): Failed to load app from service worker. Falling back to plain <script> tag.',
|
||||
);
|
||||
loadMainDartJs();
|
||||
}
|
||||
}, 4000);
|
||||
}
|
||||
else {
|
||||
// Service workers not supported. Just drop the <script> tag.
|
||||
loadMainDartJs();
|
||||
}
|
||||
}
|
||||
|
||||
function handleContinueTwakeMailOnWeb() {
|
||||
console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.');
|
||||
closeBottomSheet();
|
||||
fetchServiceWorker();
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
return otherPlatform;
|
||||
}
|
||||
|
||||
function hanldeOpenTwakeMailApp() {
|
||||
const os = getPlatform();
|
||||
console.info('[TwakeMail] hanldeOpenTwakeMailApp() - OS:', os);
|
||||
if (os === androidPlatform) {
|
||||
document.location.replace(androidStore);
|
||||
} else if (os === iosPlatform) {
|
||||
document.location.replace(iosStore);
|
||||
}
|
||||
}
|
||||
|
||||
function initialWorkerService() {
|
||||
const os = getPlatform();
|
||||
const searchParams = Object.fromEntries(
|
||||
new URLSearchParams(window.location.search),
|
||||
);
|
||||
const originInUrl = searchParams.origin;
|
||||
// For desktop, we don't show the open on app popup
|
||||
if (os === otherPlatform || typeof window === 'undefined') {
|
||||
if (os !== otherPlatform) {
|
||||
console.log('[TwakeMail] initialWorkerService(): Keep on browser because:', {
|
||||
os,
|
||||
originInUrl,
|
||||
windowUndefined: typeof window === 'undefined',
|
||||
});
|
||||
}
|
||||
fetchServiceWorker();
|
||||
return;
|
||||
}
|
||||
console.log('[TwakeMail] initialWorkerService(): Open the bottom sheet.');
|
||||
const bottomSheet = document.querySelector(".bottom-sheet");
|
||||
bottomSheet.style.display = "block";
|
||||
document.body.style.overflow = "hidden";
|
||||
bottomSheet.style.bottom = "0";
|
||||
}
|
||||
|
||||
function closeBottomSheet() {
|
||||
console.info('[TwakeMail] closeBottomSheet(): Closing the bottom sheet.');
|
||||
const bottomSheet = document.querySelector(".bottom-sheet");
|
||||
bottomSheet.style.display = "none";
|
||||
document.body.style.overflow = "auto";
|
||||
bottomSheet.style.bottom = "-100%";
|
||||
}
|
||||
Reference in New Issue
Block a user