We are going to convert a basic static site into a Progressive Web App. Make sure to follow all the steps as documented later below.download the project template. Unzip the downloaded file to your prefered location after download.

If you are using Github Desktop, simply Fork and clone it. If you're using Git, --git clone the repository

This project is a basic app built with HTML, CSS, BOOTSTRAP AND JAVASCRIPT. The App checks your Date of Birth and detects the Day of the Week you were born. Pretty cool right? 😀

We are going to convert this web app into a Progressive Web App and test it using the PWAFire Checklist

In your root folder, create two empty files; service-worker.js and app.webmanifest and save. Once done; let's proceed down here;

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 and Github Pages later which shall have HTTPS already provisioned for our project.

    <!-- 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 -->

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="/app.webmanifest">
      <!-- end of web manifest -->

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.

Configuring the app.webmanifest file helps you to specify how you want your web app to look like when launched on the device.

PLEASE NOTE: When using your own logos, ensure that the image has equal width and height preferably (500px x 500px), sizes like 400px x 350px will result in errors! Find more starter guide on our Web Manifest developer docs available here

          {
          "background_color": "#fff",
          "display": "standalone",
          "orientation":"portrait",
          "theme_color": "#fff",
          "short_name": "DOB Finder",
          "name": "Date of Birth Finder",
          "description": "description or purpose of your progressive web app",
          "lang": "en-US",
          "icons": [
          {
            "src": "img/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
          },
          {
            "src": "img/icons/icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
          },
          {
            "src": "img/icons/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png"
          },
          {
            "src": "img/icons/icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
          },
          {
            "src": "img/icons/icon-152x152.png",
            "sizes": "152x152",
            "type": "image/png"
          },
          {
            "src": "img/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
          },
          {
            "src": "img/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
          },
          {
            "src": "img/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
          ],
          "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 -->

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/

For this codelab, name the project DOB Finder and take note of the Project ID

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 Date of Birth Finder directory
cd Date-of-Birth-Finder to switch to the 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 the new world!! Further reading: Firebase Hosting Guide.

If you're new to GitHub, you'll need to create your account and create a repository first.

1. Create a GitHub account at https://github.com/signup. Once your account has been created and you've signed in, you're ready to start!

2. Create a new Repository https://github.com/new named username.github.io, where username is your username (or organization name) on GitHub.

For this codelab, name the repository DOB Finder

3. Enable GitHub Pages https://github.com/repository-name/settings, where repository-name is the name of your repository on GitHub.

4. Scroll down to he GitHub Pages section,Click the NONE Dropdown buton, Select master branch, Click Save.

5. Upload your files to your repository

$ git clone https://github.com/username/username.github.io 

$ cd username.github.io 

 $ git add -all 

 $ git commit -m "Initial commit" 

 $ git git push -u origin master 

https://username.github.io.

Check out the Progressive Web Apps Checklist in this codelab. Are you still confused, got any questions? Contact Bolaji Ayodeji ; Twitter | Facebook | Email

Licensed under an MIT license.