feature: web manifest generation

config.sample.federated.json

@@ -1,6 +1,8 @@
 {
   "xmpp": "https://jabber.happy-dev.fr/http-bind/",
   "authority": "http://localhost:8000/",
+  "clientName": "Hubl",
+  "clientLogo": "https://cdn.startinblox.com/logos/hubl-logo.png",
   "endpoints": {
     "get": {
       "skills": "http://localhost:8000/skills/",

config.sample.json

@@ -2,6 +2,8 @@
   "xmpp": "https://jabber.happy-dev.fr/http-bind/",
   "authority": "http://localhost:8000/",
   "authorityName": "djangoldp-server-name",
+  "clientName": "Hubl",
+  "clientLogo": "https://cdn.startinblox.com/logos/hubl-logo.png",
   "endpoints": {
     "groups": "http://localhost:8000/groups/",
     "skills": "http://localhost:8000/skills/",

make-webmanifest.mjs

@@ -0,0 +1,39 @@
+'use strict';
+import fs from 'fs';
+
+if(!fs.existsSync("config.json")) throw "[Error] (Mandatory) Missing config.json file";
+
+let config = JSON.parse(fs.readFileSync('config.json'));
+
+if(!config.clientName) throw "[Error] (Mandatory) Missing clientName on config.json";
+if(!config.clientLogo) throw "[Error] (Mandatory) Missing clientLogo on config.json";
+
+let manifest = {
+  "lang": "fr",
+  "dir": "ltr",
+  "name": config.clientName,
+  "description": `Hubl of ${config.clientName}`,
+  "short_name": config.clientName,
+  "icons": [{
+    "src": config.clientLogo,
+    "purpose": "any"
+  }, {
+    "src": "/images/hubl-icon-192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }, {
+    "src": "/images/hubl-icon-512.png",
+    "sizes": "512x512",
+    "type": "image/png"
+  }],
+  "start_url": ".",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  'theme_color': "white"
+}
+
+fs.existsSync("dist") || fs.mkdirSync("dist");
+fs.writeFileSync('dist/manifest.webmanifest', JSON.stringify(manifest, null, 2));
+
+console.log(`Created manifest for ${config.clientName}`);

package.json

@@ -9,13 +9,15 @@
   "scripts": {
     "build": "run-p copy:* build:*",
     "build:css": "node-sass src/styles/index.scss -o dist/styles/",
-    "build:js": "babel 'src/scripts/*.js' -o dist/scripts/index.js",
+    "build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
-    "build:jscomponents": "babel 'src/components/*.js' --out-dir dist/components/",
+    "build:jscomponents": "babel \"src/components/*.js\" --out-dir dist/components/",
-    "build:html": "pug src/index.pug -o dist/ --obj config.json",
+    "build:pug": "pug src/index.pug -o dist/ --obj config.json",
+    "build:manifest": "node --experimental-modules make-webmanifest.mjs",
     "copy:font": "copyfiles -f src/fonts/* dist/fonts",
     "copy:image": "copyfiles -f src/images/* dist/images",
+    "copy:sw": "copyfiles -f src/sw.js dist",
     "serve": "pushstate-server -d ./dist -p 3000",
-    "watch": "run-p copy:* watch:* serve",
+    "watch": "run-p copy:* build:manifest watch:* serve",
     "watch:css": "npm run build:css && npm run build:css -- -w",
     "watch:js": "babel --watch \"src/scripts/*.js\" -o dist/scripts/index.js",
     "watch:jscomponents": "babel --watch \"src/components/*.js\" --out-dir dist/components/",

src/index.pug

@@ -13,6 +13,7 @@ html(lang="en")
     include dependencies.pug
     if clientCSS
       link(rel='stylesheet', href=`${clientCSS}`)
+    link(rel="manifest" href="/manifest.webmanifest")
   body
 
     .wrapper

src/scripts/login-element-visibility.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
   document
     .querySelector("sib-auth")
     .getUser()

src/scripts/navigate-event.js

@@ -27,10 +27,10 @@ function closeUserControls() {
     );
   }
 
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener("DOMContentLoaded", function() {
   
     //- View change event
-    window.addEventListener("navigate", event => {
+    window.addEventListener("navigate", () => {
       closeLeftMenu();
       closeUserControls();
     });
@@ -63,7 +63,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
       }
     };
 
-    document.querySelector("#toggleMainMenu").addEventListener("click", event => {
+    document.querySelector("#toggleMainMenu").addEventListener("click", () => {
       let leftMenu = document.querySelector("#main__menu");
       if (leftMenu.hasAttribute("open")) {
         closeLeftMenu();
@@ -75,7 +75,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
     rightMenus.forEach(rightMenu => {
       const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-      btnRightMenu.addEventListener("click", e => {
+      btnRightMenu.addEventListener("click", () => {
         if (rightMenu.hasAttribute("open")) {
           closeRightMenu();
         } else {
@@ -86,7 +86,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
     Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
       el => {
-        el.addEventListener("click", event => {
+        el.addEventListener("click", () => {
           openRightMenu();
         });
       }

src/scripts/register-sw.js

@@ -0,0 +1,5 @@
+document.addEventListener("DOMContentLoaded", function () {
+  if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js');
+  }
+});

src/scripts/unreads-menu.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
   window.addEventListener('newMessage', event => {
     let jid = event.detail.jid;
     Array.from(document.querySelectorAll('[data-jabberID="'+jid+'"]')).forEach(el => {

src/scripts/widget-extension.js

@@ -44,7 +44,7 @@ function recursiveAdaptWidgets(prefix, element, user) {
   });
 }
 
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
   document
     .querySelector("sib-auth")
     .getUser()

src/sw.js

@@ -0,0 +1,66 @@
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches.open('hubl-store').then(function (cache) {
+      return cache.addAll([
+        '/components/hubl-reactivity.js',
+        '/components/hubl-search-users.js',
+        '/components/hubl-status.js',
+        '/fonts/custom-icons.eot',
+        '/fonts/custom-icons.svg',
+        '/fonts/custom-icons.ttf',
+        '/fonts/custom-icons.woff',
+        '/fonts/FacitBold.eot',
+        '/fonts/FacitBold.svg',
+        '/fonts/FacitBold.ttf',
+        '/fonts/FacitBold.woff',
+        '/fonts/FacitRegular.eot',
+        '/fonts/FacitRegular.svg',
+        '/fonts/FacitRegular.ttf',
+        '/fonts/FacitRegular.woff',
+        '/fonts/material-design-icons.eot',
+        '/fonts/material-design-icons.svg',
+        '/fonts/material-design-icons.ttf',
+        '/fonts/material-design-icons.woff',
+        '/fonts/material-design-icons.woff2',
+        '/fonts/RefrigeratorDelxW01Bold.eot',
+        '/fonts/RefrigeratorDelxW01Bold.svg',
+        '/fonts/RefrigeratorDelxW01Bold.ttf',
+        '/fonts/RefrigeratorDelxW01Bold.woff',
+        '/fonts/simple-line-icons.eot',
+        '/fonts/simple-line-icons.svg',
+        '/fonts/simple-line-icons.ttf',
+        '/fonts/simple-line-icons.woff',
+        '/fonts/simple-line-icons.woff2',
+        '/images/add-user.svg',
+        '/images/alien.svg',
+        '/images/arrow-down.svg',
+        '/images/calendar.svg',
+        '/images/chevron-down.png',
+        '/images/favicon.png',
+        '/images/hubl-icon-192.png',
+        '/images/hubl-icon-512.png',
+        '/images/logo.png',
+        '/scripts/index.js',
+        '/syles/index.css',
+        '/index.html',
+        '/'
+      ]);
+    })
+  );
+});
+
+//TODO: Can't use fetch because of unpkg, e.request is missing a part of the package name "@startinblox/core" become "@startinblox"
+// self.addEventListener('fetch', function (e) {
+  // Handle direct loading /xyz/ when server is unjoinable
+  // if (e.request.mode === 'navigate') {
+  //   e.respondWith(caches.match('/'));
+  //   return;
+  // }
+  // e.respondWith(
+  //   fetch(e.request, {
+  //     credentials: 'include'
+  //   }).catch(function() {
+  //     return caches.match(e.request);
+  //   })
+  // );
+// });