Fully functional Progress Web App example and howto

General
1

I’ve just completed building a Progress Web App (PWA) using vaadin’s framework (8.2).

A PWA essentially allows you to install your web app to a user’s ‘mobile device’ home screen and when they launch your web app it looks and feels essentially like a native mobile app. You can see some screen shots here:

Pi-Gation Home

It was an interesting experience and so thought it might be worth sharing some details here.

The app is 100% PWA compliant and can be installed to an andriods home screen (looks like apple are going to support PWA in the near future).

The ability to install the app to the home screen has also increased the WAF (Wife Acceptance Factor) 10 fold.

I should first thank AMahdy AbdElAziz and his blog on PWAs that I used as a baseline for my work.
Its a good read so I recommend you start with his blog:
PWA Blog

The app I’ve built is an Open Source Irrigation controller built for the Raspberry PI.
Its a small app so its fairly digestible and I’ve created a how to article which points out each of the core pieces that you need to add into your own app to make it a PWA.

You can find the app on github:

Source Code

The PWA how to can be found here:


PWA How to

Hope you find it useful.

Regards,
Brett

2

That How to was really nice. Will implement i immediately. Thank you!

3

if you find any problems let me know and I will update the how to.

4

I really worked wonderfully. And Lighthouse is now very happy with my site :slight_smile:

The only thing I stumbled upon was when I have an ad-blocker installed the blocker is replacing calls with about:blank instead. And that fucks up ServiceWorker.js since it doesn’t understand the protocol “about”. I am adding about:blank to the cache on install to prevent this.