Tracking Progressive Web Apps

[CesarFlorero]

Hi, 

I am sure there is mention about tracking best practices for PWA, but I was not able to find any info. Perhaps if I can get help by highlighting implementation requirements and possible tracking challenges. 

Note. We are currently tracking iOS and Android Apps with especific 'Mobile Tealium IQ'  profiles and our apps have Tealium SDK installed. 

Here is a link to the PWA.

https://radiofreeasia.gitlab.io/mobile-news/#/

Thanks,
Cesar

[TealiumJustin · Accepted solution]

Hi @CesarFlorero ,

Here are some code snippets that might be helpful from the following blog post:

PWAs: What They Are and Why They’re Important

// File: index.html or app.js
// For those events in the window
window.addEventListener(‘appinstalled’, (evt) => {
  utag.link({tealium_event: "app_installed", app_type: "PWA"});
});

// In our app, listen to incoming events from the service worker
navigator.serviceWorker.addEventListener(‘message’, event => {
  utag.link(event.data);
});

// File: service-worker.js
// For those events occurring in the service worker
self.addEventListener(‘notificationclick’, event => {
  event.waitUntil(
    self.clients.matchAll({includeUncontrolled: true, type: "window"}).then(function (clients){
      clients.forEach(function(client){
        client.postMessage({"tealium_event":"push_message_click", "push_message_id": "abc"});
      })
    })
  )
})  

[CesarFlorero]

Thank you! This information is very helpful.