In the previous #DevHack, I told you how to use deep links in your PWA for Microsoft Teams. This approach I currently implemented in one of my proof of concepts. Another functionality that my POC needed to have is to have dynamic manifest creating for the PWA.
In this #DevHack, I will tell you how you can make it possible to get dynamic manifests for your PWA using Azure Static Web Apps and Azure Functions.
When I started my journey with PWAs and dynamic manifests, I found two approaches:
- Use a dynamically generated manifest.
This approach worked fine on iOS and Windows/macOS, but we noticed a different behavior when testing it on Android devices. Android never recognized our PWA as a “real” PWA. Instead, Android created it as a bookmark to the site.
The only working solution for dynamically generated manifests is to make use of an API. My POC created as an Azure Static Web App can handle this by adding an Azure Function.
In my React application, I call the Azure Function with the following logic:
Info using react-helmet-async to do changes to the document head.