Start codelab

Codelab Flow

What you will learn

L Last updated on 08/08/18 P Progressive Web Apps

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

Adding the offline.js

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

Read through the comments to understand what each section of the code does.
                
  /* 
  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);
    });
  
  });
     
        

Adding the snackbar

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.

Read through the comments to understand what each section of the code does.
                  
    <!-- 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>
        
          

Styling the snackbar

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

Read through the comments to understand what each section of the code does.
                    
         /* 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;}
      }
            

What's next?

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.

What's next?

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.

License

Copyright PWA Fire, 2018. Licensed under an Apache License 2.0

FORK ON GITHUB