Jon Fletcher 2020-06-17

How to deliver Push Notifications for Progressive Web Apps (PWA)

Whether it's breaking news or a pizza arriving, push notifications are designed to cut through the static of normal phone traffic and give us the information we need. 

Traditionally delivered from apps, the rise of 'web push' allows any site to send desktop and mobile notifications. This has given publishers a new channel to re-engage audiences with their content. 

But, laying the middle of the Venn diagram between app and websites, are Progressive Web Apps. App-like in their features, yet online and browser-based, publishers need to know how to make the most of push notifications without disrupting their PWA experience. 

We're giving publishers the complete guide to sending and optimizing PWA push notifications.

Let's start with some straightforward points: 

  • Can you use push notifications with PWAs: Yes
  • Can I send web push notifications to desktop and mobile devices? Yes
  • Can I send notifications to every operating system? No, web push notifications are not available on Apple's iOS. 

What are web push notifications?

A push notification is simply just a message that pops up on a user's screen or device. 'Web push' is the name for the process of pushing these notifications from a server to a client on the web, rather than a locally downloaded app. PWA push notifications fall under the category of web push.  

The push part comes in because these 'notifications' are often pushed from the server to users' devices, even when the page or application is not running. This turns these notifications into a formidable tool. Users don't even have to be thinking about your app or page. They might not have opened it in weeks. A push notification puts your most popular content right in front of them, with only a single click needed to access the story. 

The value of push notifications for publishers

Online publishing is a competition for attention. Every story has to have more instant appeal to stand out from newsfeeds, homepages, and newsletters. Compared with the competition for attention, a notification that pushes its way onto users' browsers and home screens, armed with a single message and link is the equivalent of setting off a flare in a library. 

Push notifications are also resistant to ad blockers which gives them very high viewability, making them incredibly valuable for driving users to a page. 

The business case for publisher push notifications

The true beauty of generating traffic through push notifications is that all these users are added value. A push notification doesn't nudge a reader to one story over another, it takes a user that was nowhere near your site and puts them at the start of your reader funnel. Yes, the majority won't click, but the opt-in rate for Media is still between 0.5 - 6%

For these users, web push is a wormhole that can beam unengaged users right onto your content. This is a subscription audience and additional traffic. 

Take a publisher with an audience of 250,000 monthly users, a conservative opt-in rate of 2%, and a churn rate of 20% per month. In 6 months, this publisher would have a subscribed audience of 24,000 users. 

Taking a low delivery rate of 50% and then an average CTR of 15% gives 1800 average clicks per notification. Even with notification fatigue publishers can use web push notifications on their PWA as a tool to build a valuable, standalone source of new traffic. 

Push notifications on progressive web apps

At this point, you may be asking why every publisher doesn't use push notifications. The problem is one of adoption rather than functionality. Push notifications used to be an exclusive feature of mobile apps. Publishers who haven't built a native app haven't configured them into their strategy. 

It was the rise of PWAs (Progressive Web Apps) that gave publishers a mobile accessible way to add push notifications to their strategy. But PWAs blurred the lines between websites and apps in a way that left publishers questioning where to invest their development.

Progressive web apps explained

If you're a publisher looking for a platform that will enable you to integrate push notifications, a PWA is a good place to start. Google defines PWAs as 'websites that took all the right vitamins.' 

Progressive Web Apps use progressive enhancement and the capabilities of enabled in modern browsers to offer more app-like functionality while still being, effectively, an online page that can be searched for and discovered like any other. If the capabilities aren't available, users still get the core experience.

Installed Progressive Web Apps run in a standalone window instead of a browser tab. It's even possible to flick between PWAs like regular apps. An installed PWA will feel like part of the operating system family of the phone, rather than a nervous, reloading and refreshing web page.

To create a PWA from a web page, you need three main components: 

  • A secure connection (HTTPS): PWAs must be served over a secure connection
  • A service worker: This will work out how to prioritize and run requests for your PWA making complex actions possible.
  • The manifest file: This is a JSON file that will contain the name, description, icons, colors, and other look and feel components of your PWA. 

PWAs are reliable in flaky connections and installable. You can start a PWA from the browser and just like with a native app you can install an icon on the home screen and an immersive experience with no browser window.

How push notifications work in progressive web apps

The core technology behind PWAs are Service Workers, scripts that run in the background, separate from the main browser thread. 
Service worker cache is the technology that makes it possible for a web site to function offline and in low connections. But it's also Service worker caching that makes web push notifications available to Progressive Web Applications.

Push events

When you send a message from your push notification server (such as OneSignal), an event is triggered. A service worker listens for these 'push events' and will send the notification to the user's device. As service workers operate aside from the main browser thread, they can receive and display notifications when the browser is not active.

Push Service

Every browser will then manage these push notifications through a "push service" system. The only exception is Apple's mobile IOS, which doesn't allow web push. 

Endpoint URL

When the user grants permission for your PWA to send push notifications, it will subscribe to the browser's push service. This features a subscription object, containing the "endpoint URL" of the push service and a public key. 

Service worker

The endpoint URL contains a unique identifier. Write and send your push messages in your push notification service and they are encrypted and sent to this "endpoint URL" and the push service sends it to the right client to the correct device. The browser will then identify the service worker that should handle the request.

With a PWA and a push notification service configured, publishers can start to build their subscribers and optimize their message delivery for the highest value. 

At Marfeel, we currently send around 25 million push notifications per day. We made our user research available to any publisher in a free whitepaper that saw publishers increase their value from push notifications by over 40%

Latest Articles

‹ Back to Blog Home

Get the headlines

Sign up to get the best headlines direct to your inbox

Your name
Your email