[Tech Blog] AnyManager PWA

Hi, I’m Abdelilah Machrouhi (Abdel), a back-end developer at Anymind Group. In this article, I will talk about PWA, why we would choose PWA instead of building a mobile app, and PWA service by AnyManager.

What is PWA

PWA, which stands for Progressive Web App, is a web page that provides a similar experience as a mobile application, using common web technologies including HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. As it is a web page, then users can access the page via a URL or search engines and have the same experience as a mobile application without the need to download and install via mobile app stores.

Main features

• The main component of a PWA is a service worker. It is a JavaScript file that manages requests and transactions between a server and the browser. It can be used to fetch and store the required data on the user device in advance. and by storing the data in the browser’s cache or IndexedDB, this means the website or web app will serve data quicker than a server does. and also provide offline functionality.

• Just like a mobile app, PWA can send push notifications to users who subscribed to receive push notifications.

• PWA provides a native app experience by adding a shortcut to the mobile home screen similar to an installed native application.

• Also one of PWA features is if the internet is down, then PWA can save user requests and then resent them later.

PWA compared to a native mobile app, and why PWA

Having all those features stated before, our website can provide visitors the experience of using a native app, plus the cheap cost of PWA development as you can build a progressive web app on top of your existing website or web app, and opposite to a native app, if there is a bug it wouldn’t cause a disaster.
PWA is easier to maintain and support and mostly doesn’t affect the functionality of the website in case there is an issue. all this makes PWA a better and optimal solution for the intended purpose compared to a native application.

AnyManager PWA implementation

In the AnyManager platform, we provide our publishers with a PWA solution, which makes it easier to implement and saves time for those publishers.
We use ATS.js to implement PWA features in the publisher’s website and to use Push notifications then we use Firebase Cloud Messaging (FCM) to get website visitors subscription tokens if they allow receiving push notifications, and later on, we can send those users push notifications

PWA users subscribe flow:

This was our first flow, the main issue in this one is that our backend endpoint to save user’s subscription token in BigQuery got a lot of requests which would affect cost and performance, so we fixed this issue by sending all subscribe requests to GCS, and then collect this data from GCS and save it to BigQuery.
so this is the new flow to subscribe new users and also to save push notifications clicks for reporting purposes:

To send a new Push Notification from AnyManager, publisher or internal members can log into AnyManager and create a new Push Notification by providing some details like notification title, content, logo, and URL to read full notification content. also, we can use the targeting feature by creating a targeting setting with the metrics below:

• Users geo data (Country, Region, and City)
• Type of device (Mobile or Desktop)
• Active users by filtering users who interacted with previous push notifications sent, and/or the number of visits in the last 30 days.

After creating a new push notification by selecting to send it immediately or schedule it to be sent at a specific date and time, then AnyManager cron will send this notification at the time scheduled using FCM API, if there is a targeting setting then we filter users tokens from BigQuery using Firebase Analytics data.

Challenges, issues, and improvements

Challenges :

We faced multiple challenges while developing this service to provide to our publishers, some of those challenges are:

• Push Notifications Targetting: FCM doesn’t provide targetting feature via the API, so we came up with a solution to use Firebase Analytics data via BigQuey to build our targeting feature when sending Push Notifications.

• Publisher onboarding automation: When onboarding a new publisher PO team used to create a new Firebase project with specific configurations and link it to BigQuery by following an internal manual, and then implement manifest.json, service worker file, and ATS to the publisher’s website, this is time-consuming and may cause issues if not done correctly, and also when using PWA with Shopify sites we needed to make this process automated so any new publisher can install our PWA app and start using PWA service without any additional onboarding process. so we developed PWA automation that does all the on-boarding process automatically and uses ATS.js to integrate manifest.json and service worker without requesting the publisher to add any additional files to their website, except for non-Shopify sites, the publisher needs to have ATS.js already on their website so if still not using ATS.js then need to implement it.

Issues :

One of our main issues right now is that the PWA service relies on FCM which is fine at the moment, but to show reporting data we use FCM export to BigQuery which sometimes fails or there are delays that affect our reporting dashboard.

Improvments :

One of the improvements we may need in PWA service are:

• Avoid the FCM export issue, FCM API doesn’t provide many pieces of information about the Push Notification sent right now, we hope this will change in the future so we can implement our own solution instead of relying on FCM export to BigQuery.

• View push notification article offline, when a user receives a Push Notification then the service worker will get the notification content and article related to it and save it in the user’s device, so when the user clicks on the notification received then they still can read the content even offline.