Kick starting with Progressive Web Apps Part 5
Till now our site is ready to work offline!
Further you can also notify users whether they are offline or online by adding event listeners of online/offline events. These two events are fired on each page when the browser switches between online and offline mode.
//index.html
<script>
window.addEventListener('load', function() {
function network_status(event) {
if (navigator.onLine) {
console.log("You are online!");
var e = document.getElementById("snackbar");
e.innerHTML = "You are online!";
e.className = "show", setTimeout(function() {
e.className = e.className.replace("show", "")
}, 1500)
}
else
{
console.log("You are offline!");
var e = document.getElementById("snackbar");
e.innerHTML = "You are offline!";
e.className = "show", setTimeout(function() {
e.className = e.className.replace("show", "")
}, 1500)
}
}
window.addEventListener('online', network_status);
window.addEventListener('offline', network_status);
network_status();
});
</script>Also add an element tag in index.html showing the message as ‘You are offline!’ when there is no Internet connectivity.
You can use snackbar for displaying the message. If you are unaware about snackbar have a look at below :
//index.html (inside body tag)
<div id="snackbar" class="hide">You are Offline!</div>Implement Gray scale filter over the things when the user is offline by adding CSS to the page.
//css (add a class of gray filter to css)
.is-offline {
filter: grayscale(1);
cursor: default;
}//index.html
<script>
window.addEventListener('load', function() {
function network_status(event) {
if (navigator.onLine) {
console.log("You are online!");
document.documentElement.classList.remove("is-offline");
var e = document.getElementById("snackbar");
e.innerHTML = "You are online!";
e.className = "show", setTimeout(function() {
e.className = e.className.replace("show", "")
}, 1500)
}
else
{
console.log("You are offline!");
document.documentElement.classList.add("is-offline");
var e = document.getElementById("snackbar");
e.innerHTML = "You are offline!";
e.className = "show", setTimeout(function() {
e.className = e.className.replace("show", "")
}, 1500)
}
}
window.addEventListener('online', network_status);
window.addEventListener('offline', network_status);
network_status();
});
</script>
That’s it! You have your installable web app just like a native app which can now work even Offline.
To kick start with Progressive Web App you can go through my blogs :
1) Register service worker and cache the resources in our app on the initial load.
2) Update the old service worker and cache the new response in Cache Storage.
3) Get out the resources from the cache and intercept the network requests.
4) Make our web app installable via the Web App Manifest File.
5) Grey out the things when offline.
SoluteLabs is a high-performance team of 25 focused on mobile and web design and development; we have produced top #10 chart topping applications on Android and iOS app stores, graphics that have gone viral and applications with Millions of downloads.
