Building PWAs in the new Microsoft Edge

Microsoft’s switch from its EdgeHTML rendering engine to Chromium in the new version of Edge has made it easier for users to find and install PWAs (progressive Web apps). Navigate to a PWA like Twitter or Spotify in Edge and it’ll show an icon of a small circle with + inside it in the address bar. Click this and Edge installs the PWA version of the site, adding it to your start menu and supporting offline operation.

You shouldn’t confuse this with another Edge feature, the ability to add a browser tab to the start menu and use it like an app with minimal chrome around the page. This isn’t a PWA, it’s more akin to the Windows 8 feature that let you add bookmarks to the Windows taskbar—best thought of as a way of adding links to your favorite Web applications to Windows’ navigation.

Building PWAs

PWAs built using Edge are first-class Windows citizens. They install like any application, using HTTPS for security, and can access Windows services such as notifications. To get started, you must implement a service worker for your app, providing a proxy between the code running on a PC and your Web applications. They handle events and update local assets when necessary. Edge checks for new versions of service workers when users launch an application, ensuring that they always use the most up-to-date version. There’s no need to write code to manage updates; it’s all part of the PWA experience.

Tools such as PWAbuilder are a useful way of getting started, taking a URL and checking for the features needed to make it a PWA. The resulting checklist helps you get started with converting a Web application, while the service generates a basic manifest and helps you choose the appropriate service worker for your application. Once that’s done and you’ve put your code together, it’s time to test your PWA.

Testing PWAs in Edge

Edge’s F12 debugging tools are an important part of the process of building and testing a PWA. This now includes an Application tab where you can explore the elements that make up a PWA, from its manifest, its service workers, and its use of storage and background services.

It’s a good idea to use these tools to debug your PWA, even if you’ve used PWAbuilder or a similar service to build your code. Drilling down into the F12 tool, you’re first presented with the contents of your PWA’s manifest. This should detail the app’s name, its theme color (so the OS can set up menu bars), and its entry URL. The manifest view will show any icons that ship with your PWA, so you can check that they render correctly. A PWA doesn’t need to be installed to use the F12 tools; you can debug it in the browser before installing it. Once installed you still have access to F12, so you can debug and examine code that’s currently running.

The F12 tools show active service workers associated with the current page, the JavaScript that hosts your application. Click on the worker to see its source code and use the built-in JavaScript debugger. There’s no difference between debugging a service worker and any other piece of JavaScript, so the same tools can be used to explore how your code works and how it interacts with the HTML, CSS, and other JavaScript in your application.

Other tools let you explore how your code uses storage: with details of the local key/value storage, any session storage used by running code, and the persistent IndexedDB storage that can be used to hold a significant amount of content. PWAs that are intended to run offline will use these to cache data from services. It’s worth looking at how other PWAs use this store in order to get an idea of how your code should use IndexedDB. Microsoft’s tools also support WebSQL, though this is only supported by a subset of browsers and in practice has been replaced by IndexedDB.

The F12 tools support for IndexedDB includes the ability to change the content in the database, so you can use it to test content that may not be available from your existing Web services. Preloading assets in IndexedDB can help test new features, for example providing sample content for a media player or 3D animations that you don’t want to deliver via a live Web application.

Microsoft’s mix of Web application tools in the F12 developer tools is well suited to testing and debugging PWAs. The same tools that delve into your JavaScript can work with CSS and HTML, providing an effective way to see how a PWA will behave on different-sized screens, and how they respond to changes in network connectivity.

Using PWAs with WebAssembly to modernize desktop apps

PWAs have an interesting role to play in the modernization of Windows applications. The upcoming WinUI 3.0 release is intended to separate Windows UI components from the Windows SDK, and is being supported in the Uno WebAssembly .NET framework. With a Windows 7 version of the Chromium-based Edge, there’s the option of targeting new .NET 5 applications with WinUI at WebAssembly. Those WebAssembly-hosted .NET applications can be wrapped as PWAs and installed on Windows 7 desktops, giving your older hardware access to modern applications.

That makes PWAs a powerful tool for ensuring not only cross-platform (on macOS and soon on Linux) but also backward compatibility for your code. Combining WebAssembly with a PWA is an interesting alternative to the traditional installer, allowing you to update code on the fly and have it immediately available to all your users on all their devices, without needing a new installer. All they’ll need is an active Internet connection to download the new WebAssembly binary along with any required assets.

Going cross-platform with PWAs

The move to a Chromium-based Edge should make it easier to build cross-platform, cross-browser PWAs. Your code should be able to run on Edge, Chrome, Firefox, even Safari, bringing the same user experience everywhere. Microsoft is working to make Edge a preferred platform for PWAs, with easier ways to find and install applications as well as to integrate them into Windows platform services without needing additional code.

If you’ve been thinking about turning a Web application into a PWA, now’s a good time to start. With the new Edge you’ve got a tool that gives you not only a runtime, but a full debugging environment. With support for some of Edge’s debugging tools in Visual Studio Code, you’ve now got access to a full end-to-end development, test, and debug tool, a combination that should make PWA development a lot easier.