Maximize Performance: Turning Power Apps into Native Apps - I.Fainberg

In a recent blog post, "Turn Power Apps into Native Apps", Ilya Fainberg has introduced a new method for running Microsoft's tool: Power Apps not only as web applications but making them behave like native desktop or mobile apps. This can be done via web standard addition called Progressive Web Apps (PWA), offering functionalities akin to native apps - file handling, hardware access, notifications etc.

This method is increasingly being adopted by various tech giant companies which showered its advantage of not requiring to publish the app on any store rather it can be installed directly from a browser via a link.

The connection of PWAs with Power Apps comes in the way both are built on web technologies. Microsoft Cloud flavor added to it makes a difference to the native apps. Although some required components to make PWA are currently lacking in Power Apps like a manifest file and some Java Script code.

The author then provides a step-by-step guide on how to convert Power Apps to PWAs. He explains the process by using IFrame, a tool which can seamlessly integrate Power Apps into an existing PWA and make it behave like a native desktop app. This integration happens via a PWA shell wrapping.

Before using it, one needs to configure the app via GitHub repository which contains solution and template. The author explains how to work on the template including managing screenshots and icons, theme color and more parameters. After making sure that icons and favicon are supplied and title bar style has been set, the IFrame is linked to the URL of the app.

The proof of making Power Apps a PWA is given while testing the app on any web server. If the template is correct the app will appear as a desktop application with a native feel.

Why Turn Power Apps into Native Apps?

Turning Power Apps into native apps using Progressive Web Apps (PWA) can offer great versatility to users. They can operate efficiently without reliance on any particular app store for distribution. Moreover, they provide a consistent user experience across various platforms, be it mobile or desktop. It's an innovative move towards improving the accessibility and usability of applications designed using Microsoft's Power Apps. Leveraging PWAs can present an array of new possibilities for developers and users alike.

Read the full article Turn Power Apps into Native Apps by Ilya Fainberg

Learn about Turn Power Apps into Native Apps by Ilya Fainberg

If you've been exploring Power Apps, you might have come across the question of how to run them smoothly. Most users toggle between a web browser or the player. But, the good news for mobile users is the 'Wrap' feature. This function allows you to compactly package your generated app and player into one iOS or Android compatible app. Although the desktop variants have not been granted this feature yet, don't worry, there is still a reportable solution.

The world of web apps is transitioning, thanks to the introduction of Progressive Web Apps (PWA). A relatively new feature in web standards, PWA allows web apps to operate as if they were native desktop or mobile applications. The smooth functioning, notification ability, and overall feel are indistinguishable from native apps. It's no surprise that big players like Spotify, BMW, Starbucks, and Microsoft have welcomed this technology by either creating PWA versions of their apps or making them the only available option.

Both Microsoft Store and Google Playstore have PWA in their ecosystem as first-class citizens. But where does your Power App fit in this changing landscape? Thankfully, at their core, Power Apps are built upon web technologies with a dash of Microsoft Cloud magic mixed in. However, there is a small challenge. Creating a PWA requires building a web app in a peculiar way that's currently not totally aligned with Power App procedures. But, this doesn't mean Power Apps cannot be transformed to PWAs.

We will be integrating power app into an existing PWA using an effective trick. We achieve this by wrapping the app in a PWA shell through a very familiar tool to developers, the IFrame. By strategically placing the IFrame in the PWA shell, we get an end product that behaves very similar to native desktop applications. This way, your Power App can be packaged to run as a desktop app and keep its users engaged.

The HTML file that holds the IFrame to house your Power App is your template. This template forms the base of your PWA-based Power App. It is fully customizable to match your brand's colors and style. However, we would prioritize the icon and metadata. A favicon is essentially your tool for browser and desktop shortcut identification. They are primary items that users quickly scan to recognize your application in an array of open apps; hence their configuration is crucial.

Once your favicon is configured, the subsequent highlight of your template is the titlebar. The titlebar holds the meat of your template by hosting the draggable portion. This is your custom space that can contain anything from a search bar to customizable buttons. Optimizing this space is important as it's the user's first contact with your application. Configuring your app is only half the journey; you also need to test your “Power Progressive” app. 

Testing an app, especially a hybrid one like a PWA-constructed Power App, requires your app to be housed on a web server. This can be achieved by hosting on Azure with Static Web Apps, or any other popular web hosting platforms. Once the app's home is set, all that's left to do is to watch the app transform into a native desktop application that appeals to your audience. With the aid of SWA CLI, a tool developed to run tests on web apps, a developer can ensure that the app performance is top-notch before deployment.

Congratulations on developing your first Power Progressive app! With to-do tasks, badges, desktop notifications, an in-app events notification mechanism, and the Power Progressive Builder, your journey to a perfect user experience just began. There is always space for more feedback on improving your app experience – that's the beauty of living in the digital age. Start today and turn your Power Apps into native-looking applications using the PWA technique.

More links on about Turn Power Apps into Native Apps by Ilya Fainberg

Turn Power Apps into Native Apps by Ilya Fainberg

Oct 8, 2022 — Turn Power Apps into Native Apps by Ilya Fainberg ... Primarily, this is meant to enable native look and feel for canvas apps, creating a seamless ...

Turn Power Apps into Native Apps by Ilya Fainberg

Oct 8, 2022 — Primarily, this is meant to enable native look and feel for canvas apps, creating a seamless user experience on the desktop. PWAs can be ...

Ilya Fainberg's Post

It's done! You can now get your hands on #PowerProgressive, my kit to deploy #PowerApps as Native apps❗⬇️ And by native, I mean Progressive Web Apps ...

Keywords

Power Apps, Native Apps, Ilya Fainberg, App Conversion, Power Apps to Native, Fainberg Power Apps, Convert Power Apps, Native Apps Development, Transformation Power Apps, Ilya Fainberg Native Apps