Skip to main content
PWA template resource
PWA template resource

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.

PWA optimised – Chrome Lighthouse results

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.

PWA Online Demo
Download Zip


If you would like to stay in the loop when I publish new content your best bet is to join my mailing list, as I don't tend to post my tutorials and articles to social media. Otherwise you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.

If you liked this resources please consider showing your appreciation and offering your support. It will make my day!

Buy me a coffee

Filed under:
Resources, Web Development

Similar Resources:

Cross Browser Range Input Slider

Cross Browser Range Input Slider

An ultra simple, easily customisable, cross browser range slider. Includes widened interactive track area and track value highlight.

Blender 3D Art Template File

Blender 3D Art Template File

A Blender template file containing a range of finely tuned lights, cameras, objects, materials, and animation examples, for creating beautiful digital art.

About Me

Hi, I'm Henry Egloff - a multimedia artist, designer, and coder, based in Byron Bay Australia. I create digital art, design and code apps, write articles, and develop tutorials.

I specialise in designing and building dynamic and interactive media with languages like HTML, CSS, PHP, and Javascript, and using tools like Three.js, Blender, Adobe, and Unity.

I love working creatively and helping people learn.

I'm currently available for freelance / contract projects and online tuition roles. Learn more about me or say hello at contact@henryegloff.com.

Henry Egloff
Twitter Twitter 2 Facebook Linked In Instagram Codepen Behance Youtube Opensea Heart Dark Mode Light Mode