A simple explanation is that you are downloading a web page and all of its assets onto your desktop or mobile device. This allows you to access a lot of the functionality if you are either online or offline. The major benefit is that it makes it seem like your website is actually a native app.
Even get nice launcher icon:
What is a PWA?
PWA sites work in an offline first structure. So it will first check if you have anything stored in your cache. If there is nothing stored then it will connect online to download any resources into your cache. Then when you reload the page it will load faster and you don’t need to be connected to the internet.
Any website that you have can be made into a PWA . To get a basic setup you add a manifest and a service worker file to your website. I will just go through and explain the purpose of the two files.
A manifest is a JSON file which contains extra information that a website doesn’t have. However once you turn it into an app you will want the following information:
The next part we will cover is the service worker…
A service worker is a javascript file that caches all of your data into your device or webpage. When you load a webpage that can be made into a PWA, you are assigned a service work. This service worker will check your cached storage and then load any information about the site from there. If you don’t have any information then it will download onto your device.
When building a service worker you can set the names of your cache. When I am setting up a cache I make two. A static and a dynamic cache.
With the static cache I make sure that it stores everything that is permanent and unlikely to change unless the site is under development. For example, the files I store in my static cache are: index.html, serviceworker.js, manifest.json and the style.css. These are the main building blocks of the site. Other things you may choose to cache in your static storage are images that get used on multiple pages like your website logo or icons that get used in almost every page.
Everything else such as images can be downloaded into the dynamic cache as the site is loaded.
You may be wondering ‘why not store everything on your page in static storage?’. Well it is simple, why store a 70 page website when your user may only be using two pages? This means you can keep the storage size of your app down to only what your user needs. No need to store hundreds of images when the user will only see 6 of those from the pages they are visiting.
Using the service worker you can also decide what does and doesn’t get cached. For example, if your web page has videos, you do not want those to be cached unless they are absolutely necessary as video files are large.
Here you can create a landing page that your user will get sent to if the page cannot be loaded. This could be back to your home page or your own custom error page with links to cached locations. Even large sites like Youtube are taking a PWA approach, so if you end up offline you get a page like the following:
This is all handled by a service worker, allowing you to keep your website theme even when you are offline, making it look professional.
The main reason to make your website a PWA website is that it will speed up your website. When users make multiple visits your website loads faster. For example here is mcdsystems.co.uk when loaded for the first time:
Then once you reload:
If you notice the small graph at the top of each of these. The first time the site loaded it took just above 7000 milliseconds to load fully. But on the reload of the website, since everything is already cached it took 2000 milliseconds to fully load the web page.
Having your website as an app will mean that it will appear as an icon on desktop or mobile. This would be a visual reminder of your website, when users are looking through their device.
As an example, let’s say you have a website where you can upload photos, something like Instagram.
Your user is out taking photos of nature with their phone. When they try to upload their photos instantly or on the trip back they don’t have an internet signal. This is where firebase can become your best friend. By using firebase you are able to upload files to a local database on your device. Once you return into signal, firebase will automatically upload any files you have stored and download any new updated files. This will allow your users to prep their images and upload it without the worry that their data will go missing. All of their data will be mounted locally on their own device, waiting for the upload to complete.
In summary, PWA is a fantastic technology for all of the reasons I have mentioned above. It’s extremely useful with the load speed of your site and to have a web app that feels like it’s native.
There are however a few small issues currently with the technology. Android has taken up with PWA, and when you visit a site, you will get an option to download. However, iOS and Desktop still face some issues. iOS does not let you know that a web page can be an app, you have to go through options pages in order to install the app. This may be a more user-friendly experience as they don’t have to click no to every site they visit. However, your users won’t know that it exists as an app to download.
Desktop does let you know a site is PWA but I would guess most users don’t notice that there is a small button next to the favourite icon on chrome: If you click that then you are able to download the site as a PWA app.
However, lots of benefits of making your site a PWA are still applicable even if you don’t download the app. All the caching of resources still happens within your browser.
We are a Digital Agency in Teesside if you want to learn more about the benefits of PWA, Contact MCD Systems.
If you enjoyed this article, please share it on your favourite social media sites.
