The web is at the heart of many modern business applications. We use browsers as the universal interface for our services, wrapping them in familiar HTML and JavaScript. If you’ve got an internet connection and a browser, you’ve got access to an application, whether on your PC or on your smartphone.
But what if you need access to more than the keyboard and the mouse, such as using cameras or other device hardware in your code?
That’s where the next iteration of the web comes in to play, the progressive web app. Progressive web apps originated at Google, with a focus on the mobile web and the prospect of being able to deliver web apps that can work offline. With cross-platform support a key deliverable, it’s an important shift, one that goes further than Microsoft’s existing hosted web apps. Build a progressive web app for Android, and it should work on a future release of Windows 10.
Unlike traditional web apps, which you bookmarked or pinned to the Windows task bar, progressive web apps are installable. They’ll launch like apps, without the familiar browser frame, and they’ll work offline.
Progressive web apps in the Microsoft Edge browser
Microsoft is starting slow with its progressive web app support. Windows 10 will add support to the coming Fall Creators Update release Microsoft’s Edge browser, which brings service workers to Microsoft’s JavaScript platform. Initially, however, that support will be hidden behind a developer flag, so you’ll need to explicitly enable it from the About:Flags view in Edge.
Progressive web apps will eventually be available through the Windows Store, with Microsoft planning to scan the web for progressive web apps and to provide store entries for a curated initial set. One initial candidate will be a progressive web app version of Office 365’s Teams collaboration tool, currently hosted in Electron on Windows devices.
Although there may be some controversy about automatically adding progressive web apps to the Windows Store, using the Windows Store to manage progressive web apps makes a lot of sense—especially if you’re using the private Intune stores to deliver and manage your apps on managed devices.
How to build progressive web apps for Microsoft Edge: Use service workers
So how do you go about building a progressive web app?
If you’ve built a hosted web app for Windows 8 or Windows 10 or have used Apache Cordova, you won’t find the jump to progressive web apps that jarring. The underlying principles remain the same, but now you’re building cross-platform code that works on a wider range of hardware.
Under the hood of a progressive web app is a new HTML feature, the service worker. Service workers take what would have been server functionality and bring it into your web content—along with adding support for some native platform-like features. It’s that ability to abstract the web server that makes progressive web apps attractive, because the same underlying web code will work on the web for devices that don’t support progressive web apps, increasing your reach and making sure that users on other platforms aren’t left out.
Service workers are event-driven scripts that respond to actions from your UI or from other service workers, giving you a simple structure that can support increasingly complex code. They’re not intended to work with your content—they send messages to and from the page, with familiar JavaScript code and libraries handling layout.
They store data from remote services, or from inside the app, using a local database—usually in something like the IndexedDB object database that’s built into most modern browser engines like Edge’s EdgeHTML. They also work inside the same security context as your browser, reducing the risk of being used as a way of compromising PCs and smartphones.
How to design a progressive web app: the underlying development model
The underlying development model is close to the one used by single-page web applications, with a shell of HTML and CSS code that loads dynamic content on the fly via JavaScript.
Once installed, service workers handle locally cached content, loading and displaying your application’s UI and launching the app. Other content comes from user interactions or from online sources. The result is a web application that behaves like native code. An application manifest holds details of the files and scripts used to launch the app, bringing together HTML, CSS, images, data, and details of your application’s service workers.
It’s important to understand that service workers are asynchronous, each one operating separately, using promises to handle callbacks. Applications register the service workers they’re using, and the browser installs a service worker and sets its scope.
Service workers are independently updatable: You can unregister and install an update without affecting the rest of a progressive web app. There’s no need to reload the content of an application if you’re only changing part of the business logic. That means you can provide small, regular updates when users are online.
There’s also a link between progressive web apps and the growing move to web components for UI elements. Constructing components and attaching them to custom elements simplifies your code, making it easier to maintain and to understand the interactions between your progressive web app and the underlying service workers.
Templating sites and using components also makes it easier to keep online and offline content in sync, while using media queries and other related CSS features lets your progressive web app work on desktop and mobile devices.
Speed progressive web app development with PWA Builder
One way to simplify the building a progressive web app is to use a toolkit like PWA Builder (formerly called Manifioldjs). You start with the manifest for your new app, built from a scan of a website. There are web and command-line tools to handle the entire process, including importing existing images and converting them to icons for all the supported platforms.
PWA Builder also provides tools to help define and build the service workers that power your progressive web app. Initially, PWA Builder supports only basic offline pages, but more features are on the way, including pre-caching content to speed up the initial load of a progressive web app. Although PWA Builder creates only basic functionality, you can download that initial code to get started and then continue to work on it in your favorite JavaScript editor.
There’s a lot to like about progressive web apps, and it’s good to see Microsoft building support for them into Windows 10. Simplifying the cross-platform story is always good, and the underlying service workers architecture is flexible enough to support a wide range of app types.