Small Bytes: Progressive Web Apps (Premium)

Progressive Web Apps (PWAs) are cross-platform, installable web apps that combine the best of the web with the best of native apps. That is, like websites, PWAs are responsive, easily discoverable online, and are automatically kept up to date. But like native apps, they can be installed locally, work offline, and use native platform features.

PWAs are also curiously controversial in some circles: some believe them to be the future of cross-platform app development, while others feel that the hype is overblown and that PWAs are just one more way to create web apps.

The truth is likely somewhere in the middle, which makes some sense when you consider the meaning of “progressive” in the name. That is, PWAs are designed in such a way that they will progressively take advantage of whatever native features are available on the computing platform on which they’re run. And while this isn’t part of the definition, PWAs can likewise start small by supporting just a few features but can scale up functionally and adopt more native features as they evolve.

And maybe that’s the best place to start. Because a PWA is really just a website, or a web app, that is built on HTML, JavaScript, and CSS that meets some basic criteria: it must be served using HTTPS for security and privacy reasons, and it must include a manifest file that conforms to a standard and describes the web app’s name, icons, URL entry point, and other meta-data.

A basic PWA is just like any other website or web app when loaded in a modern web browser. But it is when developers adopt more capabilities that PWAs become truly interesting. The next step is to add a service worker, a key method by which PWAs can act more like native apps: service workers are JavaScript scripts that asynchronously run as background processes and work on behalf of the PWA to, among other things, determine whether the device the PWA is running on is online or offline and then behave accordingly. A PWA’s service worker is downloaded to the client the first time the web app loads and then it’s updated whenever the app fires an event or 24 hours have elapsed.

Once a PWA has a properly configured manifest and a service worker, it can also be installed locally on your PC or another device. Almost all modern web browsers—the main exception on the PC is Firefox—will then display an “install” icon or prompt and use the information in the manifest to present the PWA to the user when this icon or prompt is selected.

Installed PWAs look and behave much like native apps, and a shortcut to the app can be added to your Start menu and Taskbar on Windows or your home screen on mobile.

Launching and uninstalling this app also works as they do for native apps, though you can also perform both actions from within your web browser as well.

So what might it look like to create a minimal PWA?

As it turns out, it’s not that difficult, and you can test this locally using Visual Studio Code and Node.js (which includes its own web server), both of which are free. You only need a small handful of files, all of which can be located in a single folder. (And because you’re doing this locally, you can skip the HTTPS requirement.)

Microsoft describes these steps in more detail on its Learn website, but an even more basic PWA is made by creating a basic web page in HTML, a manifest file in JSON, a service worker in JavaScript, and an icon in at least one size. Then, you reference the JSON and JavaScript files from the HTML file. Voila: an installable PWA.

To test this, I created a folder for the project and opened it in both Visual Studio Code and Terminal. Then, I started the Node.js web server using the following command in Terminal:

>npx http-server

Then, I created a web page (index.html) with the following code:

Next, I created the manifest file (manifest.json). Technically, this file only needs to contain the name and icons, but I added a few other fields that will improve the installer flyout and the resulting app. The code looks like so:

Then, I created a service worker (sw.js). Here, I relied entirely on the code provided by Microsoft in the link above. Basically, this code will cache all of the resources I listed (index.html, in this case) locally when the app is installed so that it can run when the device is offline. Then, every time there is a server request, it will download information from the server if possible or, if not, use the cached resources. Since this is beyond basic, there’s no difference.

Next, I created an icon using the official PWA logo in transparent PNG format and copied it into the project folder.

Then, I referenced the manifest file using a link tag in the web page’s header and added a block of JavaScript code in a script block at the end of the body section to enable the service worker. So the code for that file now looks like so:

With this all done, I could test the PWA by loading it in a web browser.

As expected, the PWA is installable, and when installed with Microsoft Edge, I’m given choices to create shortcuts in the Start menu and on the Taskbar.

Of course, this PWA doesn’t do anything, so it’s not necessarily clear that offline support is working properly. That is, it will run normally when the PC is offline, but that’s because there’s only a single static h1 (heading 1) tag displaying some text. But as Microsoft explains, we can examine the service worker in Edge by opening developer tools (F12) and navigating to Application > Service Workers. And as you can see, the service worker is running, and so offline support is enabled: we’ll get the live version of the app when online and the cached version when offline.

Of course, this app is beyond pointless, so I can then uninstall it.

But looking past the bare minimum I did here, there are all kinds of other functionality one could add. A real web app would actually do something, and it would be styled with CSS. And a real PWA would usually present some form of UI and functionality when offline and perhaps an improved UI with more functionality when online. It could also take advantage of more native OS features, like notifications, location access, hardware access (camera, microphone, sensors, and so on), and more. You could even customize your PWA to work properly with the Microsoft Edge Sidebar, a process that requires just a few lines of code in the manifest file.

I may expand on this discussion to address some of these additions in the future.