Skip to content

Commit

Permalink
Merge pull request #12 from earthfast/eng-180/optional-loading-spinner
Browse files Browse the repository at this point in the history 
Optional loading spinner and reduce spinner time on refresh
  • Loading branch information
@jlmonroy13
jlmonroy13 authored Oct 22, 2024
2 parents 11a7ccd + df5de85 commit e7d1c22
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 73 deletions.
2 changes: 1 addition & 1 deletion src/landing-page/earthfast/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ body {
}

.hidden {
display: none;
display: none !important;
}

@media screen and (max-width: 768px) {
Expand Down
156 changes: 84 additions & 72 deletions src/landing-page/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
<!doctype html>
<html lang="en">

<head>
<link rel="stylesheet" href="/earthfast/styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div id="content">
<div class="logo">
<img id="logo" class="logo__image"
src="/earthfast/images/earth-fast-logo.svg" alt="Earth Fast">
<h2 class="logo__title">EarthFast</h2>
</div>
<div class="description-container">
<div class="description-text">
<span class="securely-text" id="description-text">Securely
loading</span>
<span id="domain"></span>
</div>
<div id="spinner" class="spinner"></div>
<head>
<link rel="stylesheet" href="/earthfast/styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="hidden">
<div id="content">
<div class="logo">
<img id="logo" class="logo__image" src="/earthfast/images/earth-fast-logo.svg" alt="Earth Fast">
<h2 class="logo__title">EarthFast</h2>
</div>
<div class="description-container">
<div class="description-text">
<span class="securely-text" id="description-text">Securely
loading</span>
<span id="domain"></span>
</div>
<!-- <p id="error"></p> -->
<div id="spinner" class="spinner"></div>
</div>
<!-- <p id="error"></p> -->
</div>

<script>
<script>
const showSpinner = false //localStorage.getItem('showSpinner') !== 'false';
const serviceWorker = '/earthfast-sw.js';

function fail(message) {
Expand All @@ -38,26 +38,33 @@ <h2 class="logo__title">EarthFast</h2>
return function (delayMs) {
const msSinceInit = Date.now() - initDate;
const timeout = Math.max(0, delayMs - msSinceInit);
setTimeout(() => location.reload(), timeout);
console.log(`Timeout: ${timeout}ms`);
setTimeout(() => {
location.reload();
console.log(`Total load time: ${Date.now() - initDate}ms`);
}, timeout);
}
}(Date.now());

window.addEventListener('load', () => {
document.getElementById('domain').innerText = location.host;
if (!('serviceWorker' in navigator)) {
fail('This browser does not support the EarthFast Service Worker, please use a different native browser instead.');
return;
}

// listen for messages from the service worker
navigator.serviceWorker.addEventListener('message', event => {
document.getElementById('domain').innerText = location.host;

if (!('serviceWorker' in navigator)) {
fail('This browser does not support the EarthFast Service Worker, please use a different native browser instead.');
return;
}

// listen for messages from the service worker
navigator.serviceWorker.addEventListener('message', event => {
const eventType = event.data.type ? event.data.type : event.data.action;
console.log(`New service worker message received '${eventType}'`, event);

switch (eventType) {
// service worker is initialized
case 'INITIALIZED': reloadAfterWallTime(1000); break;
case 'INITIALIZED':
console.log('INITIALIZED');
reloadAfterWallTime(0);
break;

// a new service worker version has been detected
case 'VERSION_DETECTED': console.log('VERSION_DETECTED'); break;
Expand All @@ -76,47 +83,52 @@ <h2 class="logo__title">EarthFast</h2>
}
});

navigator.serviceWorker.register(serviceWorker, { scope: '/' })
.then(reg => {
console.log('Service Worker registration successful with scope: ', reg.scope);

if (reg.installing) {
console.log('Service Worker installing');
} else if (reg.waiting) {
console.log('Service Worker installed');
} else if (reg.active) {
console.log('Service Worker active');
}

// A scenario exists where this landing page is being served and executed even though the
// service worker is already installed and active. It can occur, for instance, if a user
// does a hard refresh in their browser after the service worker has been installed.
//
// In this case we'll never get an INITIALIZED message, so a reload needs to be triggered
// manually. Since the service worker is active, we know the onFetch handler is installed
// and will be responsible for serving the reload request.
if (reg.active) {
console.log('Active service worker found, reloading page');
reloadAfterWallTime(1000);
} else {
// Wait for the service worker to become active
reg.addEventListener('updatefound', () => {
const newWorker = reg.installing;
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'activated') {
console.log('Service Worker activated, reloading page');
reloadAfterWallTime(1000);
}
});
});
}
})
.catch(err => {
fail('Service worker registration failed: ' + err);
});
});
navigator.serviceWorker.register(serviceWorker, { scope: '/' })
.then(reg => {
console.log('Service Worker registration successful with scope: ', reg.scope);

if (reg.installing) {
console.log('Service Worker installing');
} else if (reg.waiting) {
console.log('Service Worker installed');
} else if (reg.active) {
console.log('Service Worker active');
}

// A scenario exists where this landing page is being served and executed even though the
// service worker is already installed and active. It can occur, for instance, if a user
// does a hard refresh in their browser after the service worker has been installed.
//
// In this case we'll never get an INITIALIZED message, so a reload needs to be triggered
// manually. Since the service worker is active, we know the onFetch handler is installed
// and will be responsible for serving the reload request.

// if the service worker exists but the page was hard refreshe
if (reg.active) {
console.log('Active service worker found, reloading page');
reloadAfterWallTime(0);
} else {
// first time loading the page, show loading spinner
if (showSpinner) {
document.body.classList.remove('hidden');
}
reg.addEventListener('updatefound', () => {
const newWorker = reg.installing;
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'activated') {
console.log('Service Worker activated, reloading page');
reloadAfterWallTime(500);
}
});
});
}
})
.catch(err => {
fail('Service worker registration failed: ' + err);
});
});

</script>
</body>
</body>

</html>

0 comments on commit e7d1c22

Please sign in to comment.