What-Why-How | PowerPages as a mobile app

We can create progressive web apps (PWAs) using Power Pages and it’s low-code tools. Yes, you heard me right. You can create web apps that look and feel like native apps, work on any device and browser, and even support offline scenarios. And you don’t need to write a single line of code!

How did I find out about this amazing feature? Well, I was trying to understand a few other features of Power Platform that can help in publishing apps for external and internal users as part of a previous article/session on Native Mobile Apps using Wrap Projects and came across this gem. Yup, I’m pretty late in the game. 😦

But better late than never, right? So I decided to give it a try.

The design studio lets you create sites as PWAs using drag-and-drop components, templates, and themes. You can customize your app’s name, icon, splash screen, starting page, and more. You can also choose which pages you want to make available offline for your users. And the best part is, you can publish your app to the web or to app stores with just a few clicks.

As usual, there are many blogs that explain step-by-step how to create progressive web apps using Power Pages, but very few explain the need and use cases. My take, here you go…

What are progressive web apps and why do we need them?

A progressive web app (PWA) is a type of web application that combines the best features of native apps and websites. A PWA can run on any device and platform and can work offline or on low-quality networks. A PWA can also access device capabilities such as a camera, microphone, push notifications, and geolocation.

Some of the benefits of using a PWA are:

• Faster loading time: A PWA can cache the essential resources and data on the device, so it can load instantly and provide a smooth user experience.
• Responsive design: A PWA can adapt to different screen sizes and orientations, making it suitable for desktops, tablets, and smartphones.
• Engaging user interface: A PWA can mimic the look and feel of a native app, with features such as app icons, splash screens, home screen installation, and full-screen mode.
• Offline functionality: A PWA can work even when there is no internet connection or when the connection is unreliable. A PWA can also sync data in the background when the connection is restored.
• Enhanced security: A PWA uses HTTPS protocol to ensure secure data transmission and prevent malicious attacks.

A progressive web app is a modern way to deliver a high-quality web experience to your users. By using a PWA, you can improve your web app’s performance, usability, and engagement. A PWA can also help you reach more users across different devices and platforms.

Use Cases

One important request that I used to get from many of my implementations is how to get this wonderful PowerApps Portal (or now PowerPages) website that you have built (yes, slightly exaggerated 🙂 ) into each citizen’s (or external users’) hands as a mobile app. Earlier, my response has been they can bookmark the site on their mobile and will need the internet to even read simple ‘text’ pages.

Now my response will be, we can convert these Power Pages into a progressive web app and publish it to the Google play store or Microsoft Store!

Now, how to make sure end users or citizens, or people outside your organization can access your new PWA with login functionalities? You simply need to use Azure B2C / External Identity providers in your Power Pages. Refer to this link on the different authentication mechanisms / Identity providers for Power Pages.

Few use cases:

1. Public Sector – A local council can publish it’s entire ‘My Account and Services’ PowerPages Website for citizens to use as a mobile app. They can also provide advanced features like push notifications!
2. Manufacturing / Retail – A warranty/order management registration site can publish its entire Power Pages site for its customers to use as a mobile app to check/register warranties and also create new orders on the fly.
3. E-commerce: Power Pages PWA can provide a fast and seamless shopping experience, even when the network is slow or unreliable. They can also send push notifications to customers about promotions, discounts, or new products.
4. Education: Can offer interactive and engaging learning materials, such as quizzes, games, or simulations, that can adapt to different screen sizes and orientations. They can also support offline learning
5. Travel: Can help travelers find and book flights, hotels, or tours, with features such as geolocation, maps, or calendars. They can also work offline and provide relevant information based on the user’s location and preferences.

and any more. So, use PWA for citizens / external customers and Canvas Wrap projects for Internal Users and Partners.

The steps given on the MS Learn site are pretty clear. You can refer to it here. I have given a few different screenshots and a few additional details in my deck below.

Cheers.