How I learnt Progressive Web Apps in a month and implemented it
#3 — Third month of my challenge: 12 topics to learn in 12 months
After relaxing at the beach and learning how to swim, I started with the third topic of my learning challenge, Progressive Web Apps (PWAs).
You may be asking yourself what are Progressive Web Apps. It’s the future of websites. Isn’t it clear enough 😬 😬 ? To put it in another way, PWAs are the websites that look similar to a real mobile application by using the latest web technologies. It takes advantages on the new capabilities of our modern web browsers (caching, push notification, mobile sensors, …).
I know this explanation is a bit vague, I wanted to give the simplest possible description of PWAs 😄.
Why do I want to learn about PWAs? Since I am a self-taught web developer and a designer, I need to know what are the latest technologies to be up to date and to bring the best experiences in the websites I build. Indeed, I already have the tech knowledge about development, and modern web frontend.
I discovered PWA for the first time during a frontend workshop in my previous company, IBM, and it totally got my attention when soon after I attended a MeetUp about this subject. Therefore I already know what the capabilities of PWA are. I only need to try it myself, to play with it, and to implement it in a real project, which I have never done yet!
Indeed as you can imagine this article may contains some technical parts. Therefore I moved the technical part in another article that you should read if you want to know more about the implementation.
Here we go again, let’s do it! I started this challenge on the date of the 7th of June!
Preparation
- Finding a mentor
I had to struggle a bit for this topic because I don’t have anyone around me who is expert on this subject. That is why I contacted the company who organised the MeetUp about PWA, NonDutch.
Rafael and Antoni agreed on helping me, and helped me to chose my learning resources. - Defining the scope of the topic
What I want to understand about PWA is the different capabilities that defines it, to understand how to implement some assets caching, how to use the browser’s database, and how to create an offline mode. - Choosing a learning resource
I started by reading and doing the following tutorial (I also read the different articles that were suggested in it):
https://codelabs.developers.google.com/codelabs/your-first-pwapp/index.html
In addition I also read other articles while trying to do the actual implementation of PWA capabilities to my project, I shared them below. - Defining a project
Remember of my website Kanbanote? My new version is still in beta, and before releasing it I wanted to make it more mobile friendly by adding the mobile drag’n’drop. Since this month I am learning about the PWA, why not adding some caching feature to make it faster? That is why I will implement some caching of the assets (javascript, images, style files), and cache the latest data to make the loading seamless.
And at the end I will deploy it in production 🙌.
The course
The course is really good because it mixes theory and practice 👍. Here are a few information from it.
What is a Progressive Web App?
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, because the app shell model separates the application functionality from application content.
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 add apps they find most useful to their home screen without the hassle of an app store.
Linkable — Easily share the application via URL, does not require complex installation.
Source: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
What are the technologies & concepts behind PWAs
From my researches and readings, this are the technologies and concepts that makes a PWA.
- Service Workers — It enables caching, and background tasks like Push notification
- IndexedDB — A database in a browser
- WebSQL — A SQL database in a browser
- Localstorage — A place to store small amount of data in a browser
- Mobile sensors API — To get access to the data of a mobile like touch, mic, camera, motions, vibration, location
- Add to desktop — To be able to add the PWA in your mobile desktop and quick assess with a landing page (you need for that a Service Worker)
- Offline mode — It uses the Service Workers
- Web workers — To have a second thread to do calculations
The goal behind all of this is to make the web apps better, if possible as good as mobile apps, so you don’t need to download thousands of apps 😀!
The two mains elements you need to have a Progressive Web App are: the Service Worker (that requires https), and the manifest.json (a file that contains images, and meta data about your project and that it will be used for the splashscreen).
Once you have those, you would be able to see this message “to install” the PWA in your desktop.
Examples of PWAs
If you want to see examples of PWAs, check this website: https://pwa.rocks/
I personally really like this very beautiful one, Paper Plane and also Twitter Light very convenient when you don’t want to install Twitter app.
Theory & practice
In order to build your first progressive web app you need to understand these two concepts.
- App Shell — Minimal code (HTML, CSS, JS) that defines the main user interface; this should be cached for faster loading and to be instantaneously displayed like in mobile apps
- Service Worker — script that runs in background of your browser separated from your website
This course showed me step by step how to:
- Build the app shell.
- Create and install a Service Worker.
- Cache the app shell.
- Cache the results coming from the API call and to display them before the call is done.
Advanced information about PWAs and Service Workers and my implementation on Kanbanote
If you want to know more about PWAs, how to create, debug, test a Service Worker and how I implemented them on Kanbanote with Webpack and React I invite you to read my other article (for technical people): https://medium.com/learning-lab/how-pwas-works-and-how-i-implemented-it-with-react-and-webpack-523381b1b7a4
The final result
Tada !! Here it is: https://www.kanbanote.com
I hope you will like it, it’s made with a lot of work and a lot of love.
Just for you to know I use Kanbanote in a daily basis (or even in a hourly basis) so I will always make it working well.
Feedback from this learning month
What went well
- The practice of the theory in the online course (codelabs).
- To find myself how to apply to my project
- I know what to do to make any website a Progressive Web App
- I know what are the capabilities of PWAs
- I understand the different caching strategies
- I know what to explore next
- Kanbanote release
What to improve
- Communication with the mentors, it would have been easier to have a number to call or to chat on WhatsApp / Hangouts
- I took a bit more than 30 days , and at the end I didn’t pushed to prod but only to beta, the 13th of July. The production version has been released the same day as the article.
- Create a real offline mode
- Understand better how to take fully advantage of Webpack (maybe one of my next subject)
- I forgot to take advantage of Google Lighthouse when developing to improve the PWA
If you liked this post, please click the clap 👏button below a few times to show your support! Also, feel free to comment and give any kind of feedback. Don’t forget to follow me!
Want to see more articles like this one ? Support me on Patreon 🙌
