Progressive Web Apps (PWAs) are web applications that use modern web capabilities to deliver an app-like experience to users. They are designed to work on any platform using a standards-compliant browser, including desktop and mobile devices. Key features of PWAs include:

· PWAs can work offline or on low-quality networks.

· They adapt to different screen sizes and orientations.

· PWAs provide a user experience similar to native apps, including smooth animations and interactions.

· They can send push notifications to engage users.

· Users can install PWAs on their home screen without needing an app store.

Power Apps and Progressive Web Pages

Power Apps and Progressive Web Apps (PWAs) are powerful tools that allow businesses to create dynamic, user-friendly applications with ease. Power Apps is a comprehensive suite of apps, services, connectors, and a data platform that enables rapid app development with minimal coding. Its drag-and-drop interface and pre-built templates make it easy to create custom apps that connect to various data sources, such as Microsoft 365, Dynamics 365, SQL Server, and more.

Steps for Creating Progressive Web Pages (PWA) in Power Pages

Firstly, sign in to Power Pages

Choose the desired site. Click “Edit” to access the site’s editing mode.

In the left panel, locate the “Set up” workspace. Select “Progressive web applications”.

Toggle the “Enable PWA” to activate the PWA feature.

Customise the PWA

Now, enter the following information:

1. Display Name: PWA portal name that will appear on mobile and app stores.

2. App Store Description: A brief description of PWA for app store listing.

3. Start page: The initial page is displayed when PWA is opened.

4. Splash screen background colour: The background colour for the loading screen.

5. App icon: An Image for your App

Define Offline behavior

PWAs allow users to continue navigating your site offline or without an internet connection. You can designate specific pages to remain accessible (in read-only mode) offline, while a custom message can be displayed for your site that isn’t available offline.

Under the More settings section, click “Define offline pages”.

Select the specific pages within your site that should be accessible when the device is offline (read-only). Click Save.

To customise the appearance of offline pages, navigate to the “Pages” workspace and select “Default offline pages.”

Distribute the Progressive Web App

Once your app is ready, you can distribute the app.
Using a browser.
Using an app store.

Using a browser

Once the PWA is enabled, users can pin the Power Pages site to their device’s home screen for easy access. This method is supported across all platforms (Android, iOS, Chromebook, Windows) and devices (mobile, desktop, tablet).

Using an app store

Create an app package to distribute your PWA through app stores. We partner with PWABuilder, a platform that generates app packages compatible with different app stores.

Here are the steps to create an app package:

Under More Settings, click “Create app package”.

A dialog box will appear. Click “Open PWA builder”.

You’ll be redirected to the PWABuilder website to create an app package suitable for various app stores. The generated package includes the necessary files for app store submission and a step-by-step guide to complete the process.

Update Android Certificate

If necessary, update the Android certificate by accessing the “Update the Android certificate” option under More Settings.

Enter the following information:

Package title

` SHA-256 cert fingerprint

Click Update to complete the process.

The combination of Power Apps and PWAs presents a powerful opportunity for businesses to enhance their digital presence and improve operational efficiency. By leveraging the strengths of both platforms, you can create robust, user-friendly applications that meet the demands of today’s digital landscape.

Frequently Asked Questions (FAQs):

1. What is a Progressive Web App (PWA)?

A Progressive Web App (PWA) is a web application that uses modern web capabilities to deliver an app-like experience on any device with a standards-compliant browser. It works offline, adapts to various screen sizes, and can be installed on the home screen without needing an app store.

2. Why should I create a PWA using Power Pages?

Creating a PWA using Power Pages allows you to take advantage of Microsoft’s low-code platform to build responsive, app-like websites with minimal coding. Power Pages integrates seamlessly with other Microsoft services and offers built-in tools for managing offline access, app-like behaviours, and app store distribution.

3. Do I need coding skills to build a PWA with Power Pages?

No, Power Pages offers a low-code environment that simplifies the creation of PWAs. You can use a drag-and-drop interface to build and customize your PWA without needing extensive coding knowledge.

4. What is PWABuilder, and how does it help in PWA distribution?

PWABuilder is a platform that generates app packages for PWAs, making them compatible with various app stores. After creating your PWA in Power Pages, you can use PWABuilder to package your app and follow its guide to submitting the PWA to app stores like Google Play or the Microsoft Store.

5. Can I update my PWA after publishing it to app stores?

Yes, you can update your PWA after publishing. If you are distributing it on Android, you may need to update the Android certificate. Power Pages provides an option to update this certificate under “More Settings.”

6. What data sources can I connect to with Power Pages?

Power Pages can connect to a variety of data sources through Power Apps, including Microsoft 365, Dynamics 365, SQL Server, SharePoint, and more. This enables you to integrate your PWA with business-critical data seamlessly.

7. Is it possible to customize the offline pages in my PWA?

Yes, you can customize the appearance of offline pages in Power Pages by selecting the "Default offline pages" option under the "Pages" workspace. This allows you to control how your site appears to users when they are offline.