Start codelab

Codelab Flow

What to do

L Last updated on 03/11/18 P Progressive Web Apps

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

Download Demo Project

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

Starter Guide

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

Setup 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 and Github Pages 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 -->

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

Configure Service Worker // service-worker.js

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.
Follow the steps as commented in the code below in order to correctly configure the service-worker.js file. To copy the code, switch to the Github Tab on the Right 👉

Configure Web Manifest // manifest.json

Configuring the manifest.json 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

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": "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 -->

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/

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.

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

Github Pages Hosting

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.

If you created a repository with your username before, don't worry, just name the Repository anything, your project would still be hosted on the url username.github.io/project-name where username is your username (or organization name) on GitHub and project-name is the name of your project repository

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

Download GitHub Desktop

Clone the repository
Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project. If the app doesn't open, launch it and clone the repository from the app.

Add your files to the cloned repository

Commit & publish
Return to the GitHub Desktop app, Enter the repository, commit your changes, and press the publish button.
Using Git Terminal. Download here

Clone the Repository

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

Enter the Project folder

$ cd username.github.io 

Add your files to the cloned repository folder

Add, Commit and Push your Changes

 $ git add -all 
 $ git commit -m "Initial commit" 
 $ git git push -u origin master 
Click the Upload files button or simply Drag and Drop your files to upload them to yor repository.

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

https://username.github.io.

5. Visit your web app on your phone now. You should see an "install to homescreen" banner prompt! Welcome to the new world!! Further reading: GitHub Pages Hosting Guide.

What's next?

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

License

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

FORK ON GITHUB