feature: web manifest generation

This commit is contained in:
Jean-Baptiste Pasquier 2020-08-24 14:50:22 +02:00
parent 4e9d58452f
commit 97aecd039f
13 changed files with 129 additions and 12 deletions

View File

@ -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/",

View File

@ -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/",

39
make-webmanifest.mjs Normal file
View File

@ -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}`);

View File

@ -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:jscomponents": "babel 'src/components/*.js' --out-dir dist/components/",
"build:html": "pug src/index.pug -o dist/ --obj config.json",
"build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
"build:jscomponents": "babel \"src/components/*.js\" --out-dir dist/components/",
"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/",

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

View File

@ -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

View File

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

View File

@ -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();
});
}

View File

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

View File

@ -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 => {

View File

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

66
src/sw.js Normal file
View File

@ -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);
// })
// );
// });