Web notification API not working locally

Question

I'm trying to recreate the page shown in this tutorial.

The code is as following:

if (!('Notification' in window)) {
    document.getElementById('wn-unsupported').classList.remove('hidden');
    document.getElementById('button-wn-show-preset').setAttribute('disabled', 'disabled');
    document.getElementById('button-wn-show-custom').setAttribute('disabled', 'disabled');
} else {
    var log = document.getElementById('log');
    var notificationEvents = ['onclick', 'onshow', 'onerror', 'onclose'];

    function notifyUser(event) {
        var title;
        var options;

        event.preventDefault();

        if (event.target.id === 'button-wn-show-preset') {
            title = 'Email received';
            options = {
                body: 'You have a total of 3 unread emails',
                tag: 'preset',
                icon: 'http://www.audero.it/favicon.ico'
            };
        } else {
            title = document.getElementById('title').value;
            options = {
                body: document.getElementById('body').value,
                tag: 'custom'
            };
        }

        Notification.requestPermission(function () {
            var notification = new Notification(title, options);

            notificationEvents.forEach(function (eventName) {
                notification[eventName] = function (event) {
                    
                    log.innerHTML = 'Event "' + event.type + '" triggered for notification "' + notification.tag + '"<br />' + log.innerHTML;
                };
            });
        });
    }

    document.getElementById('button-wn-show-preset').addEventListener('click', notifyUser);
    document.getElementById('button-wn-show-custom').addEventListener('click', notifyUser);
    document.getElementById('clear-log').addEventListener('click', function () {
        log.innerHTML = '';
    });
}

      *
      {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      body
      {
        max-width: 500px;
        margin: 2em auto;
        padding: 0 0.5em;
        font-size: 20px;
      }

      h1
      {
        text-align: center;
      }

      .hidden
      {
        display: none;
      }

      #custom-notification
      {
        margin-top: 1em;
      }

      label
      {
        display: block;
      }

      input[name="title"],
      textarea
      {
        width: 100%;
      }

      input[name="title"]
      {
        height: 2em;
      }

      textarea
      {
        height: 5em;
      }

      .buttons-wrapper
      {
        text-align: center;
      }

      .button-demo
      {
        padding: 0.5em;
        margin: 1em;
      }

      #log
      {
        height: 200px;
        width: 100%;
        overflow-y: scroll;
        border: 1px solid #333333;
        line-height: 1.3em;
      }

      .author
      {
        display: block;
        margin-top: 1em;
      }

<h1>Web Notifications API</h1>
    <span id="wn-unsupported" class="hidden">API not supported</span>

    <form id="custom-notification" action="">
      <label for="title">Title:</label>
      <input type="text" id="title" name="title" />

      <label for="body">Body:</label>
      <textarea id="body" name="body"></textarea>

      <div class="buttons-wrapper">
        <button id="button-wn-show-preset" class="button-demo">Show Preset Notification</button>
        <input type="submit" id="button-wn-show-custom" class="button-demo" value="Show Custom Notification" />
      </div>
    </form>

    <h3>Log</h3>
    <div id="log"></div>
    <button id="clear-log" class="button-demo">Clear log</button>

Which seems to be working fine in the live demo linked on the site.

However, it's not working if I run the same code locally. Instead of a notification, I get log message that the error event has been triggered. I observe the the same behavior in the snippet above.

Does this something to do with web notification API, or am I doing something wrong. Please help.

Btw, I'm using the latest version of Chrome (60.0.x) for both cases.