Samsung Internet Developers

A beginner’s guide to making Progressive Web Apps

You may have heard about Progressive Web Apps or PWAs for short, I’m not going to go into all the details of what exactly makes up a PWA or how they work. For the purpose of this post, a PWA is a website that you can add to your phone’s home screen and that will work while offline.

I know some HTML, CSS, JavaScript and how to use GitHub.
I am still new to web development and don’t want to learn why and how stuff works right now. I want an easy, basic way to make something that works without going through pages and pages of documentation and tutorials. Hopefully, this post will be all you need to get started in making your own PWA.

To make a PWA we need a website. This of course, assumes you can already make a website that scales well on all types of screens and devices. Luckily we don’t need to do that from scratch, we can use a template. I like the ones from HTML5 UP and Start Bootstrap.
Pick and download a theme, replace all the content with your own in the index.html. You can even change the colours if you’re feeling brave enough to edit some CSS.

For this project, I was making a landing page for Web Community Leads UK and IE. You can find out more about that by reading Daniels blog post about it, or by visiting the site I made https://webcommunityukie.github.io/
Making this website into a PWA doesn’t add much for most users as I’m not expecting anyone to add it to their home screen, but it will still make the experience better. I just wanted a small site to start with to get into making PWAs myself.

I wanted a really simple site, I liked Hacksmiths website and knew it was opensource so I downloaded and gutted it. I did keep in a link at the bottom of the site that refers back to them and the link to the code so people can fork our new site.

Now that we have a website we can start turning it into a progressive web app. To do this we need to add a few things to it which I’ll go through as we need them.

Testing your PWA

Lighthouse results before I started working on the PWA parts of the site

36/100 isn’t that bad considering I hadn't started doing anything to the site yet to make it a progressive web app.

Make an app icon

The Icon I made. Looking back I should have added rounded corners.

You now have an app icon 🎉
Time to put it on your site. The way I did this was by using this online icon generator tool. Feed it your shiny new icon and it will spit out a bunch of resized versions and some HTML code.
- Download the file it gives you and unzip it.
- Put the icons in a folder next to the rest of your site.
- Add the code it gave you to the <head> of you index.html file
- Make sure the path to the icons is right. I put them all in a sub folder so had to add “icons/” to each line.

Web App Manifest

Running lighthouse again will show you if the manifest works.

Lighthouse score after manifest and icons were added

Adding a service worker

To create a service worker you’ll need to do 3 things.

<script>
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(‘/sw.js’).then(
function(registration) {
// Registration was successful
console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); },
function(err) {
// registration failed :(
console.log(‘ServiceWorker registration failed: ‘, err);
});
});
}
</script>
  • Add sw-toolbox to your project. You just need to add this file to your root folder.
  • Create a new file, call it “sw.js” copy and paste in this:
‘use strict’;
importScripts(‘sw-toolbox.js’); toolbox.precache([“index.html”,”style/style.css”]); toolbox.router.get(‘/images/*’, toolbox.cacheFirst); toolbox.router.get(‘/*’, toolbox.networkFirst, { networkTimeoutSeconds: 5});

You’ll want to check that all the file paths look right and edit the precache and list all the files you want to store when offline, I only use index.html and style.css for my site, but you may have other files or pages.

Now, let’s test it with Lighthouse again.

After adding a service worker - Tested on localhost

If you want your service worker to do something slightly different than just save certain pages, such as show a specific offline page when you don’t have internet access you can try out pwabuilder which has a few different service worker scripts you can use.

Hosting it on GitHub Pages

Lighthouse results after hosting the website on GitHub pages

The code: https://github.com/webcommunityukie/webcommunityukie.github.io

The finished site: https://webcommunityukie.github.io/
It looks exactly the same as when I started, but when browsing it on Samsung Internet the address bar will change to the theme colour, a light purple. A plus icon will appear which will let you add it to your home screen, which will let you open it up in full screen and use it offline.

There is a lot more to PWAs than mentioned in this post, you can get them to send push notifications when your app gets new content. You can read more about what makes up a PWA.

I hope this has helped you get your first taste of making progressive web apps, if you got stuck along the way don’t be afraid to leave a comment or tweet at me.

Programmer, Game Developer, Event Organiser. she/they