Workshop: Turning a regular website into a Progressive Web Application
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.
app
folder in your code editor.app
folder with HTTPS (see instructions below).app/index.html
page on Google Chrome. A list of attendees should be displayed.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 that simplifies these steps.
We propose for this workshop an automatically configured web server with Vite that uses mkcert to generate a local SSL certificate. If you want to use it, you will need to have Node.js installed on your computer. After that, run the server with: cd app && npm i && npm run dev
. On first run, it will ask you to install the certificate in your certificate store. Accept it and you are good to go.
Of course, you can use any other web server that supports HTTPS. In this case, you will need to generate a certificate with mkcert and configure your server to use it.