Start codelab

Codelab Flow

Download PWA Fire Profile

Last updated on 17/06/18

We are going to convert this site into a Progressive Web App. Make sure to follow all the steps as documented later below. Unzip the downloaded file to your prefered location after download. If you have Github Desktop, simply Fork and clone it.

Download PWA Fire Bundle

Download PWA Fire and from pwafire-bundle folder. Copy the service-worker.js and manifest.json files to the Root folder of PWA Fire Profile. If prompted to replace the exsiting service-worker.js and manifest.json file, replace. Be sure to edit the service-worker.js and manifest.json file as in the guide provided below to fit your web app needs.

Code to register the service worker

This is the first step to making our web app work offline. Copy and paste this code to the index file just before the end of the body tag or in the head tag.

N/B : YOU NEED HTTPS : We are going to use Firebase Hosting later which shall have HTTPS already provisioned for our project.

This code checks to see if the service worker API is available, and if it is, the service worker at /service-worker.js is registered once the page is loaded.
First, we need to check if the browser supports service workers, and if it does, register the service worker.

    <!-- register service worker -->
        <script>

          if ('serviceWorker' in navigator) 
          {
          window.addEventListener('load', function() {
            navigator.serviceWorker.register('/service-worker.js')
            .then(function() { console.log("Service Worker Registered, Cheers to PWA Fire!"); });
          }
          );
        }  
        </script> 
    <!-- end of service worker -->

Using the web manifest

We are going to add a link tag to all the pages that encompass our web app inside the head tag, as follows; For our case, we only have one page, the index.html. Add the following code to it.


      <!-- start of web manifest -->
      <link rel="manifest" href="/manifest.json">
      <!-- end of web manifest -->

Service Worker // service-worker.js config

NOTE : The important thing to understand about the Service Worker is that you are in control of the network. You get to decide what is cached, how it is cached and how it should be returned to the user.

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction i.e offline capabilities, push nitification, add to homescreen, sharable etc
Follow the steps as commented in the code below in order to correctly configure the service-worker.js file.
                
        // A project PWA Fire written. All writes reserved https://pwafire.org 2018.
        // Author : Maye Edwin https://maye.gdgmoi.com
                      
        // after a service worker is installed and the user navigates to a different page or 
        // refreshes,the service worker will begin to receive fetch events
                          
        self.addEventListener('fetch', function(event) {
        event.respondWith(caches.open('cache').then(function(cache) {
        return cache.match(event.request).then(function(response) {
        console.log("cache request: " + event.request.url);
        var fetchPromise = fetch(event.request).then(function(networkResponse) {           
        // if we got a response from the cache, update the cache                   
        console.log("fetch completed: " + event.request.url, networkResponse);
        if (networkResponse) {
            console.debug("updated cached page: " + event.request.url, networkResponse);
              cache.put(event.request, networkResponse.clone());}
              return networkResponse;
                  }, function (event) {   
        // rejected promise - just ignore it, we're offline!   
                  console.log("Error in fetch()", event);
                  event.waitUntil(
                  caches.open('cache').then(function(cache) { 
        // our cache is named *cache* in the caches.open() above
                  return cache.addAll
                  ([            
        //cache.addAll(), takes a list of URLs, then fetches them from the server
        // and adds the response to the cache.           
        // add your entire site to the cache- as in the code below; for offline access
        // If you have some build process for your site, perhaps that could 
        // generate the list of possible URLs that a user might load.               
                '/', // do not remove this
                '/index.html', //default
                '/index.html?homescreen=1', //default
                '/?homescreen=1', //default
                '/assets/css/main.css',// configure as by your site ; just an example
                '/images/*',// choose images to keep offline; just an example
        // Do not replace/delete/edit the service-worker.js/ and manifest.js paths below
                '/service-worker.js',
                '/manifest.js',
        //These are links to the extenal social media buttons that should be cached;
        // we have used twitter's as an example
              'https://platform.twitter.com/widgets.js',       
                ]);
                })
                );
                });
        // respond from the cache, or the network
          return response || fetchPromise;
        });
        }));
        });
    

Web Manifest // manifest.json config

Configure/edit the background and theme colors, display type, the Web App short name ( call it aything you want), the Web App name, icons size (icons in the icons folder are already in the required sizes) and your icon/logo paths. We have to state the img type eg image/ico or image/png. This is already done for you. You could use your own icons or logos and update later after this codelab.

Leave the start url as it is though this can be anything you want; the value we’re using has the advantage of being meaningful to Google Analytics.

Configuring the manifest.json file helps you to specify how you want your web app to look like when launched on the device.
Configure the manfest.json file as directed above in order to fit your web app needs.

          {
          "background_color": "#fff",
          "display": "standalone",
          "orientation":"portrait",
          "theme_color": "#fff",           
          "short_name": "PWA Fire",
          "name": "PWA Fire",
          "description": "description or purpose of your progressive web app",
          "lang": "en-US",
          "icons": [
          {
          "src": "images/pwafire48.png",
          "type": "image/png",
          "sizes": "48x48"
          },
          {
          "src": "images/pwafire96.png",
          "type": "image/png",
          "sizes": "96x96"
          },
          {
          "src": "images/pwafire192.png",
          "type": "image/png",
          "sizes": "192x192"
          }
          ,
          {
          "src": "images/pwafire512.png",
          "type": "image/png",
          "sizes": "512x512"
          } 
          ],
          "start_url": "index.html?launcher=true",
          }
      

In the head tag, add theme color to all your pages as shown in the code below; You could use the same theme colour as in the manfest.json file.


        <!-- theme-color -->
        <meta name="theme-color" content="#fff" />
        <!-- end-theme-color -->

Firebase Hosting

If you're new to Firebase, you'll need to create your account and install some tools first.

1. Create a Firebase account at https://firebase.google.com/console/. Once your account has been created and you've signed in, you're ready to deploy!

2. Create a new Firebase app at https://firebase.google.com/console/

3. Install the Firebase tools via npm (run this in your command line).The Firebase Command Line Interface (CLI) will allow you to serve the web app locally and deploy.

npm -g install firebase-tools

4. To verify that the CLI has been installed correctly, open a console and run:

firebase --version

5. If you haven't recently signed in to the Firebase tools, update your credentials:

firebase login

6. Make sure you are in the PWA Fire Profile directory then Initialize your app to use Firebase. Select your Project ID and follow the instructions.

When prompted, you can choose any Alias, such as pwafire for instance. Select Firebase Hosting as the Firebase CLI feature. Provide the default directory as /. To the other prompts, reply NO; N

firebase init

8. Finally, deploy the app to Firebase:

firebase deploy

9. Celebrate. You're done! Your app will be deployed to the domain:

https://YOUR-FIREBASE-APP.firebaseapp.com

10. Visit your web app on your phone now. You should see an "install to homescreen" banner prompt! Welcome to Canaan! Further reading: Firebase Hosting Guide.

Mr. PWA Fire's Son Dance Mr. PWA Fire's Son Dance

What's next?

Donate a Star and Contribute in any way. Be sure to Follow and use Project PWA Fire. If you use PWA Fire kindly let us know via info@pwafire.org or JUST simply Tweet us

License

Copyright PWA Fire, 2018. Licensed under an MIT license.

FORK ON GITHUB