Push notifications 101: A tutorial for jQuery developers

Discover the ins and outs of push notifications in jQuery with this step-by-step guide on how to send push notifications.

Push notifications 101: A tutorial for jQuery developers Logo
Large cover image for Push notifications 101: A tutorial for jQuery developers

Step 1: Complete your jQuery project

Progressier allows to augment your jQuery web app with additional functionality, including push notifications and PWA installation. You can add Progressier to your project once it's ready to go and your app is available at a custom domain.

Step 2: Create a Progressier account

Progressier is a no-code tool that lets you quickly add new features to jQuery web apps without any programming. It typically takes just a few minutes to set up Progressier with a jQuery app.

Create your Progressier account . Progressier comes with a 14-day free trial that allows you to integrate it into your jQuery app risk-free. You only enter your payment information once everything is working to your liking.

Step 3: Make your jQuery project a PWA

Progressier will turn your jQuery project into a PWA. Enter your app's name, tell us how it was built (you might want to choose jQuery when prompted) and copy-paste your app's URL in the Domain field.

Step 4: Complete the setup of your jQuery PWA

Complete the tasks shown on screen to finish making your jQuery app universally installable and augment it with push notifications. It even comes with a complete solution for designing app screenshots and gathering reviews.

Step 5: Allow push notifications on your domain

Now go to your own app. You should see a button at the bottom-right corner of your app. Click on it and then tap Get notifications. You should be prompted to allow notifications. Once notifications are allowed, you'll be able to notify yourself with a test notification

Step 6: Send a test notification

Go to our Push Composer (login required) to compose your first push notification. By default, it will be sent to all your subscribers, but you can target a specific group of users in the Recipients section of the Targeting tab.

Step 7: Sync your own user data (optional)

Sending the same notification to every user for marketing purposes is one thing. Sending notifications programmatically to a user to react to events in your jQuery app is another. Luckily, Progressier comes with a solution for both use cases. Simply connect your user data (e.g. a user ID or user email), then call our Push API in your server-side code to send a push notification to a specific user. You don't have to manage push subscriptions on your end.

Why add push notifications to your app?

Push notifications allow you to send timely and relevant information to users, even when they are not actively using the app. They can also help to increase user retention by keeping users engaged with the app. And last but not least, they can be used to drive traffic to specific parts of the app or to promote certain features.

What are the cons of push notifications in web apps?

Unlike native apps, not every browser and device supports push notifications. So you can't entirely rely on this feature to deliver important messages to users.

Users may opt out of receiving push notifications if they find them to be too frequent or irrelevant. Also Google sometimes auto-blocks push notifications for users that frequently block them.

What are the best push services for jQuery apps?

There are many different push notification service providers to choose from for your jQuery app, and the best one for you will depend on your specific needs and requirements. Some of the most popular push notification service providers include:

- Firebase Cloud Messaging (FCM): a Google service that allows developers to send messages to their clients. Free but limited capabilities and scaling.

- OneSignal: This is a cross-platform messaging service that supports Android, iOS, and web platforms. It offers a range of features, including segmentation, A/B testing, and support for multiple languages.

- Progressier: probably the best option if you develop web apps as it also comes with additional functionality designed to enhance web apps specifically, e.g. targeted push notifications.

- WonderPush: WonderPush is a cloud-based push notification service that enables developers to send targeted messages to their users on various devices.

Creating your own push service

Creating you own push solution is feasible, but requires some non-trivial engineering. Chances are you'll be better off using an established push service provider. But if you still want to do this yourself, here are the four components you'll need:

1. Widgets to allow push notifications: you can directly call the native push interface. But if users block notifications right here and there, you won't be able to ask them again. Or you can display a widget that tells users why they should allow notifications before actually calling the native browser interface. This is the recommended way to do this.

2. A push subscription database: once a user has allowed push notifications, you'll be given a specific API endpoint for each user. Save it into your database so you can message users later.

3. An interface for preparing the payload of the notification: a push notification is a JSON object with properties such as title, body and icon which define the content of the notification itself. You must have a user interface that allows you to define these parameters before they're sent to your push queue.

4. A delivery service: if you have more than a few hundred simultaneous recipients, you'll need to build a push queue that takes care of processing push notifications.

Which devices and web browsers can receive push notifications?

- Windows/Chrome
- Windows/Edge
- Windows/Firefox
- Windows/Opera
- macOS/Firefox
- macOS/Chrome
- macOS/Edge
- macOS/Opera
- Android/Chrome
- Android/Samsung Internet
- Android/Firefox
- macOS/Safari (Safari 16 on macOS Ventura or higher)
- iOS/Safari (Coming 2023)

Your app here

Ready to engage users of your jQuery app?

Simplify your push notification setup with our comprehensive solution

Get started See plans