Set up Django push notification for web only

Question

I want to set up push notification for a website. I just followed as described in documentation, but unfortunately it is now working.

Here are my settings:

PUSH_NOTIFICATIONS_SETTINGS = {
    "WP_PRIVATE_KEY": BASE_DIR / 'private_key.perm',
    "WP_CLAIMS": {'sub': "mailto: development@example.com"}
}

And here is my client-side code. I just copy this code from documentation.

.....
<h1>Push Notification Example</h1>
<script>
...............
...........

  var applicationServerKey = "....";
  // In your ready listener
  if ('serviceWorker' in navigator) {
    // The service worker has to store in the root of the app
    // http://stackoverflow.com/questions/29874068/navigator-serviceworker-is-never-ready
    var browser = loadVersionBrowser('chrome');
    navigator.serviceWorker.register('navigatorPush.service.js?version=1.0.0').then(function (reg) {
      reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(applicationServerKey)
      }).then(function (sub) {
        var endpointParts = sub.endpoint.split('/');
        var registration_id = endpointParts[endpointParts.length - 1];
        var data = {
          'browser': browser.name.toUpperCase(),
          'p256dh': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('p256dh')))),
          'auth': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('auth')))),
          'name': 'XXXXX',
          'registration_id': registration_id
        };
        console.log(data);
      })
    }).catch(function (err) {
      console.log(':^(', err);
    });
  }

And here are the error snippets.

What am I missing?