firebase test

Author: dwightjack

.eleventy.js

@@ -71,6 +71,8 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPassthroughCopy({ 'static/*.*': '.' });
 
+  eleventyConfig.addWatchTarget('./src/_js/');
+
   eleventyConfig.addDataExtension('yaml', (contents) =>
     yaml.safeLoad(contents),
   );

src/.eslintrc

@@ -2,7 +2,11 @@
   "root": true,
   "extends": ["eslint:recommended", "plugin:prettier/recommended"],
   "env": {
-    "browser": true
+    "browser": true,
+    "es6": true
+  },
+  "globals": {
+    "process": true
   },
   "parserOptions": {
     "ecmaVersion": 2020,
@@ -14,5 +18,13 @@
     "block-scoped-var": "error",
     "consistent-return": "error",
     "eqeqeq": "error"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*-worker.js"],
+      "env": {
+        "serviceworker": true
+      }
+    }
+  ]
 }

src/_data/env.js

@@ -0,0 +1,4 @@
+/* eslint-env node */
+module.exports = {
+  PRODUCTION: process.env.ELEVENTY_ENV === 'production',
+};

src/_includes/footer.njk

@@ -66,23 +66,4 @@
       </div>
     </div>
   </div>
-</footer>
-<script type="module">
-  const toggler = document.querySelector('.navbar-toggle');
-  if (toggler) {
-    const target = document.querySelector(toggler.dataset.target)
-    toggler.addEventListener('click', (e) => {
-      e.preventDefault();
-      const opened = !toggler.classList.contains('collapsed')
-      toggler.classList[opened ? 'add' : 'remove']('collapsed')
-      toggler.setAttribute('aria-expanded', String(!opened))
-      target.classList[opened ? 'remove' : 'add']('in')
-      if (opened) {
-      }
-    })
-  }
-
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/service-worker.js');
-  }
-</script>
+</footer>

src/_includes/head.njk

@@ -103,6 +103,9 @@
 {%- if isHome %}
     <script  defer src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
 {%- endif %}
