Publishing Progressive Web App in Microsoft Store - Microsoft Edge Development (2023)

  • Article

Publishing your Progressive Web App (PWA) toMicrosoft Storeprovides the following benefits:

DiscoveryUsers naturally look for apps in the app store. When you publish to the Microsoft Store, millions of Windows users can discover your PWA alongside other Windows apps. The store displays apps through categories, curated collections, and more. App discovery portals provide an easy browsing and purchasing experience for potential users of your app. You can even enhance your store listing with screenshots, a hero image and video trailers - seeScreenshots, screenshots and app trailers.
reliabilityWindows customers know they can trust their purchases and downloads from the Microsoft Store because they adhere to strict standards forquality and safety standards.
not installationThe Microsoft Store provides a consistent and user-friendly installation experience across the boardall Windows 10 or newer apps.
application analysisOMicrosoft Partner Center Dashboardgiverdetailed analysisabout your app's health, usage, and more.

Publishing your PWA to the Microsoft Store requires no code changes. Instead, you create an app reservation, package your PWA and send your package to the store. The following sections explain the steps.

Create an app booking

To submit your app to the Microsoft Store, you useMicrosoft Partner Center.

How to create an app booking:

  1. Before you can create an application reservation, you must have onefyreMicrosoft account (not a Microsoft work account or a Microsoft school account) that is enrolled in the Windows Developer Program.

    1. If you don't already have one, create a personal Microsoft account
    2. Enroll in the Windows Developer Program by following the steps inOpen a developer account in the Partner Center.
  2. Once your account is enrolled in the App Developer Program, follow these steps to create an app reservation:

    1. I doPartner Center Dashboard. Log in with the account you registered.
    2. Hulkworkspace, Chooseapps and games. OApps and Games | Overviewpage is displayed.
    3. chooseNew product>MSIX or PWA application.
    4. When prompted, enter a name for your reservation and selectReserve product name.

    Publishing Progressive Web App in Microsoft Store - Microsoft Edge Development (1)

    (Video) Microsoft Edge: Building Progressive Web Apps for the sidebar | OD37

  3. To display your editor details for use inEaster dinner PWAsection, selectproduct management>product identity.

    Publishing Progressive Web App in Microsoft Store - Microsoft Edge Development (2)

  4. Copy and save the following values.

    • package id
    • ID does editor
    • The publisher's display name

Pack your PWA to the store

Now that you have the app publishing information, you need to generate a Windows app package for your PWA.

To generate an application package:

  1. Go toPWA Builder.

  2. Enter your PWA URL and clickTo begin.

  3. After the report is complete, verify that the PWA is ready for storage. If your PWA score is too low, you can visitManifest PossibilitieseService worker opportunitiesand check the sections to be worked.

  4. When your PWA is ready to be published, clickNextand then selectshop packagebutton onwindowssection on the publication page.

    (Video) Progressive Web Apps in 100 Seconds // Build a PWA from Scratch

  5. Paste the following values ​​that you have saved inCreate an app bookingsection:

    • package id
    • ID does editor
    • The publisher's display name

    Publishing Progressive Web App in Microsoft Store - Microsoft Edge Development (3)

  6. chooseTo generate.

  7. To download the Windows app package, selectPick up.

Your download is a.zipfile containing a.msixbundlefile and a.classic.appxbundlefile. Both app packages allow your PWA to run on a wide range of Windows versions. For more information, seeWhat is a classic package?

Submit your app package to the store

To submit your app to the Microsoft Store:

  1. Go toMicrosoft Partner Center.

  2. Select your app.

  3. click nostart your submissionbutton.

    (Video) Introducing Progressive Web Apps and the new Office app (PWA)

    Publishing Progressive Web App in Microsoft Store - Microsoft Edge Development (4)

  4. When prompted, provide information about your app, such as price and age rating.

  5. Nopackagesprompt, you must select.msixbundleit's at.classic.appxbundlefiles you have generated inEaster dinner PWAsection.

Once you have completed your submission, your application will be reviewed, typically within 24-48 hours. Once you receive approval, your PWA will be available in the Microsoft Store.

Measure the usage of your PWA installed from the Microsoft Store

When your PWA is first launched, if the PWA was installed from the Microsoft Store, Microsoft Edge includes the followingReferheader with the request for the first navigation in your web app.

Reference: app-info://platform/microsoft-store

Use this feature to measure clear traffic from your PWA that was installed from the Microsoft Store. Based on the traffic, you can adjust your app's content to improve the user experience. This feature is available for both client and server code. To access this information on the client side, you can refer todocument.refersI don't know JavaScript.

