# Workshop: Turning a web app into a PWA
You may have heard about Progressive Web Apps (PWA) in the latest web trends. What is it all about and how do they improve classic web applications ? This workshop will let you understand PWA better with a bit of practice 💪.
We will transform together a classic web application into a PWA. This will enable the user to have a basic offline mode, and to install the app on his smartphone with a shortcut on the homescreen.
- A computer with a code editor such as Visual Studio Code (opens new window)
- Google Chrome (PWA are supported on most browsers but to facilitate the organization of the workshop, we will all use the same browser during development)
- A local web server (if you don't have any, try npmjs.com/http-server (opens new window) with
cd app && http-server)
- Clone or download the example web app (opens new window) which is located in the app folder (opens new window) of this repo.
- Open the
appfolder in your code editor.
- Configure your local server to serve the
appfolder with HTTPS (see instructions below).
- Load the
app/index.htmlpage on Google Chrome. A list of attendees should be displayed.
# Local development with SSL
PWA require the use of HTTPS. This not a big matter for a deployed PWA because most web hosts provide HTTPS out of the box. However, it is not the case for local development. In fact, it requires manually generating and installing certificates to the certificate store. Fortunately, there is a cool CLI tool called mkcert (opens new window) that simplifies these steps.
Let's setup our local HTTPS server by following these steps:
- Install mkcert (opens new window) as indicated in its GitHub page
mkcert -installto install a local CA (Certification authority)
Created a new local CA at "/Users/****/Library/Application Support/mkcert" 💥 The local CA is now installed in the system trust store! ⚡️ The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊
- cd to the website root
- Run this command that generated certificated for our server:
mkcert localhost 127.0.0.1 ::1
Using the local CA at "/Users/****yassinebenabbas****/Library/Application Support/mkcert" ✨ Created a new certificate valid for the following names 📜 - "localhost" - "127.0.0.1" - "::1" The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅
- We will get two pem files. These will be used by our SSL enabled dev server.
- Install npm package
http-serverif not done already with :
npm i -g http-server
- Run the server in SSL mode:
http-server -S -o -C "localhost+2.pem" -K "localhost+2-key.pem"
In this part, we saw how to install a Service Worker, and how to manage two Service Worker lifecycle events: install and activate. Now, let's see how to do something useful with this Service Worker.
# Steps of the workshop
- Add a web application manifest
- Install and activate a Service Worker
- Pre-caching of static assets for a basic offline mode
- Cache/Update/Refresh Strategy for the API GET requests
- Background sync and examples of push notifications
- Presenting an install button