Progressive Web Apps become superheroes when they can, while still providing a great baseline experience on less modern browsers. They're reliable, fast, engaging, and although they can do many of the things users expect from native apps, they don't take up a lot of space, or require a long install process.
In this workshop, we'll begin with a "classic" single page app, that's a bit bulky in size, has a slow initial load, doesn't work offline, and provides a very "basic" mobile web experience. We'll then enhance it in several ways, so that when key technologies are supported in your users' browsers, their experience ends up being substantially better!
First, we’ll add any mobile-specific metadata to the app, and look at how we can use android studio and the iOS simulator to test out our improvements. In order to reduce our page weight a little bit, we'll discuss how to choose between image types like png and jpeg, and some recent advances in compression.
Next, we'll add a service worker, and apply a few caching strategies to ultimately allow our app to work offline! Additionally, we'll take advantage of IndexedDb, so that new data created on a mobile device can be stored as a structured record, available both in our application and service worker scopes.
Then, we'll make use of Web Push and Notifications to engage our users bring them back into the app, and explore encryption and signing techniques that ensure our web clients only get messages that originate from our servers.
Finally, we’ll use Background Sync to further reduce our app’s dependency on a network connection, enabling it to be a free-standing piece of software that synchronizes with the rest of the world when possible.
Please make sure you have the following software installed before arriving at the workshop or beginning the course.
Please make sure you have the following general software installed
|✔||Node.js||>= 7.10||nvm is highly recommended for managing multiple node versions on a single machine|
|✔||Visual Studio Code||>= 1.14||We'll be using several specific features of the VS Code editor. We can't force you to use it, but you'll miss out if you don't!|
|✔||Yarn||>= 0.24||An alternative to npm|
|✔||Firefox||>= 50||We'll need Firefox briefly in order to create certificates.|
|✔||SQLite 3||>= 3||Embedded database|
Additionally, to take advantage of syntax hilighting, static code analysis and other editor features, you'll want to install the latest version of the following VS Code extensions
|✔||sass-indented||Syntax highlighting and code completion support for Sass stylesheets|
|✔||jest||Syntax highlighting for Jest snapshot testing and in-editor test pass/fail statuses|
|vscode-icons||Better file and folder icons|
|rest-client||An in-editor REST client, so we can experiment with our API effortlessly|
Make sure you have these npm packages installed globally. This can be done by running
npm install -g <package-name>
Finally, while in the top-level folder of this project, download the and install this project's dependencies by running
We'll also need some certificates so we can run a development webserver over HTTPS. You can generate them by running
To start the server, run
(Pro tip: If everything looks like it works, but you can't access the page in your browser, make sure you're using HTTPS. Try https://localhost:3000/.)
This is a free-standing client/server Progressive Web App system, including
Project │ ├─ client/ 📱 React.js web client │ ├─ components/ 📊 React components │ │ │ │ │ ├─ my-thing/index.jsx Component implementation │ │ ├─ my-thing/index.test.js Component tests │ │ └─ my-thing/styles.scss Component styles │ │ │ ├─ routes/ 🔝 Top-level React components, each corresponding to a "page" in our app │ ├─ sass/ 💅 Global Sass stylesheets │ ├─ app.jsx 🎁 React "App" component │ ├─ index.js 🎬 Web client entry point │ └─ index.ejs 📄 Template for web client index.html │ ├─ db/ 💾 SQLite databases ├─ dist/ 📦 Web client development/production builds ├─ server/ 🛒 Node.js API to support the web client ├─ webpack/ ⚙️ Build configuration └─ .vapid.json 🔐 VAPID private and public keys
npm run prepcerts
To start the development server, run
npm run watch
If you want, you can start the API and UI independently, by running
npm run watch:api # API only npm run watch:ui # UI only
This will be an un-minified version of an exercise, and will include some webpack-specific tooling, intended only for development use
npm run build:dev
This will be an an optimized version of the exercise
npm run build:prod
npm run clean
While the general license for this project is the BSD 3-clause, the exercises themselves are proprietary and are licensed on a per-individual basis, usually as a result of purchasing a ticket to a public workshop, or being a participant in a private training.
Here are some guidelines for things that are OK and NOT OK, based on our understanding of how these licenses work: