Pushpad

Articles about web push notifications

Domain redirect and web push notifications

Have you ever wondered what happens to the subscribers that receive your notifications if you decide to migrate to a new domain?

  • # deliverability
  • # subscription
  • # push-api
  • # web-notifications

Building a demo page for testing web push notifications

This tutorial can be useful for development if you want to test web push notifications on your domain using Pushpad. You will see how to create a demo page where a user can subscribe to notifications and send a notification with custom options to himself.

  • # javascript-sdk
  • # targeting
  • # web-notifications

List of HTTP status codes and errors returned by web push services

A list of all the official documentation provided by the push services about the HTTP status codes and errors that can be returned. When an application sends a notification to a browser push service, it should check the status code returned and take appropriate actions.

  • # deliverability
  • # push-api

Multi-Channel Notifications in Ruby on Rails with Noticed gem and Pushpad

In this tutorial we explain how to use the `pushpad` gem with the `noticed` gem to create multi-channel notifications in a Rails application. In particular we'll use the `noticed` gem for the notifications in general, while Pushpad will be used to deliver the web push notifications in real time, even when the website is closed.

  • # deliverability
  • # integration
  • # javascript-sdk
  • # push-api
  • # targeting
  • # web-notifications

A bell for notifications with JavaScript animation

In this tutorial we create a ringing bell animation with JavaScript and we learn how to create a simple bell icon that you can place in a corner of your web page (e.g. to collect subscribers to your push notifications).

  • # web-notifications

How to change the scope of a service worker

The scope of a service worker defines when it is active and usually depends on the path where it is located. However in this tutorial we'll see some directives that allow to change the default scope of a service worker, regardless of its location.

  • # service-worker

"This site has been updated in the background": what is this notification?

If you subscribe to the notifications of some websites, you may sometimes see a strange notification with this content: "This site has been updated in the background". What does that mean? And if you are the website owner, how can you prevent that notification?

  • # push-api
  • # web-notifications

What happens to the push subscription when you clear data from browser?

A user visits a website and subscribes to the notifications. Then, after some time, he opens the browser settings and clicks "clear data" in order to remove the history and all the data stored by the browser on the device. What happens to the notifications in this case?

  • # deliverability
  • # push-api

Best UI / UX for subscribing users to web push notifications

In order to optimize the number of people that subscribe to your notifications, you need to use the right user interface (UI). It's also important to design a good user experience (UX), so that the notification prompt is perceived as something useful for the user and not as an annoyance. In this post we'll analyze different approaches and user interfaces that are useful to ask users to subscribe to web push notifications.

  • # permission

Web push notifications: user log in and log out

How can you associate a push subscription to a specific user? How can you implement log-in and log-out for web push notifications?

  • # javascript-sdk
  • # push-api
  • # targeting
  • # web-notifications

Web Push: send a notification to all users

Sometimes you just need to send the same notification to all users that have subscribed to your website notifications. Let's see how to achieve that.

  • # push-api
  • # targeting

Web notifications in incognito mode

Is it possible to subscribe to notifications when surfing in incognito mode or with private browsing (e.g. on Chrome, Firefox)?

  • # permission

Web Push: what is an endpoint?

If you are implementing web push notifications on a website you should be familiar with the concept of endpoint.

  • # push-api

How to send push notifications from a closed web app

One of the major features of web apps (both on desktop and mobile browsers) is the ability to send push notifications that are delivered even when the website is closed.

  • # push-api
  • # web-notifications

Web Push Notifications: Standard and Official Documentation

"Web Push Notifications" is a general term to refer to the push notifications sent by websites and web apps. However, if you are looking for an official document that defines the "Web Push Notifications" standard, you won't find it. This is because this technology is made up of different technologies, each one serving to a specific purpose. Let's find out what these technologies are and where the official standards are located (documentation).

  • # push-api
  • # service-worker
  • # vapid
  • # web-notifications

Web Push Notifications: what happens if the client is offline?

If you are a beginner with web push notifications, you may wonder what happens to the notifications sent when the client is offline or the device is turned off. What is the behavior of the notifications in this case? Do they get delivered or are they lost?

  • # deliverability
  • # push-api

Web Push TTL: definition and maximum value

When you send a web push notification, you need to set the TTL: what is it? What value should you use? This article describes the TTL and the best practices for setting its value.

  • # deliverability
  • # push-api

How to show web push notifications for longer

