progressive-web-apps.md

description	title	author	ms.author	ms.date	ms.topic	ms.prod	ms.technology	keywords
Progressive Web Apps run natively on Windows 10. Here's everything you need to know as a web developer.	Progressive Web Apps on Windows	MSEdgeTeam	msedgedevrel	06/19/2018	article	microsoft-edge	pwa	progressive web apps, PWA, Edge, JavaScript, Windows, UWP, Microsoft Store

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.

:::row::: :::column::: ### Discoverable From web search results and supporting app stores :::column-end::: :::column::: ### Installable Pin and launch from the home screen :::column-end::: :::column::: ### Re-engageable Send push notifications, even when the app isn't active :::column-end::: :::column::: ### Network Independent Works offline and in low-network conditions :::column-end::: :::row-end::: :::row::: :::column::: ### Progressive Experience scales up (or down) with device capabilities :::column-end::: :::column::: ### Safe Provides a secure HTTPS endpoint and other user safeguards
:::column-end::: :::column::: ### Responsive Adapts to the user's screen size / orientation and input method :::column-end::: :::column::: ### Linkable Share and launch from a standard hyperlink :::column-end::: :::row-end:::

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:

• Standalone window

• Independent process from browser (isolated cache, less overhead)

• No storage quota (for IndexedDB, local storage, etc.)

• Offline and background processes

• Access to native Windows Runtime (WinRT) APIs via JavaScript

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

Requirements

To run as a PWA on Windows 10, your server-hosted web app will at minimum require:

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

• 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 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:

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

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

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

• 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'll need:

• A Microsoft developer account
• Completed steps for publishing a Windows app

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.

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

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