This feature was first introduced in Microsoft Edge version 91, and the DOM API was introduced in Microsoft Edge version 93.

Redirect to site-specific domains without showing additional UI

By default, a PWA installed from the Microsoft Store displays an additional UI when the app is redirected to a location-specific domain. The added UI displays the URL and title of the page. This UI is added because navigation to the locale-specific domain is considered "out of range". However, you can prevent this UI from being displayed by specifying location-specific origins associated with the PWA.

The following figure shows the user interface that is introduced when a user leaves the scope of a PWA.

(Video) Why Apple doesn't like PWAs (Progressive Web Apps)

Publishing Progressive Web App in Microsoft Store - Microsoft Edge Development (5)

Domain forwarding with browser-installed PWAs

A web application manifest is bound to a single domain. However, some PWAs use location-specific domains for their customers in specific regions of the globe. When visiting the PWA in a web browser, customers are transferred directly from the main domain (for example, to a site-specific domain (for example, because the redirect happens while loading the website for that website.

Therefore, customers who install the Microsoft Edge PWA install the locale-specific domain PWA. Subsequent launches of the PWA go directly to the locale-specific domain instead of going to the main domain first.

Domain forwarding with PWAs installed from the Microsoft Store

PWAs installed from the Microsoft Store have an encoded start URL that points to the primary domain. When the PWA starts, the PWA initially navigates to the main domain, and then a client (as needed) can be redirected to their location-specific domain. If this redirection occurs, the navigation is considered "out of scope". As a result, the application displays the URL and title of the page at the top of the page.

Displaying the URL and page title is a security feature to ensure that users know they have left the PWA context. This added UI makes sense when a user loads a page from another site in conjunction with the PWA. However, this added user interface may be inappropriate when a user moves between domains that are part of the same site.

Prevents location-specific URL and title from being displayed

To prevent additional UI from being displayed in a PWA installed from the Microsoft Store, you can useURL handlersto allow the PWA to span multiple site-specific domains.

To prevent the URL and page title from being displayed:

  1. Dentro do Web App Manifest for PWA, useourl_handlersmemberto specify a range of origins associated with this application.
  2. Add one in each of the referenced sourcessource binding to webappfilthat links the PWA to the domain in question.

When these domain lists are in effect, Microsoft Edge will no longer display the extra UI when the primary domain is redirected to the local domains.

Finally, theurl_handlersfunction will be replaced byscope_extensions, but this specification is still under development.scope_extensionswill give the same result asurl_handlers.

(Video) Building Progressive Web Apps to extend existing web apps in Windows and Microsoft - BRK3078

This feature was first introduced in Microsoft Edge version 97.

See also


Can you publish a progressive web app to the app store? ›

Yes, the app store supports PWA. You can publish your progressive web application on the iOS app store and wait for approval. Once your PWA has passed the quality guideline, you get approval in the store. Users can then download your PWA store without going to Safari and adding it to the home screen.

Does Progressive Web App have to be published to the marketplace before it can be used on the mobile? ›

PWA placement is impossible without registration on the marketplace. At the stage of registering PWA in the iOS app store, you need to prove that you are the owner of the web application.

What are the limitations of progressive web apps? ›

Disadvantages of progressive web apps (PWAs)

Many native apps can run even when the user is not connected to the internet. However, PWAs rely on web browser connection to run, and therefore require internet connectivity. If offline mode is important for your users, a PWA is likely not the right choice.


1. Handle URLs natively in your Progressive Web App
(Patrick Brosset)
2. PWA Developer Tools: Debugging [12 of 17] | PWA for Beginners
(Microsoft Developer)
3. From Starter App to Store Package with PWABuilder
(PWA Summit)
4. All you need to know about PWA (Progressive Web Apps)
(Windows Central)
5. Building Progressive Web Apps for Windows devices : Build 2018
(Microsoft Developer)
6. PWAs Today
(PWA Summit)


Top Articles
Latest Posts
Article information

Author: Virgilio Hermann JD

Last Updated: 08/09/2023

Views: 6350

Rating: 4 / 5 (41 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Virgilio Hermann JD

Birthday: 1997-12-21

Address: 6946 Schoen Cove, Sipesshire, MO 55944

Phone: +3763365785260

Job: Accounting Engineer

Hobby: Web surfing, Rafting, Dowsing, Stand-up comedy, Ghost hunting, Swimming, Amateur radio

Introduction: My name is Virgilio Hermann JD, I am a fine, gifted, beautiful, encouraging, kind, talented, zealous person who loves writing and wants to share my knowledge and understanding with you.