Progressive Web Applications (PWA) - Initial Setup

Progressive Web Applications (PWA) - Initial Setup


There are a multitude of articles on the 'ol interwebs about progressive web apps (PWAs) so I will not re-invent that laser surgical tool, but feel free to peruse some before you dig into this glorious article:

The focus of this article is to aggregate the curated best info and put it in a logical order. The hope is that some missing or glossed-over parts will be explained sufficiently.

Let's begin

Choices

When deciding to make an application, a developer has many paths they can choose:

  • They can make a native app using Java/Kotlin for Android or Swift/Objective C for the fruit phones.
  • They can make a web app.
  • They can make a progressive web app.
  • They can forget the whole thing and go watch the new Marvel superhero movie.

We are here to learn the progressive web app route!

What makes a plain 'ol web app progressive?

According to Google, a web app is made progressive by following these guidelines (for Chrome):

  1. App must be served over SSL (secure socket layer/https)
  2. App must have a web manifest file (manifest.json)
  3. App must have a service worker (ServiceWorker.js)
  4. App must have at least these two (2) favicons: 192x192 px & 512x512 px

Hold up! What is the definition of an app, or for that matter, what's a web app?

Well, here are two technical definitions:

A web app is simply application software coded/written with web code (HTML, CSS, & JavaScript) and accessed with your favorite web browser (e.g. Chrome, Firefox) which are also applications themselves.

If I were to give a more nuanced definition, I'd add the following:

Web apps can take two forms, passive and interactive. Passive is simply a web page that dispenses information to the visitor. Interactive is an app that allows the user to input data and get results returned (Like a weather app that allows you to put in a zip code to see the weather in that locale for the next ten days).
Passive analog app example
Passive analog app example!

Almost any app can be made using web code unless you need to access specific device hardware that can only be accessed with a native app. Please use this list for a complete, updated list of what's possible with modern web apps.

Curated best-practice code layout

As this is an intermediate tutorial, I assume that you are skilled somewhat in the following topics: HTML5/EJS, CSS3/SCSS, & JavaScript/ES6. If you aren't or need to brush-up, please see my previous tutorials: 1, 2, & 3. HERE is my Node.js web server tutorial.

A good directory structure for your app should look like this:
Directory Layout

Starting at the top & working down, here is what you are seeing:

  1. .idea (You can ignore that as it's created by my IDE [IntellijJ IDEA]).
  2. bin ~ This directory contains the small script that bootstraps the app (upload_server).
  3. data ~ This directory contains all server-side data like databases , SSL certificates, and .csv files.
  4. documentation ~ This directory contains all of the programmer documentation like useful URLs, JSDoc, & special instructions to programmers.
  5. node ~ This directory contains all of the server-side Node.js code.
  6. node_modules ~ This is the directory that npm creates when you install Node.js libraries to support your app. (Should be listed in .gitignore)
  7. public ~ This directory contains all of your client-side code broken into subdirectories.
  8. css ~ This directory contains your CSS framework file, your SCSS files, and compiled CSS files.
  9. fonts ~ All of your woff's and woff2's go in here.
  10. images ~ Hmmmm, I wonder what goes in hereā€¦. Probably all of your app images!
  11. javascripts ~ This directory contains all of your OOP'd client-side JavaScript files (class files).
  12. views ~ This directory contains all of your HTML or template files. I am using EJS (Embedded JavaScript) here.
  13. Miscellaneous files in root directory ~ .eslintrc (used for ES6 linting in my IDE), .gitignore (used to tell Git which folders/files to ignore), app.js (THE main https server code [route handling, mime type handling, & communication the the DataHandler.js to return requested files to client]), jsdoc.json (config file for jsdocs), manifest.json (web manifest file for PWA functionality), package.json (app config file), package-lock.json (created by NPM when installing dependency libraries [Stereo Instructions Here]), README.md (a markdown file used on GitHub to tell folks about your app), ServiceWorker.js (One of the main files need for PWA functionality).

What now?

Now that you have seen how to create a nice code package layout, I recommend the following tutorials on how to make a PWA from a regular web app (remember, it is assumed that you already know how to code web apps).

There are really good tools out there to help you produce your PWA:


~Howard Bates, April 2019~