In this codelab we are going to Learn how to show a snackbar and change navbar colors
when a progressive web app is offline or online.
1. Change navbar color to indicate connectivity status
2. Show a snackbar to display conectivity states
Create an empty file called offline.js in your js folder say js/offline.js ; copy and paste the code
below to it.
This code checks to see whether our progressive web app is offline or online and invokes the snackbar and
navbar color change. Copy and add the code snippet to the empty offline.js
/*
offline.js by https://pwafire.org/developer/
*/
// Our navbar has a class name called "navbar"
var navbarElement = document.querySelector('.navbar');
// Once the DOM is loaded, check for connectivity
document.addEventListener('DOMContentLoaded', function(event) {
if (!navigator.onLine) {
goOffline();
}
//Offline Event
function goOffline() {
// Change the color of navbar to #fafafa when offline [1]
navbarElement.style.background = '#fafafa';
// Add the snackbar to show when offline [2]
document.getElementById("snackbar").innerHTML = "You are offline ⚡️";
var snackbar = document.getElementById("snackbar");
// Add the "show" class to div
snackbar.className = "show";
// After 5 seconds, remove the show class from div
setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
}
// Online Event
window.addEventListener("online", function () {
// Change the color of navbar to #fff when online [1]
navbarElement.style.background = '#fff';
// Add the snackbar to show we're back online [2]
document.getElementById("snackbar").innerHTML = "You're back online ⚡️⚡️⚡️";
var snackbar = document.getElementById("snackbar");
// Add the "show" class to div
snackbar.className = "show";
// After 5 seconds, remove the show class from div
setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
});
});
To your html pages add the following code as directed in the configuration file below. Copy and best the code
to your pages from which you want the code to be implimented.
This code allows you to link the snackbar styles url to your pages and add the snackbar div in your footer of your pages.
<!-- add snackbar to your footer section of
your pages at the bottom-->
<footer>
<!--
your footer
content
-->
<!-- add snackbar -->
<div id="snackbar"></div>
</footer>
<!-- scripts - add at the bottom of your html
pages below is an e.g-->
<script src="js/offline.js"></script>
Create an empty file called snackbar.css in your css folder say css/snackbar.css ; copy and paste the code
below to it.
This code allows us to style our snackbar. Add it to your main or global css file or link it up to your pages showing the offline snackbar and navbar color changes to the two network connectivity states
/* snackbar.css by
https://pwafire.org/developer/ */
/* The snackbar - position it at the bottom and in the middle
of the screen */
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
background-color: #333; /* Black background color */
color: #fff; /* White text color */
text-align: center; /* Centered text */
border-radius: 2px; /* Rounded borders */
padding: 8px; /* Padding */
position: fixed; /* Sit on top of the screen */
z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the snackbar */
bottom: 30px; /* 30px from the bottom */
font-size: 14px;
}
/* Show the snackbar when clicking on a button
(class added with JavaScript) */
#snackbar.show {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
Take more of the codelabs availabe in our codelab directory to add more bits of features to spark a great progressive web app project you are working on.
Donate a Star like, follow and contribute in any way. Learn how to use firebase cloud firestore in your realtime progressive web app in this codelab.
Licensed under an Apache License 2.0