How to Test PWA on Microsoft Edge Browser

Looking to get testing with Progressive Web Apps (PWA) on Microsoft Edge? Here’s a quick guide to know how to test PWA on Microsoft Edge Browser.

The criteria Microsoft Edge uses to decide if the site is a Progressive Web App:

• Website should be served fully via HTTPS
• Has a Web App Manifest
• Web App Manifest has name or short_name property
• Service Worker registered with a fetch event handler
• Web App Manifest with start_url property 
• Web App Manifest has an icon property must include a 192px and a 512px sized icons
• Display property should be set to standalone, fullscreen and minimal-ui

As to test PWA on Edge Browser, first of all make sure that you have cleared the browsing data of browser. It’s because the browser’s cache web pages for faster loading of websites, due to that the manifest and Service Worker that we needed for the PWA won’t get loaded in this case. If you have tried any service workers or PWA’s earlier upon the website, the clearing of browsing data helps to resolve that case too.

How to clear the browsing data on Microsoft Edge?

1. Tap on the Browser menu (3 dots at the bottom right corner of Edge Browser)
2. From the menu tap Settings, then tap Privacy
3. Within the Privacy page at the bottom you can see Clear browsing data, tap on it.
4. Once you tap it, you can see another page with Clear browsing data options. Select the Advanced tab
5. Then from the dropdown for Time range select All time, then select Browsing history, Cookies and site data, Cached images and files, Site settings and Media Licenses. Then tap Clear.

How to test PWA on Microsoft Edge?

1. Make sure that you have cleared the browsing data before testing
2. Visit the website that you have installed PWA
3. From the bottom, you can see a Add to Home screen prompt
4. Tap the button, instantly the web app will be added to your Home screen with an icon which you added in manifest file
5. Tap the icon from HomeScreen, then the Progressive Web App of your website will be loaded
6. You can see the Splash Screen with the icon and background color which you set earlier upon Manifest file.
7. Navigate via some of the web pages, after that disconnect the internet on your device and close the web app
8. After that tap the web app icon again from HomeScreen, You can notice all the pages which you viewed earlier during online can be viewed even at offline and all the pages that you haven’t viewed will be showed by an Offline page which you set upon the service worker.

If your website uses any caching plugins or add-on’s or extensions don’t forget to clear the cache before testing. If you are using WordPress, try “Super Progressive Web Apps” plugin on WordPress directory.

Hope the article helps to know how to test PWA on Edge Browser, if anything missing please do comment below so that we can add more details and make it more helpful for others.