How to set a cookie using JavaScript after requesting an API request in the GCM Service Worker?

Question

I have successfully implemented GCM and ServiceWorkers to receive push notifications.

My problem

Whenever there is an SOS update, I send the gcm-http HTTP request , which then shows a regular notification in Google Chrome but without any payload or data.

According to Google Developers Docs , chrome cannot receive payload / data, so you need to manually extract the notification from the backend when a push event is triggered.

So, to get the data, I request the URL of my backend (in django) to send me notification data. But the problem lies here , how do I know what notification data should I send from my database / model?

Note. - I do not support the other database table/modelfor determining the notifications read by the client, since its SOS update and read / unread are not required.

Workaround that doesn't work: -

I can set a cookie in the client’s browser, and on the backend I can receive the following notification (below is the code)

class GetSOSNotification(View):
    notif_id = 0

    def get(self, request):
        if 'last_notif_id' in request.COOKIES:
            notif_id = request.COOKIES.get('last_notif_id') + 1
            sos = SOSUpdate.objects.get(id=notif_id)
        else:
            sos = SOSUpdate.objects.order_by('-timestamp').filter()[0]
            notif_id = sos.id

        data = dict()
        data['notification'] = dict()
        if sos.get_condition_display() and sos.get_subject_display():
            data['notification']['title'] = sos.polling_station.name + " " + sos.get_subject_display() + " " + sos.get_condition_display()
        elif sos.get_condition_display():
            data['notification']['title'] = sos.polling_station.name + " " + sos.get_condition_display()
        elif sos.get_subject_display():
            data['notification']['title'] = sos.polling_station.name + " " + sos.get_subject_display()
        else:
            data['notification']['title'] = sos.polling_station.name + " SOS Alert!"

        if sos.message:
            data['notification']['message'] = sos.message
        else:
            data['notification']['message'] = "Please click here to check the details."

        data['notification']['notif_id'] = notif_id

        return JsonResponse(data)

but I have to return a JSON response, and there I can’t set the cookie on the server side, so I planned to use data['notification']['notif_id']the client side (i.e. Javascript) to set the cookie.

SW.js :

self.addEventListener('push', function(event) {
  console.log('Push message', event);
  event.waitUntil(
    fetch("//localhost/get_sos_notification/").then(function(response){
        if(response.status!=200){
            console.log('Looks like there was a problem. Status Code: ' + response.status);
            throw new Error();
        }
        return response.json().then(function(data){
            if(data.error || !data.notification){
                console.error('The API returned an error.', data.error);
                throw new Error();
            }
            var title = data.notification.title;
            var message = data.notification.message;
            var icon = '//localhost/static/main/images/push-notification.png';
            var notificationTag = data.notification.tag;
            return self.registration.showNotification(title, {
              body: message,
              icon: icon,
              tag: notificationTag
            });
        });
    }).catch(function(err){
       console.log('Unable to retrieve data', err);
       var title = 'SOS - Update';
       var message = 'We were unable to get the information, please click here to know the real message.';
       var icon = '//localhost/static/main/images/push-notification.png';
       var notificationTag = 'notification-error';
       return self.registration.showNotification(title, {
           body: message,
           icon: icon,
           tag: notificationTag
       });
    })
  );
});

document.cookie = last_notif_id=data.notification.notif_id , ( ), JS script Unable to retrieve data ReferenceError: document is not defined at http://localhost/static/main/js/sw.js

: //localhost/get_sos_notification/ - GET, JSON class GetSOSNotification(View)

googled SO, .

.