ReadyXRM

Before I dive into the details of this blog, you will notice that in 2022, I only published twice. My day job involves creating content for Microsoft Learn, but I also have a backlog of blog ideas that really don’t fit into Microsoft Learn, so hoping that in 2023 I hope to have a good run of community content on my own personal blog site.

Progressive Web Apps and Power Pages

One of the potentially lesser-known features of Power Pages is the ability to enable your site to be a Progressive Web App.

I wrote previously about PWAs, but let’s recap what they are and the benefits:

Progressive Web Apps (PWAs) offer several benefits over traditional native mobile applications:

1. Reach: PWAs can be accessed from anywhere with an internet connection, without the need for a dedicated app store.
2. Speed: PWAs are designed to be fast and responsive, providing a smooth user experience.
3. Offline functionality: PWAs can still be used when offline or with limited internet connectivity, making them suitable for areas with poor connectivity.*
4. Cost-effective: PWAs are much less expensive to develop and maintain than native apps, making them a cost-effective option for businesses of all sizes.
5. Better discoverability: PWAs are easily discoverable through search engines and can be shared via a URL, making it easier for users to find and use the app.
6. Improved User Experience: PWAs are designed to offer a seamless experience, with features such as push notifications, offline support, and fast load times.
7. Cross-platform compatibility: PWAs can run on multiple platforms, including Android, iOS, and desktop, without the need for separate development and maintenance efforts.
8. Easy Updating: Updates to PWAs can be done quickly and easily, without the need for users to download a new version of the app.

Overall, PWAs offer a compelling alternative to native apps, offering the reach and accessibility of the web with the capabilities and performance of native apps.

That being said, some of the benefits of PWAs are not (yet) available in Power Pages.

Offline capability

When you configure a Power Pages’ site to be a PWA, you can specify which pages will be enabled for offline access. For static content, this is not a problem, and the static content will render nicely when your device is offline.

However, if your page is showing any information from Microsoft Dataverse you will get an error as the PWA implementation of Power Pages does not have the ability to store Dataverse data offline.

One of the powerful features of Power Pages is of course to allow site visitors to create, read and update information stored in Dataverse.

If you need to create an app that may need to be used while offline and be able to access Dataverse information you are out of luck.

But are you?

I have devised a method that at least provides the ability to read Dataverse information offline, this might satisfy use cases where key information needs to be accessed offline (manuals, product catalogues, etc) in places with limited connectivity, like airplanes, coal mines and my Mom’s place.

Solution: Using jamstack to create a static page from Dataverse content.

I have also written about jamstack before as a method to publish Dataverse information on static sites without using Power Pages. However, this method can work using Power Pages as well.

Effectively we will create static content from dynamic content.

Here is how:

• Create a web page in Power Pages and using the progressive web app settings, configure this page to be offline capable.
• Create a Power Automate flow that will read our Dataverse data
• Format the data into HTML with proper formatting
• Drop it into the page copy field of our webpage record in Dataverse.
• Try out our PWA offline to see results.

Step 1: Create an offline capable web page

I spend all day writing content for Microsoft Learn, so I am not going to repeat the steps here. Please read this topic to learn how to add a webpage to Power Pages.

Step 2: Enable your site to be a progressive web app

Another great document on Microsoft Learn to explain the process to enable PWAs.

Step 3: Enable your page to be available offline

Whoever is writing the Power Pages docs over at Microsoft is killing it! Here is how to specify which pages can be accessed offline.

Step 4: Copy default webpage code

We are going to want to copy the default web page code in for our results to display nicely. Of course, if you are an HTML expert and want to format things in your own way, nothing is stopping you, I am just being lazy at this point. We will use it later when we build our Power Automate flow.

Select the Edit Code button on your page.

Open Visual Studio Code for the web, and then copy the page contents, keep it for for later.

Step 5: Get GUID of the web page copy record

We are going to want to know what offline page we are updating using Power Automate. For this we will need to use the Portal Management app and navigate to the localize web page.

Before you do that, ideally you already should have Level up for Dynamics 365/Power Apps extension installed on your browser. Don’t have it? I’ll wait. The extension has a number of tools, but we will use it to get the GUID of the web page record.

From the design studio, select the “…” from the left menu and choose Portal Management app.

Select Web Pages from under the Content section and locate the page you created in the design studio earlier.

When you have the page record open, SCROLL DOWN, and locate the Localized Content section and open the localize page(s).

Now that you have the localize page open, use the Level Up tool to capture the GUID of the web page record.

Step 5: Build Power Automate flow

We are now going to build a flow that will read our Dataverse records and format them into an HTML table. We will combine that HTML table with the webpage code we captured above, and then paste it back into the page copy field of the webpage record.

The first step is that we will want to update our “static” web page each time there is a change, whether its a new record added or updated. If you happen to have a lot of these updates happening, you might want to consider instead to run the process on a schedule to reduce the number of flows consumed.

The next step is that we will collect all the records that we want visible on an offline page. This could be one or many records.

We will use the compose action to build out the HTML table.

The next action is to create the body of the webpage, here we will paste in the HTML source code of the web page, and inject the HTML table we created in the previous step in between the <div></div> tags.

The final step is to update the actual web page record in Dataverse.

Testing the process

Add or update a record in Dataverse to trigger the Power Automate flow.

Install you PWA on a mobile app and go offline.

Once you navigate to the page, you should see Dataverse data on the offline page!

Note that if records are updated or created in Dataverse, you will need to go online again to get the latest updates, also note that there is still the standard 15 minute cache SLA, so you may need to refresh the cache to update the page.

Summary

This is one method to get offline Dataverse info available on a Power Pages enabled progressive web app.

I presented this particular problem as a head 2 head challenge at the Arctic Cloud Developer Challenge. The steps above outline the solution that was in my head, the team that won (REIDARS DANSEORKESTER) the challenge took on a different approach, which you can read about here.

There are always more than one way to resolve an issue.

Photo by Annie Spratt on Unsplash

Nick Doelman is a Senior Content Developer at Microsoft, a former MVP, and a tinkerer of all things Power Platform. Stuff that ends up on this blog is considered community content and not official Microsoft documentation. (So don’t get me in trouble!) Follow Nick on Twitter for more Power Platform goodness.