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 Stu...