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.
Before continuing, if you just want to try web push notifications, you can use this demo page.
If you want to create a similar page on your domain, for testing purposes, you can follow this tutorial.
Frontend: subscribe the user to notifications
First you need to create a demo project on Pushpad (if you already have a sender for your domain, you should use that sender for the demo project).
Then create a service-worker.js file in the root of your website (if you don't have it already) and add this line of code:
importScripts('https://pushpad.xyz/service-worker.js');
Then create a web page on your domain with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Web Push Demo</title>
<script>
(function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');
// Replace PROJECT_ID with the ID of your demo project
pushpad('init', PROJECT_ID);
// When the button is clicked...
document.getElementById('send_demo_notification').addEventListener('click', function () {
// ... subscribe the current user to notifications with a unique tag
var tag = 'demo:' + Math.random().toString(36).substr(2);
pushpad('subscribe', function (isSubscribed) {
if (isSubscribed) {
// ... and send a notification to the user with that tag (i.e. current user)
fetch('/send_demo_notification?tag=' + tag);
} else {
// ... or display an error if subscription failed
alert('Notifications are blocked from browser preferences.');
}
}, { replaceTags: [tag] });
});
</script>
</head>
<body>
<button id="send_demo_notification">Send demo notification</button>
</body>
</html>
Basically you have a button that:
1. Subscribes the current user to notifications with a unique tag
2. Sends a request to the backend to send a demo notification to that user.
Backend: send a notification
Finally the backend will have an action that sends the demo notification to the current user.
You can use the REST API or the libraries.
For example, if you use Rails / Ruby, you can write something like this:
def send_demo_notification
tag = params[:tag]
raise 'Invalid tag' if tag !~ /\Ademo:\w+\z/
notification = Pushpad::Notification.new({
body: "Example notification.",
title: "Web Push Demo",
target_url: "https://example.com"
})
notification.broadcast tags: [tag]
head :ok
end
Important: the above example is for testing purposes or debugging. Use a demo project (not the production one) and remove this code from your website when it's no longer necessary.