Progressive Web Apps

The first week of my new job has been interesting. This is a smart group of people who are engineering some very high end eCommerce websites for big clients like Coopers Beer & Haighs Chocolate.

One of the things I’ve been working on recently is the idea of creating enhanced front ends for exiting systems like WordPress or Magento. I’m thinking about Single Page App using React or something similar to connect to a RESTful API provided by the system being enhanced. The idea is to leave the older display layers in place for the search engines to index but then adding an uber-display layer on top for users whom it suits.

What I’ve learned here at Aligent is that this is already an idea which is quickly taking shape in the ever speedy world of web development. There are a few concepts I hadn’t thought of, but essentially what I had in mind was a Progressive Web App. I’m on it.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

A Progressive Web App is:

  • Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
  • Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
  • App-like – Feels like an app to the user with app-style interactions and navigation because it’s built on the app shell model.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
  • Discoverable – Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable – Makes re-engagement easy through features like push notifications.
  • Installable – Allows users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily share via URL, does not require complex installation.

Webpack

We’ve plenty of experience using webpack module bundler version 1 & 2 for around a year to handle the tooling around hot module replacement development and transpiling our react apps into build versions.

What is webpack?

webpack is a module bundler for modern JavaScript applications. It is incredibly configurable, however, there are Four Core Concepts we feel you should understand.

Entry

webpack creates a graph of all of your application’s dependencies. The starting point of this graph is known as an entry point. The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application’s entry point as the contextual root or the first file to kick off your app.

In webpack we define entry points using the entry property in our webpack configuration object.

The simplest example is seen below:

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

There are multiple ways to declare your entry property that are specific to your application’s needs.