Overview of Progressive Web Apps (PWAs)
Progressive Web Apps (PWAs) provide access to open web technologies, to provide cross-platform interoperability. PWAs provide your users with an app-like experience that's customized for their devices.
PWAs are websites that are progressively enhanced to function like installed, native apps on supporting platforms, while functioning like regular websites on other browsers.
The qualities of a PWA combine the best of the web and compiled apps. PWAs run in browsers, like websites. But PWAs also have access to app features; for example:
- A PWA can still work when the device is offline.
- PWAs can be installed on the operating system.
- PWAs support push notifications and periodic updates.
- PWAs can access hardware features.
When installed, PWAs are just like other apps on Windows. For example:
- A PWA can be added to the Start menu.
- A PWA can be pinned to the Taskbar.
- PWAs can handle files.
- PWAs can run when the user signs in.
- PWAs can be submitted to the Microsoft Store where millions of Windows users can discover and easily install them alongside other Windows apps.
PWAs have the same reach as websites:
- PWAs can be indexed by search engines.
- A PWA can be linked to.
- A PWA can work on all devices, from a single codebase.
PWAs have a much lower cross-platform development cost than compiled apps that require a specific codebase for each platform, such as a separate codebase for Android, for iOS, and for each desktop operating system.
Characteristics of a Progressive Web App (PWA)
A fully capable Progressive Web App provides the following advantages to the user.
|Discoverable||The app is discoverable from web search results and supporting app stores.|
|Installable||Pin and launch the app from the home screen, Start menu, and Taskbar.|
|Re-engageable||The app can receive push notifications, even when the app isn't active.|
|Network-independent||The app works offline and in low-network conditions.|
|Progressive||The user experience of the app scales up or down with device capabilities.|
|Safe||The app provides a secure HTTPS endpoint and other user safeguards.|
|Responsive||The app adapts to the user's screen size or orientation and input method.|
|Linkable||Share and launch the app from a standard link.|
PWAs on desktop
Progressive Web Apps (PWAs) aren't limited to displaying websites on mobile home screens. PWAs are based on standard, cross-browser, web technologies that allow them to be installed and to run in many different environments.
In recent years, desktop browsing has grown, and desktop computing continues to be the primary productivity environment for many users. PWAs can provide fully tailored, installable experiences on a desktop operating system that inherit the benefits of that environment. Yet PWAs still work across platform from the same code and servers that power your in-browser and mobile experiences.
Microsoft Edge and Windows have added many new web capabilities and features. These new web development capabilities provide great opportunities to build immersive experiences that deeply integrate with the desktop operating system. Using only web technologies ensures that your app will work on other browsers, operating systems, and devices.
You might not have to use proprietary technologies at all, because the web has developed capabilities to deal with many aspects of apps, such as:
- File systems
- High-performance code
With a PWA, you can use a single codebase that's shared between your website, mobile app, and desktop app (across operating systems). By using a single codebase that's shared across platforms, you cut down on development costs. Your app can also be published on the Microsoft Store, making it more familiar and trustworthy for Windows users to discover and install.
Learn more about how PWAs integrate on Windows.
Bridging the gap between web and desktop apps
Microsoft Edge has many new capabilities built in that can make your web app feel more integrated on desktop platforms. These capabilities provide more engaging experiences across web and desktop platforms. With Progressive Web Apps (PWAs), you can:
- Handle files.
- Share content with other apps.
- Access the clipboard.
- Sync data and fetch resources in the background.
- Access device hardware such as Bluetooth and USB.
- Store content in databases.
- Take advantage of hardware accelerated graphics.
- Use CSS layouts, animations, and filters to create advanced designs.
- Run near-compiled performance code with WebAssembly.
There isn't much you can't do today with web technologies. Thanks to Microsoft Edge, PWAs on desktop can take full advantage of web technologies to deliver what users expect desktop apps to do.
Check out Myth Busting PWAs for more information about what PWAs can do.
The Microsoft Store
Because Progressive Web Apps (PWAs) are just like other apps in the Microsoft Store, users can fully engage with them—from discovery, to installation, to execution—without ever opening the browser.
The Microsoft Store app is the most used app on PCs. The Microsoft Store provides a trustworthy and familiar experience for your users to install your app. Additionally, you can view detailed usage statistics and charts that let you know how your apps in the Microsoft Store are doing.
Learn how to publish your PWA to the Microsoft Store.
Using Progressive Web App (PWA) technologies is a great way to make your app safe, discoverable, linkable, easy to install and update, responsive, and network independent. Many businesses have had success with PWAs. For example:
- The Starbucks PWA has increased daily active users twice. Orders on desktop are nearly the same rate as mobile (source).
- Trivago saw an increase of 150% for people who add its PWA to the home screen. The increased engagement led to a 97% increase in clockouts to hotel offers (source).
- Tinder cut load times from 11.91 seconds to 4.68 seconds with their PWA. The app is 90% smaller than the compiled Android app (source).
Read more success stories on the PWA Stats website.
- Progressive Web Apps at MDN Web Docs.
- Microsoft Build 2020 PWA session
- Myth Busting PWAs
- A Progressive Roadmap for your Progressive Web App
- Offline POSTs with Progressive Web Apps
- PWA Q&A
- Betting on the Web
- Naming Progressive Web Apps
- Designing And Building A Progressive Web App Without A Framework (Part 1)
- Designing And Building A Progressive Web App Without A Framework (Part 2)
- Designing And Building A Progressive Web App Without A Framework (Part 3)
- What makes a good Progressive Web App?
Submit and view feedback for