HTTPS Integration

This article is in continuation of Web Push integration series. The first article can be accessed here.

1. Select HTTPS domain type

Select HTTPS domain type while setting up Web Push and click on SAVE.

2.A. Download the required files

For HTTPS Web Push to work, you need to host serviceworker file in the root directory of your web server.
serviceworker.js (Right Click and Save)

2.B. Use your existing serviceworker file

In case you already have your own serviceworker file, you can update them to support MoEngage Web Push.

  • serviceworker.js
// Add this line to the top of the file

importScripts("https://cdn.moengage.com/webpush/releases/serviceworker_cdn.min.latest.js");

...

❗️

Make sure you do not have the implementation of Push Notification of your own or any other vendor in your serviceworker file.

4. Integrate the SDK

Add the following code to the tag in your html.

<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","registerCallback"]};for(k in f){t[f[k]]=q(f[k])}for(k in h)for(l in h[k]){null==t[k]&&(t[k]={}),t[k][h[k][l]]=q(k+"."+h[k][l])}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", // Replace "APP ID" with the actual app ID you get from the Dashboard
    debug_logs: 0
  });
</script>

❗️

Service Worker file restrictions

Please note that the service worker file is exactly named serviceworker.js and is hosted at the root.

If you wish to customize the filename, please refer this

The file needs to be hosted at root otherwise Web Push will not work in all the pages

Now, open your website to see the push permission opt-in and click on "Allow" button.