the Rising - JSDC 2019

※ HTML Structure:

<amp-web-push
  id="amp-web-push"
  layout="nodisplay"
  helper-iframe-url="web-push-helper.html"
  permission-dialog-url="web-push-dialog.html"
  service-worker-url="service-worker.js"
></amp-web-push>


<div class="switch-notification-wrap">

  <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="42" height="28">
    <a class="switch-notification" on="tap:amp-web-push.subscribe"></a>
  </amp-web-push-widget>

  <amp-web-push-widget visibility="subscribed" layout="fixed" width="42" height="28">
    <a class="switch-notification" on="tap:amp-web-push.unsubscribe"></a>
  </amp-web-push-widget>

  <amp-web-push-widget visibility="blocked" layout="fixed" width="42" height="28">
    <a class="switch-notification blocked"></a>
  </amp-web-push-widget>

</div>



※ service-worker.js:

...
...
...

function updateSubscriptionOnServer(subscription) {
  let url, data;

  url = conf.uri.updateSubscription;
  data = subscription || {};

  if (subscription) {
    console.log('subscription:', JSON.stringify(subscription));
  }

  fetch(url, {
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data),
    cache: 'no-cache',
    credentials: 'include',
    method: 'POST',
    mode: 'cors',
  })
  .catch(
    (err) => console.log('updateSubscription fail.')
  );
}


function sendBeacon({ ea = '', el = '' }) {
  const beacon = {
    v: 1,
    t: 'event',
    tid: 'UA-74300583-2',
    cid: '9fcb3f85-d792-41fa-b7a4-b6214e2d8ddc',
    dp: '/',
    ec: 'notification',
    ea,
    el
  };

  const query = Object.keys(beacon).reduce(
    (acc, cur) => {
      return acc.concat(`${encodeURIComponent(cur)}=${encodeURIComponent(beacon[cur])}`);
    }
  , []).join('&');

  const url = `https://www.google-analytics.com/collect?${query}`;

  fetch(url, {
    cache: 'no-cache',
    method: 'GET'
  })
  .catch(
    (err) => console.log('sendBeacon fail.')
  );
}


self.addEventListener('push', event => {
  const data = {
    ...event.data.json()
  };

  const options = {
      body: data.content,
      icon: data.icon,
      badge: data.badge,
      vibrate: [100, 50, 100],
      data: {
        dateOfArrival: Date.now(),
        primaryKey: 1,
        link: data.link,
        id: data.id
      }
  };

  event.waitUntil(
      (() => {
        sendBeacon({ ea:'viewd', el:data.id });
        self.registration.showNotification(data.title, options);
      })()
  );
});


self.addEventListener('notificationclick', event => {
  const { data } = event.notification;

  event.notification.close();

  event.waitUntil(
    (() => {
      sendBeacon({ ea:'clicked', el:data.id });
      clients.openWindow(data.link);
    })()
  );
});