PWA microsoft edge | OutSystems

BigSlikTobi

PWA microsoft edge

Question

Hi Guys,

I am wondering if anyone knows something about this behavior with PWAs.

We use a Zebra scanning device with Android (I guess Jelly Bean) for some of our Apps. The first problem was, that Chrome is not available on Zebra and Chromium afak has no PWA option. So I installed Edge as Browser on the scanner and was able to save the PWA.

What happens was, that the adjustments of the app where totally gone and it was not usable as PWA.

This is the view in the Edge PWA.

After this fail I downloaded Firefox and the result was totally fine.

I am wondering if this is a known MS Edge misbehavior because than it definitely needs to take into considerations when distributing the App.

Does anyone have any experience with Edge and PWAs yet?

Best regs!

Tobias

22 May 2020

Nikhil Gaur

Hi,

I have never used Edge on mobile devices before but to check your issue I used one of my existing PWA to add on my device using edge browser. It working perfactly fine.

But I want to mention here is that my PWA is build with pure OutSystemsUI theme, there is no extra styling. May there there is some customer styling because of which it is happening. If that is not the case then it can be edge issue on specific device type.

23 May 2020

Swatantra Kumar

Champion

Hi Tobias,

PWAs on Microsoft Edge (Chromium) are very much supported. Microsoft has documented below pre-requisites for PWA support on her documentation:

To run as a PWA, your server-hosted web app should include following minimum requirements.

Requirement	Details
HTTPS	Protect your users by providing a secure connection for server or app communication. Service Workers and other PWA technologies 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 are able to provide your PWA users with an installable, native app-like experience.

To be a great PWA, your app must also meet the following requirements.

Requirement	Details
Cross-browser compatibility	Ensure your PWA works by testing in different browsers and environments.
Responsive design	Employ fluid layouts and flexible images with CSS grid, flexbox, CSS grid and 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.
Deep linking	Route each page of your site to a unique URL so existing users may 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.
Chromium PWA Checklist	Check your PWA against the Google baseline PWA checklist.

It looks the issue is with the design layout which is not quite matching per MS requirement.

Regards,

Swatantra

23 May 2020

BigSlikTobi

Hi Guys,

thanks for your replies! I tested some other PWAs on the Zebra device and all of them shown the same behaviour with Edge.

I would assume that it has something to do with the "old" android version. I currently have no other Android device to test. But I will organize one with a newer version and test again.

As all our Apps are B2E I will advise the user not to use edge to load the PWAs.

Best regards!

Tobias

25 May 2020

Swatantra Kumar

Champion

Old android could be the reason. By the way did you check if the requirements for PWAs on edge as mentioned above in the table complies in the app.

25 May 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines