Services Plugins FAQs

Need help : push notifications set up problem

Help Needed
#1

Hello guys , I really need help , I set up the push notifications plugin step by step with the video instructions, generate keys and create data logs and requests for web push notifications is successful, but to the final step , send a notification, I pressed the button , but no notifications was sent, I struggled for 3 hours , I checked the file , metatags and keys are all correct, but I don’t know where the problem is , I really need help please

#2

Hey @alvinc0828 ,
Thank you for contacting us.

Let’s go through some important checks and recommendations to help you troubleshoot the issue:

General Recommendations:

  1. URL Formatting:
    Ensure the URL field is correctly formatted, especially if your app uses dynamic parameters. Test both:
  • Full URLs (e.g., https://yourapp.com/version-test/page)
  • Relative paths (e.g., /page?param=value)This helps identify if one method works better in your setup.
  1. Service Worker Code:
    Check if the url parameter is being passed correctly to the notificationclick event. Add this debug line to your code:
console.log("Notification clicked, URL:", url);

This will help confirm whether the url is recognized when the notification is clicked.
3. Show Notification Options:
Verify that the data field is properly set in showNotification, as it’s critical for the url parameter in the click event:

self.registration.showNotification(res_obj.title, {
    body: res_obj.body,
    icon: res_obj.icon,
    badge: res_obj.badge,
    image: res_obj.image,
    vibrate: res_obj.vibrate,
    data: { url: res_obj.url } // Add this line
});
  • User-Shared Insight: One of our users resolved a similar issue by ensuring the data portion in self.registration.showNotification was included. Make sure this is implemented correctly in your service worker file.
  1. Meta Tags and Manifest File:
  • Manifest Syntax Error: If you’re getting a syntax error for the <link rel="manifest" href="manifest.json"> line in your meta tags, try adding crossorigin="use-credentials" to clear the error:
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">

This adjustment worked for other users.
5. Manifest and Service Worker Scope:
Ensure the manifest.json file includes the correct scope (e.g., "scope": "/"). If the scope is incorrect, the service worker might not control certain pages, affecting URL handling.
You can confirm the service worker registration in the Application > Service Workers section of your browser’s developer tools.
6. Testing in Different Environments:
Push notifications and service workers can behave differently in various environments. Try testing your setup in a regular browser as well as in a PWA to see if there’s any difference.

  1. Reference Material:

Best Regards,
Anton

Support Team

Browse all Zeroqode Plugins for Bubble

Banner_Last3