Progressive Web Apps on Windows
With Progressive Web Apps (or simply PWAs) you dont 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's 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.
From web search results and supporting app stores
Pin and launch from the home screen
Send push notifications, even when the app isn't active
Works offline and in low-network conditions
Experience scales up (or down) with device capabilities
Provides a secure HTTPS endpoint and other user safeguards
Adapts to the user's screen size / orientation and input method
Share and launch from a standard hyperlink
By building or converting your existing site to a PWA, you can better engage your existing audience with push notifications and offline support. At the same time, you can continue building your audience on the open web, as users discover your PWA through search and link-sharing.
PWAs on Windows 10
When you distribute your Progressive Web App through the Microsoft Store, the entire Windows 10 install base of 600+ million active monthly users is your potential app audience!
When installed on Windows 10, PWAs run as Universal Windows Platform apps and gain these technical advantages over running in the browser:
Independent process from browser (isolated cache, less overhead)
No storage quota (for IndexedDB, local storage, etc.)
Offline and background processes
Appearance in "app" contexts such as the Windows Start menu and Cortana search results
Here's how to get started converting your web app to a PWA, testing it on Windows 10, and distributing it in the Microsoft Store.
To run as a PWA on Windows 10, your server-hosted web app will at minimum require:
[X] HTTPS. Protect your users by providing a secure connection for server/app communication. Service workers and other PWA technologies will only work with web resources served over a secure connection (or from localhost for debugging purposes).
[X] 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.
[X] 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 can 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 will also need:
[X] 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 its full PWA experience: as an installed, standalone Windows 10 app (powered by the EdgeHTML engine).
[X] Responsive design. Employ fluid layouts and flexible images with CSS grid and/or flexbox, media queries, and responsive images 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 can also be tailored for form factors beyond desktop, phone and tablet, including: Xbox and TV, Surface Hub, and Windows Mixed Reality devices.
[X] Deep linking. Route each page of your site to a unique URL so existing users can help you engage an even broader audience through social media sharing.
To submit your Progressive Web App to the Microsoft Store, you'll need:
In the coming months, existing PWAs on the web meeting specific criteria will be auto-indexed by the Bing search engine into the Microsoft Store (where developers can directly manage them for their Windows 10 audience).
Check out PWAs in the Microsoft Store for further details.
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. We've been building out PWA support in EdgeHTML for several releases now.
Here's the current status of standards-based PWA technologies in EdgeHTML and Windows:
|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 can use PWA Builder to generate a W3C-compliant JSON manifest and package your app for various OS platforms. For Windows, PWA Builder will translate your JSON manifest into the .appxmanifest (XML) format required by Windows 10 apps.|
|Fetch API||Provides asynchronous networking (requests, reponses) for page resources||EdgeHTML 14+ / Build 14393+||The Service Worker API syntax is based on Fetch-based networking APIs. You can 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 can 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 can use the native WinRT BackgroundTask API to implement background tasks for your PWA when it runs as a Windows 10 app.|
Here's the current status of Microsoft Store support for PWAs on Windows 10:
|Store submission method||Status||Details|
|Manual (developer initiated)||Available||Check out PWAs in the Microsoft Store to get started.|
|Automatic (auto-indexed with Bing)||Coming soon||We're currently piloting the PWA onboarding process with a limited subset of app partners. In the coming months we'll be welcoming 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.|