How to prevent the browser notifications from automatically closing? Is there any way to increase the amount of time the notifications are displayed in foreground to the user?

  • # web-notifications

What are the browser push services?

In order to send push notifications from a website to a browser, you need to use a push service, as defined by the W3C Push API: let's see a list of push services for the major browsers and how they work.

  • # push-api

Debugging web push notifications on a specific device

This article describes a simple and effective method for debugging web push notifications on a specific browser using Pushpad.

  • # deliverability
  • # javascript-sdk
  • # push-api
  • # targeting
  • # web-notifications

Apple is working on Web Push Notifications for iOS and Safari (2023 Update)

The standard for web push notifications (Push API) is now available on iOS and Safari. You can read more about the history of this feature on Safari in this blog post, which has received multiple updates, from the first rumors in 2021 to the release of the feature on iOS in 2023.

  • # push-api
  • # safari

How to remove a web push notification

Let's say that you have sent a notification to a recipient and then you want to remove it: how can you do that?

  • # push-api
  • # web-notifications

Silent push: sending web push messages without displaying notifications

When you hear "web push" you probably think about notifications... but that is not necessary true. In theory, the web push technology could be used for delivering messages or updates to the web app, without displaying a notification to a user.

  • # permission
  • # push-api
  • # web-notifications

The notification prompt can only be triggered by a user gesture on some browsers

On some browsers, the permission prompt for notifications can be displayed only after a user interaction with the website. Let's see why some browsers enforce this rule, what happens if you don't comply with it and how can you implement a solution that works across all major browsers.

  • # permission
  • # prompt
  • # web-notifications

The double opt-in (prompt) for web push notifications

Browsing the web, you may have noticed that most websites use a double opt-in process for subscribing the users to notifications. Basically these websites first show a custom prompt (designed with HTML / CSS) that asks you if you are interested in the notifications, then, when you click the subscribe button, they display another prompt (with native appearance) asking you if you really want to allow the notifications from the website. Isn't one prompt enough?

  • # permission
  • # prompt
  • # ux
  • # web-notifications

Multilingual notifications with Pushpad

It's easy to create segments based on the user preferred language. In this way you can send different notifications to users with different language preferences.

  • # targeting

The new Pushpad widget for web push notifications

We are happy to announce that we have just released a new feature in our Javascript SDK: we provide a widget that makes it easy to display a custom prompt, a floating action button or a subscribe button in order to collect subscribers.

  • # javascript-sdk
  • # permission

How to add a service worker to Wordpress

There are many reasons to add a service worker to Wordpress: for example you may want to improve caching or add web push notifications. Let's see how to do that.

  • # service-worker

Geolocation with Pushpad

Would you like to send web push notifications only to people located in a given place? If you use Pushpad you can implement that in different ways.

  • # javascript-sdk
  • # targeting
  • # web-notifications

Updating the service worker

Are you stuck with an old version of the service worker or your imported scripts are not being updated as you expect? This guide shows you how to ensure that your service worker and the imported scripts are updated in a timely manner.

  • # service-worker

How to send a notification only to a random subset of users

What if you want to send a web push notification only to 10% of your users? This can be useful for example for testing and for measuring CTR for that notification before sending it to all your users. There are many ways to achieve that, but in this tutorial we will show a simple method with tags.

  • # targeting

Pushpad Express is deprecated (please move to Pushpad Pro)

Back in 2015 the first product that we launched was Pushpad Express. Then in the next years we have developed and launched a new product, called Pushpad Pro. Pushpad Pro has proven to be absolutely the best product and offers a lot of advantages compared to Express: that is why we have decided to stop supporting Pushpad Express. **All project that use Pushpad Express must move to Pushpad Pro before 1st February 2019.** After that date all project that use Pushpad Express will be removed.

Display the prompt for web push notifications multiple times

Usually the prompt for web push notifications is displayed only once, the first time that the user visits a website. What if the user blocks the notifications? Is there a way to show the notifications prompt when the user visits the website again?

  • # permission
  • # prompt
  • # web-notifications

Web push subscription age affects delivery rates

This article investigates one of the reasons that negatively impact delivery rates for web push. First it shows that web push subscriptions can last many years without expiring, then it proves a negative correlation between the age of a web push subscription and its expected delivery rate.

  • # deliverability
  • # push-api

Targeting only recently active users can increase delivery rate of web push notifications

