Progressive Web Apps are coming – slowly

Maybe you have already heard of them, maybe you didn’t: Progressive Web Apps are out there and waiting to be on your home screen. But what is a PWA?

What are they?

Progressive Web Apps are a high requirement for websites to deliver the best user experience you could have in the modern WWW. If you want your website to be a PWA you should develop it to be reliable, fast and engaging. This is how Google describes them, they have a great website about it which you should check out.

I am a Frontend Engineer and due to that it’s my daily business to keep an eye on technology like this and educate myself to stay up to date. I recently developed a small web application to learn more about PWAs and I am quite excited. It was fairly easy to prepare a web app into a progressive web app, just by running ng add @angular/pwa in the CLI. Of course that’s not it but you will have to take care of a few more aspects to make an app work quick and also offline.

Let’s go through an example – DISOPO.com

A few weeks ago I read a passage of the book The Compound Effect by Darren Hardy telling me to track some progressions through my daily life, for example my expenses. The book told me that I will get a better overview of all the small and minor expenses and how they will sum up. I should write them down in a notebook for a week.

I thought: “A notebook… huh, I will just develop an app”

I was already reading a lot about Progressive Web Apps so I thought this would be a great inspiration to make a web application.

In the beginning I had a Shortcut on my iPhone that would write the time, amount of the expense and description of the expense into a database using a REST API. In the next step I created a small Angular application that would get those database entries and display the expenses today, yesterday, last week, this month and last month.

This was already a neat application and it did all I wanted – for now. Then I thought about making it a real Progressive Web App that could work offline as well. Meanwhile I was researching IndexedDB by using DexieJS and thought that it would fit great.

The result is DISOPO.com – a progressive web app you can use to track expenses – simple as that.

Reliable, Fast, Engaging

So, DISOPO.com is reliable because it

• works offline and online, independent of the connection.
• caches all important information on the first visit.
• uses IndexedDB to have persisting storage (instead of Local Storage).

The website is fast because it

• was compiled using Angular 8.3 with enabled Ivy so it has a small package size.
• is being transferred to the client gzipped (~300kb total downloaded size).
• all the code is already available after the first visit so clicks and actions are instantly.

And at last DISOPO.com is engaging because it

• can be installed on the home screen of smartphones and desktops.
• updates itself automatically in the background.

You should give the web application a try just to see how fast and consistent it is working.

Conclusion

You should try developing your next website to be a Progressive Web App.

PWAs will result in more engagement in your website which is especially interesting when your are selling something online because that might lead to more conversions.

I see many websites that have the tendency to be poorly developed because there is no real compilation (if you’re not using something like Angular ) or other high requirements. PWAs are the first time I see developers improving the overall page quality and thereby also the code quality. When you visit a PWA for the first time you feel the way that it is reliable, fast and engaging. And that’s just awesome.

But you know what’s awesome as well? Using Macs for Frontend Development.