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