PWA Template

Just in case you don’t know what progressive web apps are, they are basically websites that can be installed on devices to behave like traditional apps. They are quite cool in many ways but for me the thing I like most is that you can create PWAs with the language of the web, a single format, easily accessible by most devices.

When building progressive web apps I have found that it can be a bit of trick getting the core elements in place to get it all basically functional and installable as a PWA. Here is a simple and minimal set of core files that can be used as a starting point / reference to build progressive web apps. This template includes a basic html file, service worker script, JSON manifest, and icons.

At the time of writing this post this demo ticked all the boxes in Chrome Lighthouse to validate as a progressive web app / PWA.

Even though this template doesn’t do anything as such, I have used this general setup to build a few basic web apps which you can see in my portfolio.

To work with this template you will need to update the code and icons accordingly. The main thing will be to replace all the links / addresses that are to the files on my own site, with your own. You will also need to put the files on your own server with an https address (SSL Certificate). And of course you will want to include your own cool app content. 😉

At some point I’m hoping to create some of my own tutorials about developing PWAs but until then this template assumes that you already have at least a basic understanding of PWAs and coding in HTML and Javascript etc. I also have some introductory coding tutorials that you might want to check out if you’re a beginner.

Open Demo

Download Zip