Progressive web applications (PWAs) can be built to make inconsistent internet connections much easier for users to handle. For example, offline-first web apps like this one that store shopping items locally. That example PWA was built with Hoodie and added a service worker script that enabled the app to load when it was offline. We can add more functionality to that PWA to make it even better for users.
In this post, we’re going to clone our progressive web app and make it installable. Being installable means it’ll be added to the device’s home screen and launched like a native app. To make it installable, we’re going to add a web app manifest and add Workbox to the build step to automatically generate a service worker.
Getting ready to code
To code along with me, you’ll need the following:
- NodeJS version 6.6.0 (or higher)
- npm version 3.6.3 (or higher) …
Progressive Web Apps (or PWAs for short) aim to deliver a better and engaging user experience by applying progressive enhancements using modern web standards and best practices. These include among others service workers, push APIs, background sync and serving your page over HTTPS.
If the app is loaded in browsers that doesn’t support a web standard, it should work just like a normal website. In modern browsers, however, the experience should be improved by ensuring the app:
- works reliably irrespective of the user network condition (4G, 3G, 2G or offline)
- is installable and feels natural on the user’s device
We’re going to walk through building a shopping tracker PWA which will introduce you to working with Service Workers, the Cache API, and Hoodie. To follow along, you’ll need to have Node.js and npm installed.
To set up your environment, clone the files on https://github.com/pmbanugo/shopping-list-starter. …
- Some familiarity with Node.JS and Express or a similar framework
- Have node, git, and npm installed.
Below is a peek at what we’ll be building, and the completed source code of what we’ll be building is on GitHub.
Setting Up Twilio Chat Service
To get started we need to create a Chat Service from the Twilio console. If you don’t already have a Twilio acc …