1

I am trying to setup push notifications using the django-push-notifications, I have copied most of the code from the example. I have a button that calls the enablePushNotifications() function:

export function enablePushNotifications() {
    console.log("enabling push notifications...");
    if (!'serviceWorker' in navigator){
        console.log("Push notifications not supported");
        return;
    }
    navigator.serviceWorker.ready.then(
        (registration)=>{
            registration.pushManager.subscribe({
                userVisibleOnly: true
            }).then(
                (sub)=>{
                    console.log(sub);
                    let endpointParts = sub.endpoint.split("/");
                    let registration_id = endpointParts[endpointParts.length - 1];
                    let data = {
                        'browser': loadVersionBrowser(navigator.userAgent).name.toUpperCase(),
                        'p256dh': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('p256dh')))),
                        'auth': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('auth')))),
                        'registration_id': registration_id,
                        'endpoint': sub.endpoint,
                    };
                    request(
                        "/api/subscribe",
                        data
                    )
                }
            ).catch(
                (error)=>console.error(error)
            )
        }
    )
}

When I open the networking tab I don't see anything strange about the passed properties or headers. Specifically the browser value is correct. The implementation for the /api/subscribe URL is as follows:

import push_notifications.models as pushmodels
def registerPush(request):
    data = requestFormatting.get_data(
        request
    )

    device = pushmodels.WebPushDevice(
        name=request.user.username,
        active=True,
        user=request.user,
        registration_id=data["registration_id"],
        p256dh=data["p256dh"],
        auth=data["auth"],
        browser=data["browser"]
    )

    device.save()

    device.send_message("hello")

Calling this function raises a PushError: Push failed: 401 Unauthorized. I have tested on both chrome and firefox, both give the same error. I specify my FCM_API_KEY in settings, nothing else. I do not currently use VAPID, though I plan to in the future. I have tried various variations of the code, but nothing seems to work. The documentation is unclear on how to actually initialize devices, and I only picked a WebPushDevice objects since it seems to contain similar attributes as the data provided in the example.

This is my first time trying to use web push, so a little help would be much appreciated!

mousetail
  • 7,009
  • 4
  • 25
  • 45
  • Did you success implement `Web Push Notification`? – joe May 20 '19 at 08:07
  • 1
    Yes, turns out there where two different problems on chrome and Firefox. Firefox uses a separate URL for unsecured connections, white the django-push-notifications assumed the secured endpoint. Chrome had a entirely different issue. If you don't explicitly specify a vapid code in chrome it will try to read a firebase app id from your manifest. My manifest had a app id specified as a blank string which caused a more vague error message. Both problems where solved by just giving in and registering for a vapid id. – mousetail May 20 '19 at 11:54
  • Sounds good. At least you can implement it. May I request some help from you? https://stackoverflow.com/questions/56217113/how-to-implement-web-client-with-django-push-notifications – joe May 20 '19 at 12:18

0 Answers0