Start codelab

Codelab Flow

What you will learn

L B 2nd Iteration Coming

In this codelab you will learn how to use, PWA Fire App; a Progressive Web App starter App designed with PWA best practices.

Let's get started now

What you should already know

Before we get started; let us make sure everything is ready and we have all tools needed. NOTE All the code is commented BTW; Read through to understand each line. It is good to do so!

1. Basic HTML, CSS, and JavaScript (ofcourse you are)

2. How to run commands from the command line

3. Some familiarity with service workers is recommended

4. Familiarity with Node.js. is recommended

What you will need

PWA Fire App requires Node.js. Install the latest long term support (LTS) version if you have not already. Make sure you have all this checked before we start;

  1. Connection to the internet
  2. A browser that supports service worker
  3. A text editor; like VS Code
  4. Node.js. is installed
  5. Firebase hosting if you need to deploy it

Get the app

The important directory for our web app is going to be the src folder in which you will place all of your project files or start your new progressive web app project from.

Download the latest version of PWA Fire App here

NOTE : Checkout for the latest workbox release here and update the importScripts below say 4.0.0 to 4.0.1 if it's available ( though we shall always keep this updated here ) and update the service-worker.js file in the src folder.

The npm install command installs the project dependencies based on the configuration in package.json. Open ../app/package.json and examine its contents. Get more explanation here

1. Navigate to the app directory via the command line:

cd pwafireapp-master
cd app

2. Run the following commands to install the project dependencies:

npm install

3. Then build and serve the app with these commands:

npm run build
npm run start
Once you have started the server, open the browser and navigate to http://localhost:8081/ to view the app. The app is a simple one page progressive web app which just showcases a working PWA Fire App.

Add your project source files or start a new project

Open the src folder in your text editor. The src folder is where you will be building your progressive web app or copy all your projects source files as in the app structure below

Make sure your source files are placed as in the app structure.
Add or create your source files as in the app structure shown below. For example, you will place all .css files in the css folder.
          │   ├── src
          │       ├── assets
          |          ├── css
          |          ├── js
          |          ├── scss
          │       ├── images
          |          ├── icons
          |          ├── others
          |       ├── pages
          │       ├── index.html
          │       ├── app.webmanifest
          │       ├── service-worker.js

For the images folder, make sure you have all your app icons in your project as shown above. The icons should be of sizes as in the app.webmanifest file. Atleast have an icon size of 144x144 is required for our progressive web app to install.

Generate your progressive web app icons here Unzip the icons and copy them to the icons folder of the PWA Fire App Open app.webmanifest and configure your web app name, short name and theme color (must be the same as specified in the index.html).

For the others folder; You could rename it to say team and add images to it but make sure to update that in the service-worker.js as shown below; Just an example of extra folders you may want to add to your project or your project has.

   /*  cache images in the e.g others folder; edit to other folders you got 
   and config in the sw-config.js file
    new workbox.strategies.CacheFirst({
      cacheName: 'images',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
          purgeOnQuotaError: true, // Opt-in to automatic cleanup.

If you have different pages or directories for example speakers for an event Progressive Web App, then add it to the sw-config.js as shown below and or rename pages to speakers

     /* add url for other directories in the format 
    "directory/*.html" as shown below ; *directory*
     could be any name eg *pages* */

You could also, as an option to the above ; cache resources from a specific subdirectory. Add url for other sub-directories that a user visits depending on his or her needs "/subdirectory/" as shown below ; *subdirectory* could be any name eg *latest* if a user shows interest in *latest* category of a News App; this means all .html articles, images in the *latest* route that the user reads, get cached

  /* cache resources from a specific subdirectory
  -- notes --
  add url for other sub-directories that a user visits depending
  on his or her needs "/subdirectory/" as shown below ; *subdirectory*
  could be any name eg *latest* if a user shows interest in *latest* categ of a news app; 
  this means all .html articles in the *latest* route that the user reads, get cached 
  new RegExp('/latest/'),
  new workbox.strategies.StaleWhileRevalidate({
    // use a custom cache name
    cacheName: 'latest-cache',
    plugins: [
      new workbox.expiration.Plugin({
        // max number of items to be cached
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 Days

To make your progressive web app more discoverable and your pages built with best web practices, configure your pages as in the head tag of the default index.html in the src folder.

    -- notes --
    if you are using *NetworkFirst* cache strategy, 
    this should come first : )

Build your progressive web app

After configuring your project to the app structure above; let us build and even deploy it! Then build and serve the app with these commands:

npm run build
npm run start

The web app files are copied over to the build folder when the npm run build command is run, and the server (is started with npm run start) serves these files from the build directory.

Alternatively, you can test your web app using chrome web server and host with firebase as in this codelab. You are done! Welcome to Canaan!

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

What's next?

We shall be publishing another codelab on how to add push notifications to your progressive web app. Taking these codelabs allows you to build small but exciting web experiences for your target users.


Donate a Star and Contribute in any way. Be sure to follow us on Twitter.


Licensed under an MIT License.

Next >> Second Iteration