Progressive Web Apps (EdgeHTML) on Windows
With Progressive Web Apps (or simply PWAs) you do not have to decide between using open web technologies for cross-platform interoperability and providing your users with a native app-like experience customized for their device. That is because PWAs are just websites that are progressively enhanced to function like native apps on supporting platforms. The qualities of a PWA combine the best of the web and native apps.
By building or converting your existing site to a PWA, you are able to better engage your existing audience with push notifications and offline support. At the same time, you are able to continue building your audience on the open web, as users discover your PWA through search and link-sharing.
PWAs on Windows 10 (EdgeHTML)
Note
With the move to Microsoft Edge (Chromium) from EdgeHTML, the underlying web platforms used by PWAs are not the same. Edge (Chromium) PWAs are installed from and run within the browser. Edge (EdgeHTML) PWAs run as Universal Windows Platform (UWP) applications and use the older EdgeHTML web platform. If you require Windows 10 API access for your PWA, this EdgeHTML documentation is for you. If your goal is cross platform support without Windows specific API access, please head over to the Microsoft Edge (Chromium) PWA documentation.
When you build a Progressive Web App to take advantage of Windows 10, you are able to distribute your PWA through the Microsoft Store, the entire Windows 10 install base of 600+ million active monthly users is your potential app audience! Applications developed this way run as Universal Windows Platform apps and have native like access to the WinRT APIs. Note that the web platform rendering your code is EdgeHTML when using the WinRT APIs so be sure to use feature detection before calling any Windows specific APIs to ensure your PWA is able to still run across platforms where Microsoft Edge (Chromium) PWAs are available.
Here is how to get started converting your web app to a PWA (EdgeHTML), testing it on Windows 10, and distributing it in the Microsoft Store.
Requirements
To run as a PWA, your server-hosted web app at minimum requires:
HTTPS. Protect your users by providing a secure connection for server/app communication. Service workers and other PWA technologies only work with web resources served over a secure connection (or from
localhostfor debugging purposes).Service workers. Use service worker threads to act as network proxies between your server and client app in order to provide offline support, resource caching, push notifications, background data sync, and page load perf optimizations.
Web app manifest. Provide a JSON-based metadata file describing key information about your web app (such as icons, language, and URL entry point) so that Windows 10 and other host platforms are able to provide your PWA users with an installable, native app-like experience. Associating your site with a web app manifest makes it eligible for automatic inclusion in the Microsoft Store through the Bing indexing service.
To be a great PWA, your app also needs:
Cross-browser compatibility. Ensure your PWA works by testing in different browsers and environments. On Windows 10, be sure to test your app both in the Microsoft Edge browser and also in the full PWA experience: as an installed, standalone Windows 10 app (powered by the EdgeHTML engine).
Responsive design. Employ fluid layouts and flexible images with CSS grid and/or flexbox, media queries, and [responsive imagesMDNResponsiveImages to adapt your UX to your user's device. Use device emulation tools from your browser to test locally, or set up a remote debugging session to test directly on a target device. On Windows 10, PWAs (EdgeHTML) are able to also be tailored for form factors beyond desktop, phone and tablet, including: Xbox and TV, Surface Hub, and Windows Mixed Reality devices.
Deep linking. Route each page of your site to a unique URL so existing users may help you engage an even broader audience through social media sharing.
Best practices. Use code quality tools like the webhint linter to optimize the efficiency, robustness, safety, and accessibility of your app.
To submit your Progressive Web App to the Microsoft Store, you must have:
In the coming months, existing PWAs on the web meeting specific criteria are auto-indexed by the Bing search engine into the Microsoft Store (where developers are able to directly manage them for their Windows 10 audience).
Check out PWAs (EdgeHTML) in the Microsoft Store for further details.
Current availability
Browser engine support for Progressive Web Apps calls for a number of architectural components, the most significant being the networking infrastructure underlying the Fetch API. PWA support in the EdgeHTML engine was completed in the Windows 10 1809 release. Further improvements to web standards since that time will not be incorporated into the EdgeHTML engine so be sure to run compatibility tests and use feature detection to gracefully fallback should the feature your PWA needs be unsupported on the EdgeHTML platform.
For the upcoming Microsoft Edge (Chromium) release in 2020, the browser platform has full support for these features that work across devices where the Chromium browser is supported.
For EdgeHTML and Windows, here is the current status of standards-based PWA technologies:
| Technology | Purpose | Availability | Usage notes |
|---|---|---|---|
| Web Application Manifest | Provides app metadata to the host OS for enabling installation and app store promotion. Required for PWAs in the Microsoft Store. | In development | For now, you are able to use PWA Builder to generate a W3C-compliant JSON manifest and package your app for various OS platforms. For Windows, PWA Builder translates your JSON manifest into the .appxmanifest (XML) format required by Windows 10 apps. |
| Fetch API | Provides asynchronous networking (requests, responses) for page resources | EdgeHTML 14+ / Build 14393+ | The Service Worker API syntax is based on Fetch-based networking APIs. You are able to also use Fetch API more generally as a modern alternative to XMLHttpRequest. |
| Service Worker API | Provides an offline-capable web app model / network proxy, where event-driven scripts run independent of web pages | EdgeHTML17 / Build 17133+ | Experimental support (behind Enable Service Workers flag) shipped in EdgeHTML 16. On by default in EdgeHTML 17+ builds. |
| Cache API | Provides a storage mechanism for network request/response pairs | EdgeHTML17 / Build 17133+ | See Service Worker API note above. |
| Push API | Enables a service worker to subscribe to push notifications | EdgeHTML17 / Build 17133+ | See Service Worker API note above. Windows 10 apps (including PWAs) require the Windows Push Notification Service (WNS) to deliver push notifications, which supports the W3C Push API. |
| Notifications API | Enables a service worker to display a system notification to the user upon push message | EdgeHTML 14+ / Build 14393+ | Web Notifications in EdgeHTML are fully integrated with the Windows 10 Action Center, where users are able to manage app notifications and set Quiet Hours. |
| Background Sync API | Provides an API for notifying a service worker that the user has come back online and for scheduling periodic events to synchronize local data with the server | In development | For now, you are able to use the native WinRT BackgroundTask API to implement background tasks for your PWA when it runs as a Windows 10 app. |
Here is the current status of Microsoft Store support for PWAs on Windows 10:
| Store submission method | Status | Details |
|---|---|---|
| Manual (developer initiated) | Available | Check out PWAs (EdgeHTML) in the Microsoft Store to get started. |
| Automatic (auto-indexed with Bing) | Coming soon | We are currently piloting the PWA onboarding process with a limited subset of app partners. In the coming months Microsoft welcomes PWAs across the mainstream web to the Microsoft Store. Check out Automatic PWA importing with Bing to learn more about Microsoft Store requirements for auto-generated PWA listings. |