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

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

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 atconta.microsoft.com.
   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.

   

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

   

   See Also

   How to lock Windows devices in Multi App Kiosk mode? - Hexnode Help CenterWhat is Edge Computing and how can it improve your website's performance?Microsoft outlines framework for creating AI applications and co-pilots; expanding the AI ​​plugin ecosystem - Source8 Ways to Manage Tabs in Microsoft Edge Browser - WebNots

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

   

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)

   

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.

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, contoso.com) to a site-specific domain (for example, contoso.co.ke) 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.

This feature was first introduced in Microsoft Edge version 97.

See also

• Test and submit your PWA app package
• Publish a new PWA to the store
• Upgrade an existing Store app to a PWA
• Image recommendations for PWAs in the store
• Application Packaging Explainer