Understanding Website Push ID and Its Differences from Normal APNS
Introduction
Push notifications have become an essential feature for mobile apps, allowing developers to send targeted messages to users even when the app is not running. However, sending push notifications can be complex, especially when it comes to Apple devices. In this article, we’ll delve into the world of Website Push ID and explore how it differs from traditional APNS (Apple Push Notification Service).
What are Push Notifications?
Push notifications are a way for developers to send messages to users’ mobile devices, even when the app is not running. This allows apps to notify users about new updates, promotions, or other relevant information without requiring them to launch the app. Push notifications are typically used in conjunction with APNS, which enables two-way communication between an app and a user’s device.
How Does APNS Work?
APNS is a service provided by Apple that allows developers to send push notifications to iOS devices (including iPhones and iPads) and macOS computers. When an app requests to receive push notifications, it generates a unique token that identifies the app on the device. This token is then used to send push notifications to the device.
When a push notification is sent, APNS creates a byte-for-byte copy of the notification payload (the data contained in the notification). The notification is then encrypted with an AES-128-SHA1 key and signed with the device’s identifier for advertisers (IDFA) or a unique identifier provided by the app (APNs Certificate). This ensures that only authorized apps can receive push notifications.
What are Website Push ID?
Website Push ID, also known as Web Notifications API, is a feature that allows developers to send push notifications directly from their websites. This feature was introduced in 2019 with Safari 13 on macOS and iOS, allowing users to receive push notifications even when the app is not running.
The Web Notifications API provides a simple and standardized way for web applications to request permission to send push notifications to users’ devices. When a user grants permission, the browser generates a unique identifier for the notification, which can be used to send push notifications to that specific device.
Key Differences between Website Push ID and APNS
While both APNS and Website Push ID enable push notifications, there are significant differences between them:
- Permission: With APNS, apps need to request permission from users before sending push notifications. In contrast, the Web Notifications API allows users to grant permission for web applications, eliminating the need for explicit app installation.
**Token Generation**: When using APNS, apps generate a unique token that identifies the app on the device. With Website Push ID, the browser generates a unique identifier for the notification when it's granted permission by the user.**Notification Payload**: The payload of push notifications sent via APNS is encrypted with an AES-128-SHA1 key and signed with the device's IDFA or APNs Certificate. For Website Push ID, the payload is not encrypted, but it can be if required.
Implementing Website Push ID
To implement Website Push ID in your web application, follow these steps:
Step 1: Request Permission
Use the navigator.serviceWorker.getRegistration() method to check if a service worker registration exists on the device. If there is no registration, you can request permission for push notifications using the Notification.requestPermission API.
// Get the service worker registration
const reg = await navigator.serviceWorker.getRegistration();
if (!reg) {
// Request permission
Notification.requestPermission()
.then(permissionLevel => {
if (permissionLevel === 'granted') {
console.log('User granted permission');
} else {
console.log('User denied permission');
}
})
.catch(error => {
console.error('Error:', error);
});
}
Step 2: Register the Service Worker
Once permission is granted, register a service worker using the navigator.serviceWorker.register() method. This will create a unique identifier for your web application.
// Register the service worker
const registration = await navigator.serviceWorker.register('sw.js');
console.log('Service worker registered:', registration);
Step 3: Send Push Notifications
To send push notifications, you need to use the self.registration.pushManager.subscribe() method. This will create a subscription that can be used to send notifications.
// Subscribe to notifications
self.registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: 'YOUR_PUBLIC_KEY_HERE'
})
.then(subscription => {
console.log('Subscription created:', subscription);
})
.catch(error => {
console.error('Error:', error);
});
Step 4: Send the Push Notification
To send a push notification, use the self.registration.pushManager.sendNotification() method. Pass in the notification payload and any additional data you want to include.
// Send the notification
const notification = {
title: 'Hello from your browser!',
message: 'This is a test notification from your web application.',
};
self.registration.pushManager.sendNotification(notification)
.then(() => console.log('Notification sent'))
.catch(error => console.error('Error:', error));
Conclusion
In this article, we explored the world of Website Push ID and its differences from traditional APNS. We covered key concepts such as permission, token generation, notification payload encryption, and implementation steps. By understanding these differences and implementing Website Push ID in your web application, you can provide a seamless user experience for push notifications.
Further Reading
Resources
- Code Examples
- Web Notifications API Examples
- [Apple Push Notification Service (APNS) Code Examples](https://developer.apple.com/documentation/uikit/interacting_with_apple_push_notifications/?version= latest&target=ios)
- Documentation and Guides
Last modified on 2023-07-18