-
Notifications
You must be signed in to change notification settings - Fork 309
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pusher Beams Enquiry #369
Comments
Are you looking to add a title to your notification? Or are you having issues with the icon/deep_link? |
Hi @benw-pusher, I'm having issues with the icon/deep_link. |
These options should be handled by the client, what library are you using and how does the notification display there? |
I'm using "@pusher/push-notifications-web". The notification shows up on the browser. |
Hi, can you hard code your deeplink to a test value like "https://www.google.com". If you then click the notification, does it take you there (or show in your dev console)? |
Hi, thanks for your response. I tried your suggestion but I still don't get navigated to the hard coded url. I get the correct url in dev console in both cases-with $this->url and the hard coded value. It just doesn't navigate there. |
There may be an issue with the receiving browser. Which browser are you using? |
I primarily use Brave, but I have tried with Edge and Mozilla. |
Could you try another machine, just in the off chance there is machine issue stopping the notification opening the link in the browser? |
Could you share the code used in the client for subscribing to the interest and receiving the notification? |
This is it: //
import * as PusherPushNotifications from "@pusher/push-notifications-web"
//
let globalBeamsClient
//
onMounted(() => {
//
window.navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
const userId = user.value.id
const currentUserId = userId.toString()
const beamsClient = new PusherPushNotifications.Client({
instanceId: import.meta.env.VITE_PUSHER_BEAMS_INSTANCE_ID,
serviceWorkerRegistration: serviceWorkerRegistration
})
globalBeamsClient = beamsClient
const beamsTokenProvider = new PusherPushNotifications.TokenProvider({
url: route("pusher.beams-auth")
})
beamsClient
.start()
.then((beamsClient) => beamsClient.setUserId(currentUserId, beamsTokenProvider))
.catch(console.error)
}) service worker code: // This is the "Offline copy of assets" service worker
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js')
const {BackgroundSyncPlugin} = workbox.backgroundSync
const {registerRoute} = workbox.routing
const {StaleWhileRevalidate} = workbox.strategies
const {ExpirationPlugin} = workbox.expiration
const CACHE = "offlineAssets"
const QUEUE_NAME = "bgSyncQueue"
self.__WB_DISABLE_DEV_LOGS = true
self.addEventListener('install', () => self.skipWaiting())
self.addEventListener('activate', () => self.clients.claim())
const bgSyncPlugin = new BackgroundSyncPlugin(QUEUE_NAME, {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
})
const expPlugin = new ExpirationPlugin({
maxEntries: 5,
maxAgeSeconds: 1 * 24 * 60 * 60,
purgeOnQuotaError: true,
matchOptions: {
ignoreVary: true,
}
})
registerRoute(
new RegExp('/*'),
new StaleWhileRevalidate({
cacheName: CACHE,
plugins: [
bgSyncPlugin,
expPlugin
]
})
)
self.addEventListener('push', (e) => {
if (!(self.Notification && self.Notification.permission === 'granted')) return
if (!e.data) return
const msg = e.data.json()
e.waitUntil(clients.matchAll()
.then((clients) => {
// console.log(msg, clients)
clients.forEach((client) => {
const url = client.url
const id = url.slice(url.lastIndexOf('/') + 1)
const clientId = client.id
if (!client.url.includes(`chat/messages/${id}`)) { //send only if not on chat url and if clientId matches client id of sender.
self.registration.showNotification('SmartWealth Push Notification', {
body: msg.notification.body,
icon: msg.notification.icon,
actions: msg.notification.actions,
deep_link: msg.notification.deep_link
})
}
})
}))
})
self.addEventListener('notificationclick', () => {}) //to do
|
Your service worker doesn't appear to have the Beams service worker defined - you need to add this as per https://pusher.com/docs/beams/guides/existing-service-worker/#import-the-beams-service-worker-in-your-existing-service-worker-file. I can also see you have provided some custom code for handling the receipt and display of the notification - however this differed from the documented approach for this - https://pusher.com/docs/beams/guides/handle-incoming-notifications/web/#overriding-default-sdk-behavior. I am able to access the deep_link as expected with the following payload:
and the following service worker:
Here I am using the |
OK, thanks. I'll try it out. |
Hi @benw-pusher I wanted to test out your suggestion but I can't get past beams authentication which previously worked. What could be wrong here: //this my method
public function beamsAuth(Request $request, User $user)
{
$userID = strval($user->id);
$userIDInQueryParam = $request->input('user_id');
$beamsClient = new PushNotifications(
[
'instanceId' => config('services.pusher.beams_instance_id'),
'secretKey' => config('services.pusher.beams_secret_key'),
]
);
if ($userID != $userIDInQueryParam) {
return response('Inconsistent request', 401);
} else {
$beamsToken = $beamsClient->generateToken($userID);
return response()->json($beamsToken);
}
} //my route
Route::get('pusher/beams-auth', [NotificationsController::class, 'beamsAuth'])->name('pusher.beams-auth'); //section of front-end where I attempt authorisation
window.navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
const userId = user.value.id
// const currentUserId = userId.toString()
const beamsClient = new PusherPushNotifications.Client({
instanceId: import.meta.env.VITE_PUSHER_BEAMS_INSTANCE_ID,
serviceWorkerRegistration: serviceWorkerRegistration
})
globalBeamsClient = beamsClient
const beamsTokenProvider = new PusherPushNotifications.TokenProvider({
url: route("pusher.beams-auth"),
queryParams: {
user_id: userId,
},
})
beamsClient
.start()
.then((beamsClient) => beamsClient.setUserId(userId, beamsTokenProvider))
.catch(console.error)
})
What could be the issue? |
The error suggests your auth endpoint is returning 401. Have you verified that the auth is passing the check |
Hi @benw-pusher, thanks for your time on this matter. Implementing your approach produced this error when I click on the notification self.addEventListener('notificationclick', function (e) {
var pusher = e.notification.data.pusher;
var isPusherNotification = pusher !== undefined;
if (isPusherNotification) {
// Report analytics event, best effort
self.PusherPushNotifications.reportEvent({
eventType: 'open',
pusherMetadata: pusher.pusherMetadata
});
if (pusher.customerPayload.notification.deep_link) {
e.waitUntil(clients.openWindow(pusher.customerPayload.notification.deep_link));
}
e.notification.close();
}
}); It appears that the 'optons' variable requirement was not provided: case 8:
title = payloadFromCallback.notification.title || '';
body = payloadFromCallback.notification.body || '';
icon = payloadFromCallback.notification.icon;
options = {
body: body,
icon: icon,
data: {
pusher: {
customerPayload: payloadFromCallback,
pusherMetadata: pusherMetadata
}
}
}; This is my current SW code: // This is the "Offline copy of assets" service worker
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js')
importScripts("https://js.pusher.com/beams/service-worker.js")
const {BackgroundSyncPlugin} = workbox.backgroundSync
const {registerRoute} = workbox.routing
const {StaleWhileRevalidate} = workbox.strategies
const {ExpirationPlugin} = workbox.expiration
const CACHE = "offlineAssets"
const QUEUE_NAME = "bgSyncQueue"
self.__WB_DISABLE_DEV_LOGS = true
self.addEventListener('install', () => self.skipWaiting())
self.addEventListener('activate', () => self.clients.claim())
const bgSyncPlugin = new BackgroundSyncPlugin(QUEUE_NAME, {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
})
const expPlugin = new ExpirationPlugin({
maxEntries: 5,
maxAgeSeconds: 1 * 24 * 60 * 60,
purgeOnQuotaError: true,
matchOptions: {
ignoreVary: true,
}
})
registerRoute(
new RegExp('/*'),
new StaleWhileRevalidate({
cacheName: CACHE,
plugins: [
bgSyncPlugin,
expPlugin
]
})
)
PusherPushNotifications.onNotificationReceived = ({ payload, pushEvent, handleNotification, }) => {
const promiseChain = isClientFocused().then((clientIsFocused) => {
if (clientIsFocused) {
self.console.log(payload);
console.log("Don't need to show a notification.");
return
}
// Client isn't focused, we need to show a notification.
self.console.log(payload);
console.log("had to show a notification.");
return self.registration.showNotification(payload.notification.title, {
body: payload.notification.body,
icon: payload.notification.icon,
// actions: payload.notification.actions,
deep_link: payload.notification.deep_link
})
})
pushEvent.waitUntil(promiseChain)
}
function isClientFocused() {
return clients
.matchAll({
type: 'window',
includeUncontrolled: true,
})
.then((windowClients) => {
let clientIsFocused = false
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i]
if (windowClient.focused) {
clientIsFocused = true
break
}
}
return clientIsFocused
})
} What could I have missed or done wrong? Do I need to add some pusher related data to my payload? I also noticed that handleNotification is defined but not used, could it be a reason, what is this meant to do? |
I believe I previously shared a slightly erroneous Service Worker with you that included some other testing I was conducting at the time.
|
If I remove what you are now suggesting from the SW that means there's no longer a push notifications feature. My original issue is the the deep link feature wasn't working. Are you now saying I should import the pusher service worker file and retain my previous push notifications feature code, and that this would sort the deep link issue? See your original suggestion below:
|
Testing this further, I updated my SW push feature to just this: PusherPushNotifications.onNotificationReceived = ({ payload, pushEvent }) => {
pushEvent.waitUntil(self.registration.showNotification(payload.notification.title, {
body: payload.notification.body,
icon: payload.notification.icon,
data: payload.data,
deep_link: payload.notification.deep_link
}))
} I add this segment that I didn't previously have |
Does the deep_link show correctly if you log it out? The format of your onNotificationReceived is still different to the documented mechanism at https://pusher.com/docs/beams/guides/handle-incoming-notifications/web/#adding-additional-custom-logic,-keeping-default-behavior |
Yes it does. How so? Looks the same to me. |
You are calling the showNotification method and not the handleNotification method that is documented. |
Doesn't this https://pusher.com/docs/beams/guides/handle-incoming-notifications/web/#overriding-default-sdk-behavior use showNotification |
I need help with a web push notifications setup that works except that it only relays the message body.
I have this job that sends a push:
I get the push but only the message body is sent. I get this dev console:
How do I resolve this?
The text was updated successfully, but these errors were encountered: