PWAs: What They Are and Why They’re Important

What is a PWA?

A Progressive Web App (PWA) is an app that runs in a web browser with extra features that make it behave as if it was an app installed from an app store. These features include “push notifications” as well as the appearance of being online even when in airplane mode. With the introduction of PWAs, we now have webpage technology running in a small screen, and while it does have a limited network it still keeps us in a state of app-like bliss — even when offline. If you’re like me, you’re very excited that PWAs are JavaScript and HTML. Google Android and Chrome have the most support for this technology, but other browsers support service workers which can help speed up the experience and handle the offline state.

The ‘Sort-of’ Online State

Google is using a term describing the state of “sort of” online called “Lie-Fi.” Sometimes your phone’s Wifi reading is lying to you that it is online. The strange state of having poor Wifi connectivity is something we’ve all experienced and we typically blame our network administrator (at home or in office) or our cable company.  But it could be the web server itself to blame — for example, this can happen when retailers have a sale and their website speeds are slower than usual due to increased online traffic. The Wifi lights may be on, but nothing seems to show up after clicking refresh.

According to Google, “Lie-fi” is when the device is connected but the network connection is extremely unreliable or slow and the network request drags on and on before eventually failing. Users end up wasting precious seconds just waiting for the inevitable.

Cache and Service Workers to the Rescue

Retailers and other web content providers (anyone who has a website you visit infrequently and will never install their app) now have Progressive Web App technology to solve for this offline state. The solution is simple: a modern web browser will run something in the background that will display content from a previous visit to the website when the web app determines that the connection is off or just really slow. The underlying technology is a ‘service worker.’  

What is a service worker? A service worker is extra logic that intelligently decides what state you’re in (offline or online) and if the app should get new content from the network or get content from the cache.

You’ve most likely heard of cache before and may be thinking, “Doesn’t the browser cache files already? If I go to clean out my browser file storage, I see hundreds of megabytes to delete.”

While the browser has been doing some optimizations for speed improvements, this cache was not designed to help with the “no network” experience. The difference with traditional browser cache and service worker cache is that the service worker cache is available when offline.

For typical websites, when you’re offline (and don’t have a service worker), you don’t get to see what is in the cache, and instead, see the famous dinosaur image in Chrome (pictured below). 

Web developers can now handle this situation by building service workers to pull content out of their cache. The experience (for the most part) is now just the same for the person browsing the web high up in the mountains where Wifi may not be plentiful.

Web Analytics When Offline

If you need to report analytics data on website usage you may be wondering how to report usage to a web analytics vendor(s) when there is no connection and how to track some of the new events that happen in PWA.

For the offline state, this is rarer in our current 4G world. Of course, you won’t know how rare until you attempt to measure it. 🙂

If you have a large client base with intermittent internet, your analytics vendor tracking libraries are already ready to queue up tracking when offline.  

• For example, Adobe Analytics provides a flag to set:
  • s.trackOffline=true;

• If using Google Analytics and Google’s workbox library, it’s just a matter of calling:
  • workbox.googleAnalytics.initialize();

You can even set up your PWA to store/retrieve the utag.js itself from your service worker cache in an offline scenario. If your utag.js has loaded and has the Adobe Analytics tag bundled (often the best practice) then you’re ready to go. There is no need to reinvent the wheel here.

New Events are Now Ready to Track in PWAs

The following events are introduced with Progressive Web Apps that are likely interesting metrics when determining the success of your PWA-building efforts.

Window Events

• The App Install Banner Appears (“beforeinstallprompt”)
• The App Was Installed (“appinstalled”)

Service Worker Events

• Push Message Received (“push”)
• Push Message Clicked (“notificationclick”)
• Push Message Dismissed (“notificationclose”)
• Additional Events (“install”, “fetch”, “activate”, “sync” events available as well)

NOTE: At the date of this article being drafted, most of the app-like events are not-yet-supported in iOS (Safari), but they do have service workers.

Now the Code to Listen for and Track Events

// 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”});

     })

   })

 )

})

Final Recommendations

While there aren’t any necessary changes needed in your PWA when working with Tealium’s Tag Management (TMS), we do recommend making the following updates:

(1) Use the service worker to serve up a cached utag.js (for when offline) and enable the offline features of your analytics vendors

(2) Add additional tracking events for the new PWA-specific events

While PWA technology is still in the early stages and things may change, it is only a matter of time before you’re reporting on your user’s interactions with your updated Progressive Web App.