There are various reasons that can prevent a web push notification from being delivered. One of them is the presence of subscriptions that are no longer in use: if a device / browser is no longer used, then its subscription to web push notifications is still valid, but the notification won't be delivered. That legacy subscription will eventually expire and will be removed automatically (by Pushpad), but this can take several months, depending on the browser push service (e.g. Google FCM, Mozilla autopush, etc.).

  • # deliverability
  • # targeting
  • # web-notifications

Reengage inactive users with web push notifications

You can use web push notifications to re-engage your users in many different ways. For example you can send transactional notifications to specific users when something happen or you can send large campaigns to all your subscribers. However in this tutorial we show a way to send notifications specifically to users who become inactive.

  • # targeting

Force the user to subscribe to web push notifications

Forcing the user to subscribe to push notifications is probably not a good choice for most websites. However there are some specific situations where it makes sense to do that.

  • # javascript-sdk
  • # permission
  • # subscription
  • # web-notifications

Turn website notifications on or off

You can change your notification preferences for a website at any time. You can allow or block the notifications using the browser preferences:

  • # permission
  • # push-api
  • # web-notifications

Can I use the (Web) Push API with hybrid mobile apps?

Many developers have asked if they can use Pushpad for sending push notifications to their hybrid mobile apps. Basically they want to **use the W3C Push API inside a WebView**. That would make sense, because a WebView is a sort of browser embedded inside an application.

  • # android
  • # push-api
  • # web-notifications
  • # webview

Does Safari on iOS support web push notifications?

Safari on iOS supports web push notifications starting from iOS v16.4 (released in 2023). Previous versions did not support web push notifications.

  • # ios
  • # safari
  • # web-notifications

Marketing with QR codes and web push notifications

Web push notifications have more features and are much cheaper compared to traditional SMS. They are generally the best choice for online businesses. However they have a drawback **for physical stores: it can be hard to make the user subscribe**. For SMS it is much easier: you just need to collect the phone number through a form (e.g. using paper). For web push is different: **you need to tell the user to visit a given website in order to subscribe**. Or... **you can use QR codes!**

How to send a web notification at a specific time

You can use the Push API to send timely notifications from your website (the notifications are delivered even when the user is not on your website). If you use Pushpad, a service for web push notifications, it is very simple to set the time when the notification must be delivered.

  • # push-api
  • # web-notifications

Pushpad: monitor CTR and other metrics for web push notifications

As you may already know, you can use Pushpad to collect metrics about the delivery of web push notifications. We have recently updated the docs with more detailed information, so you can [check them out](https://pushpad.xyz/docs/monitoring).

Debugging service workers and push with Firefox

If you have problems with web push or with other service worker based technologies on Firefox, then you probably want to use the Firefox developer tools for debugging.

  • # service-worker

Welcome notifications with Pushpad

Do you want to send a welcome message when a user subscribes to your web push notifications? Here's how to create welcome notifications using Pushpad Pro.

  • # javascript-sdk
  • # targeting

Create welcome series with web push notifications

You can use web push notifications to create welcome series for the new users that sign up to your application. Let's see how to create a welcome series using Pushpad. 

  • # targeting

Reset browser permission for web push notifications

Many issues related to web push notifications can be solved by simply resetting the browser permission. That removes the old browser subscription and creates a new subscription. 

  • # permission
  • # web-notifications

Migrate to Pushpad from another service

If you currently use a service different from Pushpad and you want to migrate your existing web push subscribers to Pushpad you can follow these steps:

How to send single-user targeted notification with Web Push API

I would like to reply to an interesting [question](https://stackoverflow.com/questions/44714507/how-to-send-single-user-targeted-notification-with-web-push-api) that has been posted on StackOverflow. I reply here because the original question has been deleted.

  • # targeting
  • # transactional

Inspect service workers with Chrome

If you work with the Push API or service workers in general you know that debugging can be a pain. Fortunately Chrome has two hidden gems that can save you many headaches.

  • # service-worker

Introducing VAPID

We're happy to announce that Pushpad now supports **VAPID** (Voluntary Application Server Identification for Web Push).

  • # push-api
  • # vapid

Service worker: importScripts never updates scripts

Pushpad is a service for web push notifications. In order to add push notifications to their websites, **our customers need to install the service worker that we provide on their websites**.

  • # service-worker

Add push notifications to Wordpress in a few minutes

In this tutorial we'll see how to add push notifications to your Wordpress blog. Notifications are **real push notifications**, meaning that they are delivered even when the user is not on your website. This way you can re-engage users when you publish new contents.