Do You Know the Way to PWA?
What is a progressive web app, why build one, and how to convert your current website into one
When you hear progressive web app (PWA), you may think Steve Jobs, Pinterest, or “what is that again?” As a new software engineer, having just completed a 17-week immersive full stack program, I was in the third group less than a month ago. Since then, I’ve read many an article, watched many a video and pieced together not only what a PWA is and does, but also how to convert an existing site into one.
The What and Why
Let’s start with the what. PWAs are web apps that have the look and feel of native apps on mobile devices. For example, you can visit the site on your smartphone, add it to your home screen, and the next time you click on the icon, an app is launched instead of opening your browser. Not sold on how neat that is and still stuck on the why? Think of a website you frequent on your computer and phone. If it’s not a PWA, that company invested a lot of resources into a web team and a separate native app team. If it is a PWA, it could very well be one team that made both happen. If you’re still looking for the cherries on top: PWAs can work offline, use much less storage space on a user’s device than a native app uses and often increase the use of your app because of the ease of accessing it from the home screen.
Convert Your Site
One way to gain experience with building your first PWA is to take a website you’ve created and, with just a few adjustments, you’ll be able to add it to your mobile home screen. Let’s get started!
All PWAs make use of a manifest file and service workers. Unfamiliar with these terms? There’s a PWABuilder for that. Visit pwabuilder.com, enter your site’s address and click Start. You’ll be taken to a page that shows the breakdown of how close to being a PWA your site currently is, based on the manifest, service worker and security. Click on Build My PWA and then on Progressive Web App to download all the code you’ll need.
The manifest file communicates important information about your website to the browser on the user’s mobile device. Add the manifest.json to your project in the root folder, and make sure at least the name, short_name and start_url fields are correct. The short_name refers to what will appear under the icon on the home screen. Note that if you are running your site locally, you can change the start_url to “/” as long as you change it back before you deploy. Make sure you have at least two icons — one sized at 512x512 and another at 192x192. Here’s a great tool for resizing images. Lastly, ensure the display value is “standalone,” as this will give it that native app look.
You should have also downloaded a file titled pwabuilder-sw.js — add this to your root folder as well so that it can control requests from all files at this domain. This is your service worker — a script that runs in the background, intercepting network requests and caching or retrieving resources. You’ll notice a comment in the downloaded file to replace the offline fallback page with your own, so if you don’t already have a suitable file, make an offline.html that will tell the browser what to render when the user does not have a connection. Checkout this code for inspiration.
You will need to register your service worker, and this happens in your index.html. You have also downloaded a file titled pwabuilder-sw-register.js, with a few lines of code for you to paste into a script tag in your html file. Lastly, take a look at the final file that you’ve downloaded — next-steps.md — which provides you with the line of code to link your manifest file in your index.html. It also includes helpful information in case your site is unable to register the service worker. If this happens, you can manually add the service worker in a script tag in your index.html using the provided code. (Check you’re using the correct file path.)
Check Status
You should now be able to redeploy your site as a PWA! But how do you know if you did? While it may not look different on the web, you have some helpful developer tools at your disposal. Open your browser console and go to Application. Here you will see a Manifest tab, which should be detecting your new manifest file. Then check Service Workers to see your registered service worker. Not registered? Check the URL and try changing it to https. A helpful note to anyone deploying with Heroku as we often did in my program — Heroku provides you with both an http and https web address. It won’t handle redirecting http to https, but save that for your next steps.
Lastly, utilize the Lighthouse extension to generate a report for both desktop and mobile. Make sure you have checked the box for Progressive Web App and get your report. You don’t need to meet all of the requirements in this report to have successfully launched a basic PWA, but you’ll notice some are more important than others. And take advantage of the “learn more” links for some very clearly written explanations of what may still be needed.
At this point, you can also revisit the pwabuilder report by re-entering your URL. It feels good to see your updated results in the report, but you know what feels better? Visit your site on your mobile browser, add it to your home screen and bask in the feeling of a job well done when you see your icon appear as if you just downloaded it from the app store! Open it up, notice it no longer has anything to do with your browser, and realize you just made a PWA.
