Anghami, the leading music streaming service in the Middle-East, turned 5 last November. First on iOS and Android, followed by Desktop in 2015, Anghami is now available across all devices, allowing more than 70 million users from all over the world to play and download millions of both Arabic and International songs.

For the past years, our main focus was to acquire new users, offer them a seamless experience and increase their engagement. Lots of enhancements to our apps, playlists curation and music recommendation were done to make sure any user can listen to his favorite tunes and discover new tracks and artists effortlessly.

Why building a Progressive Web App

Previously, any user that clicks on an Anghami link (song, artist, album or playlist) from his mobile device was asked to download the app in order to play music.

In a region where 3G internet is relatively slow and expensive, and where a big percentage of the population use low-end devices, we found ourselves losing users simply because they couldn’t afford downloading ~70MB on iOS and~20MB on Android.
Welcoming new users with empty screens without allowing them to enjoy the “Anghami experience” was no longer an option; removing the obstacles became a must.
It was time to create our Progressive Web App (PWA)

What is a PWA?

A PWA is a mobile website that is fast, reliable and engaging. It offers “almost” the same experience as a native app without having to download one.

The Journey

At Anghami we love Angular and thanks to Angular CLI we didn’t have to worry about setting the project up, integrating webpack or handling minification and aot compilation.
It took us around 3 months to launch our first version of the PWA (August 7th 2017), which is an exact copy of our native apps UI.
Our main focus was to have a fast mobile website, allowing users to stream music from any mobile device.

To reach that goal multiple techniques were implemented.

Fast

As per Google developers website, 53% of users will abandon a site if it takes longer than 3 seconds to load. Our app-shell consists of our Anghami logo which gets printed within that duration giving the user the fast load impression. Everything else crucial for our app launch gets loaded in the background without blocking the view for long.

• Important CSS rules are inlined in our index.html while everything else gets loaded on demand.
• Any script not critical for our app load, such as third party scripts, is loaded asynchronously removing render blocking JS, which definetly makes the HTML render faster.
• With Angular routing, we load our views on demand only, keeping the main bundle small. These chunks will also get cached in our service worker, allowing the next visit to become instant.

We used/are still using Lighthouse, Pagespeed insights and Chrome performance tab to measure speed and fix whatever can be fixed.

Although our speed results are acceptable, there is still a lot of room for enhancements. A website performance is an on-going process, and with our daily tests we’re always finding ways to further improve the experience.

Reliable

A PWA should instantly load regardless of the network state; to allow this to happen, data should be cached.
Sw-precache, a tool built by Google, is integrated in our build process allowing us to precache static assets as well as cache routes, audio files and API calls on runtime within our service worker.

A user accessing the PWA will be able to navigate within the app and see any page already cached. He/She can also listen to the 20 recently played songs even without internet.
Tip: If you don’t have 3g and you gotta listen to that playlist on your way to school or work… Just stream it once over wifi and enjoy it offline for the rest of the day 🙂

Engaging

In order to call an app “engaging”, users should be able to launch it instantly and easily without having to type the url in the browser every-time.
Hence, and with the help of web app install banners, a user accessing the web repetitively will be prompted to add the app to Home Screen, allowing future visits to be in fullscreen (the address bar is hidden), offering an app-like experience. This ability is specified within our manifest.json file.
As stated beforehand, any view previously visited is cached within the service worker, which means that opening the app from Home Screen will load the PWA instantly even with no internet connection.
In order to assure more engagement, users are asked as well to allow push notifications on their devices. They will then get notified about new music from their favorite artists, as well as the weekly mixtape which is generated every Monday tailored to every user’s taste.

Numbers and analytics

Launching our PWA was a beneficial step for the product.
We have been monitoring numbers and A/B testing multiple features and texts to assure that we are showing the right messages and right buttons at the correct places. Many numbers changed significantly since August showing us that we are on the right track. We are gaining so far an extra 15 000 app download every month coming straight from the mobile web.

The PWA performance journey isn’t easy; allowing the users to enjoy the streaming experience from a mobile website with an immersive experience was pretty challenging. Every second spared is important for the retention of mobile web users. The last series of performance fixes, lazy loading, code optimization and some server tweaks done during the past month only, decreased our bounce rate by 10%, increased the average time spent on the website by 1min and increased the percentage of users who play at least 1 song to 50%.

What’s next?

Building Anghami PWA was one of the most fun projects I have ever worked on. The topics we are able to learn, the technologies we are working on and the challenges we are tackling are so interesting that you simply fall in love with the project. Our results are good, but we still have a lot to do, from features to performance optimization and user experience.

First thing on the roadmap is implementing Angular universal, which will definetly be a game changer in terms of speed. We have already started testing our NodeJS server for that purpose.
On the other hand, we are focusing more on “smoothly” converting users to download our native apps where they can enjoy the full experience. Users who do not wish that will still be able to use the PWA normally. We will be focusing as well on optimizing our components and services, enhancing their code structure and decreasing their interdependence which will allow us to easily integrate them in our future projects.

That was a quick brief about the first version of the Anghami PWA, please feel free to share any feedback, we would love to hear your opinion.
And if you are interested in joining our amazing family, we are recruiting passionate front-end engineers! ?? www.anghami.com/careers

Meanwhile… keep the music playing 🙂