Dynamic start_url for PWA Integration in AEM Adaptive Forms | Community
Skip to main content
ayushmishra07
Adobe Employee
ayushmishra07Adobe Employee
Adobe Employee
July 21, 2023
Solved

Dynamic start_url for PWA Integration in AEM Adaptive Forms

  • July 21, 2023
  • 2 replies
  • 2217 views

Hi All, 

The problem statement is as follows :

I have created a custom integration configuration for Progressive Web Apps in AEM Adaptive Forms ( based on AEM 6.5 ). For a form that I am trying to convert to PWA, the start_url also includes some query parameters which are used for tracking how the user landed on that particular form. Now the start_url is defined in the manifest.webmanifest file which is added in the head of the form as a link. It is recommended that we have one static start_url but in my case I want the query parameters also to be part of the start url because based upon that the user experience will change. 
So I need to modify the manifest.webmanifest file at run time to change the start_url based upon the query parameters for the user who is installing that PWA.

 

It would be a huge help if someone can suggest the optimal ways to achieve this.

Thanks,
Ayush

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by ayushmishra07

After a lot of exploration, I came to the conclusion that it is not possible in AEM to have a dynamic start url in manifest.webmanifest file of your PWA. Also, as per the best practice it is recommended to always have a static url as a start_url in the Manifest file due to caching and background update reasons. 

In case, there is a requirement where in you have some dynamic data that you need at PWA level which is coming as part of query parameter in the site, then in place of reading it from query parameters, you can store it in the cache memory once the user opens the site for first time and then read it from the cache memory in the PWA. 


For details on implementation of sharing data using cache, please refer to this blog : https://www.netguru.com/blog/how-to-share-session-cookie-or-state-between-pwa-in-standalone-mode-and-safari-on-ios 

Implementation steps in case of reading query parameters : 

1- Create a dummy endpoint and event listeners to handle fetch request to that dummy endpoint in your service-worker.js file.

2- When a user lands on the site trigger a POST request to set the query parameters in the cache memory using the dummy endpoint created.

3- Read the query parameters as the GET request from cache memory in PWA using dummy endpoint.

2 replies

ManviSharma
Adobe Employee
ManviSharmaAdobe Employee
Adobe Employee
July 21, 2023

Hi ,

 

To dynamically modify the start_url in the manifest.webmanifest file based on query parameters, follow these steps:

  1. Create a Sling Model to extract query parameters from the request URL.

  2. Generate a dynamic start_url based on the extracted query parameters.

  3. Update the manifest.webmanifest file with the dynamic start_url.

  4. Bind the Sling Model to the Adaptive Form to execute the logic when the form is accessed.

This approach will customize the user experience based on the query parameters for each PWA form installation.

    ayushmishra07
    Adobe Employee
    ayushmishra07Adobe EmployeeAuthor
    Adobe Employee
    July 21, 2023

    Hi @manvisharma , 

    Thanks for the response.
    Can you please provide more clarity on this:

    Update the manifest.webmanifest file with the dynamic start_url.

    will this update happen from java side or javascript.
    If we are modifying the file using Sling Model, there will be problem of concurrency. Let's suppose there are multiple users all land on the site at the same time but have different query parameters. How will this be handled if the file is getting modified at server side. 

      ayushmishra07
      Adobe Employee
      ayushmishra07Adobe EmployeeAuthorAccepted solution
      Adobe Employee
      July 26, 2023

      After a lot of exploration, I came to the conclusion that it is not possible in AEM to have a dynamic start url in manifest.webmanifest file of your PWA. Also, as per the best practice it is recommended to always have a static url as a start_url in the Manifest file due to caching and background update reasons. 

      In case, there is a requirement where in you have some dynamic data that you need at PWA level which is coming as part of query parameter in the site, then in place of reading it from query parameters, you can store it in the cache memory once the user opens the site for first time and then read it from the cache memory in the PWA. 


      For details on implementation of sharing data using cache, please refer to this blog : https://www.netguru.com/blog/how-to-share-session-cookie-or-state-between-pwa-in-standalone-mode-and-safari-on-ios 

      Implementation steps in case of reading query parameters : 

      1- Create a dummy endpoint and event listeners to handle fetch request to that dummy endpoint in your service-worker.js file.

      2- When a user lands on the site trigger a POST request to set the query parameters in the cache memory using the dummy endpoint created.

      3- Read the query parameters as the GET request from cache memory in PWA using dummy endpoint.

      Terms & ConditionsAccessibility statement

      Loading footer...