+<script defer src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
+<script defer src="https://www.gstatic.com/firebasejs/8.2.3/firebase-messaging.js"></script>
+<script type="module" src="/js/main.js"></script>
 <!-- Google Analytics -->
 <script>
     (function (i, s, o, g, r, a, m) {

src/_includes/header.njk

@@ -1,5 +1,10 @@
 <!-- Header Start -->
 <header>
+  <div id="notification-bar" class="alert alert-warning" hidden>
+    <button type="button" class="btn btn-link">Resta aggiornato sui prossimi eventi del FEVR!</button>
+    <button type="button" class="close" aria-label="Chiudi"><span aria-hidden="true">&times;</span></button>
+  </div>
+  <div id="token"></div>
   <div class="container">
     <div class="row">
       <div class="col-md-12">

src/_js/main.js

@@ -0,0 +1,96 @@
+/* global firebase */
+import { FIREBASE_CONFIG, VAPID_KEY } from './modules/constants';
+
+const toggler = document.querySelector('.navbar-toggle');
+
+if (toggler) {
+  const target = document.querySelector(toggler.dataset.target);
+  toggler.addEventListener('click', (e) => {
+    e.preventDefault();
+    const opened = !toggler.classList.contains('collapsed');
+    toggler.classList[opened ? 'add' : 'remove']('collapsed');
+    toggler.setAttribute('aria-expanded', String(!opened));
+    target.classList[opened ? 'remove' : 'add']('in');
+  });
+}
+
+async function subscribe(sw) {
+  const result = await Notification.requestPermission();
+
+  if (result !== 'granted' || !window.firebase) {
+    return;
+  }
+  // Initialize Firebase
+
+  firebase.initializeApp(FIREBASE_CONFIG);
+
+  const messaging = firebase.messaging();
+
+  try {
+    const token = await messaging.getToken({
+      serviceWorkerRegistration: sw,
+      vapidKey: VAPID_KEY,
+    });
+    if (!token) {
+      return;
+    }
+
+    console.log(token);
+    document.getElementById('token').textContent = token;
+  } catch (err) {
+    console.error('An error occurred while retrieving token. ', err);
+  }
+
+  messaging.onMessage((payload) => {
+    console.log('Message received. ', payload);
+  });
+}
+
+// async function notify() {
+//   const result = await Notification.requestPermission();
+//   if (result !== 'granted') {
+//     return;
+//   }
+//   const body = 'hello';
+//   const icon = '/apple-touch-icon.png';
+//   new Notification('Hello!', {
+//     body,
+//     icon,
+//   });
+// }
+
+function registerNotifier(sw) {
+  const hideNotificationBar =
+    localStorage.getItem('notificationBar') === 'hide';
+  if (!hideNotificationBar) {
+    const bar = document.getElementById('notification-bar');
+
+    const closeBar = () => {
+      bar.hidden = true;
+      localStorage.setItem('notificationBar', 'hide');
+    };
+
+    bar.hidden = false;
+    bar.querySelector('button.close').addEventListener('click', closeBar);
+
+    bar.querySelector('.btn.btn-link').addEventListener('click', async () => {
+      const result = await Notification.requestPermission();
+      closeBar();
+      if (result === 'granted') {
+        subscribe(sw);
+      }
+    });
+  } else {
+    subscribe(sw);
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+      .register('/service-worker.js')
+      .then(registerNotifier);
+  }
+} else {
+  registerNotifier();
+}

src/_js/modules/constants.js

@@ -0,0 +1,11 @@
+export const FIREBASE_CONFIG = {
+  apiKey: 'AIzaSyCHymmnW5dxfaUYpvQFNus3e_PR7bSzHIY',
+  authDomain: 'fevr-push-server-45f58.firebaseapp.com',
+  projectId: 'fevr-push-server-45f58',
+  storageBucket: 'fevr-push-server-45f58.appspot.com',
+  messagingSenderId: '428334462537',
+  appId: '1:428334462537:web:458a7acdd08d453e51b198',
+};
+
+export const VAPID_KEY =
+  'BOZgaux-lAoD6nky7pDTWKeo5jaPgJ3KBfK1t7pfCr3lEJ0mmSElOiTiAzoyk3WC_QManXh4mFl7xuJdGj1QNbs';

src/_js/modules/message-worker.js

@@ -0,0 +1,62 @@
+/* global firebase */
+import { FIREBASE_CONFIG } from './constants';
+importScripts('https://www.gstatic.com/firebasejs/5.5.2/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/5.5.2/firebase-messaging.js');
+
+firebase.initializeApp({
+  messagingSenderId: FIREBASE_CONFIG.messagingSenderId,
+});
+
+const messaging = firebase.messaging();
+
+/*
+ * We need a generic class to hold data and methods, that inherit from Event
+ */
+class CustomPushEvent extends Event {
+  constructor(data) {
+    super('push');
+
+    Object.assign(this, data);
+    this.custom = true;
+  }
+}
+
+/*
+ * Overrides push notification data, to avoid having 'notification' key and firebase blocking
+ * the message handler from being called
+ */
+self.addEventListener('push', (e) => {
+  // Skip if event is our own custom event
+  if (e.custom) return;
+
+  // Kep old event data to override
+  let oldData = e.data;
+
+  // Create a new event to dispatch
+  let newEvent = new CustomPushEvent({
+    data: {
+      json() {
+        let newData = oldData.json();
+        newData._notification = newData.notification;
+        delete newData.notification;
+        return newData;
+      },
+    },
+
+    waitUntil: e.waitUntil.bind(e),
+  });
+
+  // Stop event propagation
+  e.stopImmediatePropagation();
+
+  // Dispatch the new wrapped event
+  dispatchEvent(newEvent);
+});
+
+messaging.setBackgroundMessageHandler(({ data }) => {
+  const notificationOptions = {
+    body: data.body,
+    icon: '/apple-touch-icon.png',
+  };
+  return self.registration.showNotification(data.title, notificationOptions);
+});

src/_js/service-worker.js

@@ -1,8 +1,8 @@
-/* eslint-disable no-undef */
-const cacheName = 'fevr-v2-cache';
 import { registerRoute } from 'workbox-routing';
 import { StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies';
+import './modules/message-worker';
 
+const cacheName = 'fevr-v2-cache';
 const listRegExp = /^\/(index\.html|eventi\/index\.html)/;
 
 registerRoute(