Update the MoEngage web SDK initialization script on your website to configure and integrate Web Push.
For more information, refer to Web SDK Integration.
Ensure that you configure the web push settings.
You can configure the HTTPS for the web SDK integration by loading the serviceworker.js file.
Service worker Scope
The scope of the service worker determines which files the service worker controls, in other words, from which path the service worker will intercept requests. The default scope is the location of the service worker file, and extends to all directories below. So if service-worker.js is located in the root directory, the service worker will control requests from all files at this domain.
You can also set an arbitrary scope by passing in an additional parameter when initializing.
For example:
<script type="text/javascript">
(function(i,s,o,g,r,a,m,n){i.moengage_object=r;t={};q=function(f){return function(){(i.moengage_q=i.moengage_q||[]).push({f:f,a:arguments})}};f=['track_event','add_user_attribute','add_first_name','add_last_name','add_email','add_mobile','add_user_name','add_gender','add_birthday','destroy_session','add_unique_user_id','moe_events','call_web_push','track','location_type_attribute'],h={onsite:["getData"]};for(k in f){t[f[k]]=q(f[k])}a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);i.moe=i.moe||function(){n=arguments[0];return t};a.onload=function(){if(n){i[r]=moe(n)}}})(window,document,'script','https://cdn.moengage.com/webpush/moe_webSdk.min.latest.js','Moengage')
Moengage = moe({
app_id:"APP ID",
debug_logs: 0,
swPath: "/a/your-custom-sw.js"
});
</script>
In this case, we are setting the scope of the service worker to /a/
, which means the service worker will control requests from pages like /a/
, /a/lower/
and /a/lower/lower
, but not from pages like /a
or /
, which are higher.
ServiceWorker.js file restrictions
- The serviceworker.js file is available in the root directory, if not Web Push will not work on all the pages.
- Ensure that the service worker file is exactly named serviceworker.js.
Get the serviceworker.js file
NOTETo integrate HTTPS Web Push with the Web SDK, ensure that the serviceworker.js file is hosted in the |
Choose any one of the following options for the serviceworker.js file:
Download the MoEngage Serviceworker.js
`
Right-click and download the serviceworker.js to save the file.
Use an existing Serviceworker.js
If you have an existing serviceworker.js file, then update the serviceworker.js file by adding the following code to the top of your file.
// Add this line to the top of the file
importScripts("https://cdn.moengage.com/webpush/releases/serviceworker_cdn.min.latest.js");
...
IMPORTANTEnsure that you do not have the implementation of Push Notification of your own or any other vendor in your serviceworker.js file. |
Rename Service worker custom filename
If you wish to change the serviceworker.js file name depending on the browser or environment, use the following initialization block:
<script type="text/javascript">
(function(i,s,o,g,r,a,m,n){i.moengage_object=r;t={};q=function(f){return function(){(i.moengage_q=i.moengage_q||[]).push({f:f,a:arguments})}};f=['track_event','add_user_attribute','add_first_name','add_last_name','add_email','add_mobile','add_user_name','add_gender','add_birthday','destroy_session','add_unique_user_id','moe_events','call_web_push','track','location_type_attribute'],h={onsite:["getData"]};for(k in f){t[f[k]]=q(f[k])}a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);i.moe=i.moe||function(){n=arguments[0];return t};a.onload=function(){if(n){i[r]=moe(n)}}})(window,document,'script','https://cdn.moengage.com/webpush/moe_webSdk.min.latest.js','Moengage')
Moengage = moe({
app_id:"APP ID",
debug_logs: 0,
swPath: "/your-custom-sw.js"
});
</script>
CAUTIONPush Notification or serviceworker.js will not work if you do not ensure the additional attribute swPath: "/your-custom-sw.js is included in the serviceworker.js file. The path informs the SDK about the custom serviceworker filename you want to use. |
For more information, refer to Sample Code.
Troubleshooting
Registration Error
If you get the error Error in Subscription: DOMException: Registration failed - storage error, then you are unregistering the serviceworker.js somewhere from your code. Search for unregister()
in your codebase and remove it.
Push Notification or serviceworker.js not working
Follow these steps:
- Ensure to add the MoEngage serviceworker code into your serviceworker.js file.
- Ensure to add
swPath
with the path of the serviceworker.js file while initializing the MoEngage script.
I am not getting Chrome Push Notification on my Mac?
If your Chrome is in full screen on Mac OS, you will not be able to see any Chrome Push notifications. This is a known issue with Chrome full screen on Mac OS and we will update you when it is fixed by Chrome/Apple.
How do I test Web Push Notifications?
Many times before creating a Web Push campaign, you may wish to see how the push message actually appears. To do the testing use the Device Push Token in Campaign Creation -> Scheduling & Goals tab -> Test Campaign section. To find your Device Push Token for your website on the Chrome browser, follow these steps:
- Go to your website where you have given the push permission.
- Right Click --> Inspect
- Click on the Application tab.
- On the left pane under Storage, click on Local Storage
- Under Local Storage, click on your HTTPS Website URL or HTTPS Subdomain (https://yourwebsite.moengage.com) for your HTTP Website
- You will find a Key MOE_DATA. Look for the
PUSH_TOKEN
field. Kindly copy the corresponding Value and paste it under Test Campaign Section -> Device Push Token.
Or you can install the MoEngage Chrome Extension to see it easily. For more information, refer to MoEngage Chrome Extension.
On clicking Push Notifications on Firefox Android, it did not redirect me to Firefox browser?
This is an anomaly observed in Firefox for Android. If the notification was supposed to redirect you to http://example.com
Case 1:
Firefox is open when the notification is clicked, you are redirected normally.
Case 2:
Firefox is in the background when the notification is clicked (You’re on the home screen or on some other application):
Nothing seems to happen when you click the notification. But, you are actually redirected in the background. So when you open firefox next, you’ll be on http://example.com.
We have raised this issue with Firefox support and are waiting to hear back from them.
Reach out to us directly from your MoEngage Dashbaord -> Need Help? -> Contact Support or send an email to support@moengage.com.