Transforming Your Site Into A Progressive Web App
Last time, I introduced to you Progressive Web Apps (PWA). If you haven’t read about it, you can read it here.
To make your site progressive, you need to have a Service Worker and a Web App Manifest as discussed from the previous article.
For me, this is a fast and easy way. I won’t get too technical with stuff. Let’s get started!
Setting Up Your Service Worker
Service Worker is a Javascript file that interacts with the request. It does not load synchronously or asynchronously with the website but it executes just before rendering your website or runs on the background IF the service worker is already registered on your browser. If a PWA is loaded for the first time, it does not run on the background since it is not yet registered.
So how do I register my Service Worker?
On your Javascript file on your website:
// some codesif ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
As easy as that! It basically checks if the browser supports Service Workers and when it does, it registers your Service Worker file. Notice, that we named our Service Worker to service-worker.js.
IMPORTANT: Do not call your service-worker.js inside your website like
<script src="./service-worker.js"></script>Cool! We registered our Service Worker but where is our Service Worker file? We will generate the file instead of coding it by using sw-precache by GoogleChromeLabs on GitHub.
On your terminal, run:
$ npm install --global sw-precacheIf you don’t know npm, you might wanna visit their website first and how to install it here.
Once sw-precache is installed, you can start running on your website directory:
$ sw-precacheThen you’ll get
Total precache size is about 15.8 MB for 100 resources.
service-worker.js has been generated with the service worker contents.Configure your Web App Manifest
If you really want to make it quick, you can use a generator. There’s tons of them online. Here’s the first result in Google.
- Fill up the fields needed
- Copy manifest.json
- Create a new file called manifest.json on your root directory of your website
- Paste it!
- Copy <head> section
- Paste it inside your head tag of your document.
Let’s test it!
When you deploy your website or run it on localhost, you can check if the service worker is registered and installed on Chrome by:
- Press F12 to view Chrome Dev Tools
- Select Application Tab
- Select Service Workers on the sidebar
You should see your service worker activated and running.
Awesome! Now try ticking the Offline checkbox to simulate what would happen to your website if they were loaded without an internet connection. Try reloading and you should still see your website.
Improving your PWA
Doing the following steps does not mean it’s perfect. Each and every site has it’s own implementation that may affect user experience, page load speed, performance, etc.
Good thing Chrome Dev Tools has your back. You may perform an Audit with Lighthouse to help you identify problems on your website that affects performance, accessibility and user experience.
- Press F12 to view Chrome Dev Tools
- Select Audits tab
- Click Perform an audit…
- Tick all the checkboxes
- Run audit
After a while, it will give you a report about your website that’s something like this:
In here, you can check what is needed to improve your website.
If you want to go through advance stuff, you might want to consider reading sw-precache documentation on Github or even write your own service workers. Let me know how it works out on your website.
Thank you for reading!