feat(notifications): add notifications on tweet add

Author: leflon

.env.example

@@ -23,4 +23,9 @@ CLIENT_ID=
 MEDIA_ROOT=
 
 # Port HTTP de l'app. :3000 par défaut.
-PORT=
+PORT=
+
+# VAPID informations for Web Push
+PUBLIC_VAPID_KEY=
+PRIVATE_VAPID_KEY=
+VAPID_EMAIL=

db_init.sql

@@ -58,6 +58,11 @@ CREATE TABLE `Recover` (
   `created_at` DATETIME NOT NULL,
   PRIMARY KEY (`token`));
 
+CREATE TABLE `Subscription`(
+  `user_id` CHAR(16) NOT NULL,
+  `subscription` json NOT NULL
+);
+
 CREATE TABLE `Id` (
   `id` CHAR(16) NOT NULL,
   `created_at` DATETIME NOT NULL,

package.json

@@ -22,7 +22,8 @@
 		"multer": "^1.4.4",
 		"mysql2": "^2.3.3",
 		"nodemailer": "^6.7.2",
-		"pug": "^3.0.2"
+		"pug": "^3.0.2",
+		"web-push": "^3.6.7"
 	},
 	"devDependencies": {
 		"nodemon": "^2.0.15"

public/css/Menu.css

@@ -9,6 +9,7 @@
 
 .main-menu-button {
 	display: flex;
+	align-items: center;
 	padding: 12px;
 	border-radius: 30px;
 	text-decoration: none;
@@ -54,4 +55,80 @@
 		z-index: 998;
 		padding: 5px 0;
 	}
+}
+
+#main-menu #allow-push {
+	display:  none; 
+	& div {
+	font-size: 10pt;
+	}
+	&.visible { display: flex;}
+}
+
+#notification-container {
+	display: none;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	backdrop-filter: blur(10px);
+	background: #0004;
+	justify-content: center;
+	align-items: center;
+	z-index: 9999;
+	&.visible {display: flex;}
+}
+
+#notification-popup {
+	position: relative;
+	box-sizing: border-box;
+	width: 300px;
+	max-width: 90vw;
+	padding: 20px;
+	border-radius: 10px;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	background-color: var(--bg-blue);
+	box-shadow: 0px 20px 20px #0005;
+	& #beta-banner {
+		position: absolute;
+		background: red;
+		padding: 5px 13px;
+		border-radius: 5px;
+		top: 5px;
+		right: -15px;
+		transform: rotate(45deg);
+		font: 10pt 'Montserrat';
+	}
+	& i {
+		font-size: 30pt;
+		margin: 10px 0;
+	}
+	& #notification-title {
+		font: 700 14pt 'Montserrat';
+		margin: 10px 0;
+	}
+
+	& #notification-buttons {
+		width: 100%;
+		margin: 20px 0;
+		& div {
+			cursor: pointer;
+			margin: 10px 0;
+			border-radius: 10em;
+			padding: 5px 10px;
+			border: 1px solid var(--lighter-grey);
+			font: 800 12pt 'Montserrat';
+			transition: .1s ease;
+			&#accept {
+				background: var(--main-blue);
+				border: none;
+			}
+			&#decline:hover {
+				background: #fff1;
+			}
+		}
+	}
 }

public/css/main.css

@@ -5,7 +5,7 @@
 	--main-white: #fafafa;
 	--light-grey: #38444d;
 	--lighter-grey: #616d75;
-	--bg-blue: #151b29;
+	--bg-blue: #151b29;	
 }
 
 html, body {

public/icon512_maskable.png

@@ -10,4 +10,83 @@ document.addEventListener('keydown', ({key}) => {
 		input = [];
 	}
 
-});
+});
+
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker.register('/sw.js', {
+	  scope: '/',
+	});
+}
+
+const urlBase64ToUint8Array = (base64String) => {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding)
+	.replace(/\-/g, '+')
+	.replace(/_/g, '/');
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+	outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+};
+
+window.subscribe = async () => {
+	if (!('serviceWorker' in navigator)) return;
+	
+	const registration = await navigator.serviceWorker.ready;
+  if (await registration.pushManager.getSubscription() !== null)
+	return;
+	
+	const subscription = await registration.pushManager.subscribe({
+		userVisibleOnly: true,
+		applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID),
+	});
+	
+  await fetch('/api/subscription', {
+	method: 'POST',
+	body: JSON.stringify(subscription),
+	headers: {
+	  'content-type': 'application/json',
+	},
+  });
+}
+
+
+const notifsAccept = document.querySelector('#notification-popup #accept');
+const notifsDecline = document.querySelector('#notification-popup #decline');
+const notifsContainer = document.querySelector('#notification-container');
+const menuNotifs = document.querySelector('#main-menu #allow-push');
+notifsDecline.addEventListener('click', () => {
+	notifsContainer.remove();
+	localStorage.setItem('PUSH_WAS_PROMPTED', 'true');
+	menuNotifs.classList.add('visible');
+});
+notifsAccept.addEventListener('click',async () => {
+	subscribe();
+	notifsContainer.remove();
+	localStorage.setItem('PUSH_WAS_PROMPTED', 'true');
+});
+menuNotifs.addEventListener('click', async () => {
+	subscribe();
+	menuNotifs.remove();
+});
+
+(async () => {
+
+	const registration = await navigator.serviceWorker.ready;
+	const pushAllowed = await registration.pushManager.getSubscription() !== null;
+	const wasPrompted = localStorage.getItem('PUSH_WAS_PROMPTED') === 'true';
+
+	if (!wasPrompted && !pushAllowed) {
+		notifsContainer.classList.add('visible');
+	} else {
+		notifsContainer.remove();
+		if (!pushAllowed) {
+			menuNotifs.classList.add('visible');
+		}
+	}
+})();
+

public/icon512_rounded.png

@@ -0,0 +1,26 @@
+{
+	"theme_color": "#151b29",
+	"background_color": "#1e9bf0",
+	"icons": [
+		{
+			"purpose": "maskable",
+			"sizes": "512x512",
+			"src": "icon512_maskable.png",
+			"type": "image/png"
+		},
+		{
+			"purpose": "any",
+			"sizes": "512x512",
+			"src": "icon512_rounded.png",
+			"type": "image/png"
+		}
+	],
+	"orientation": "portrait",
+	"display": "standalone",
+	"dir": "auto",
+	"lang": "fr-FR",
+	"name": "Twitter",
+	"short_name": "Twitter",
+	"start_url": "https://twitter.paulleflon.fr",
+	"scope": "https://twitter.paulleflon.fr/"
+}

public/js/main.js

@@ -6,6 +6,8 @@ const path = require('path');
 const Logger = require('./lib/misc/Logger');
 const app = express();
 const upload = multer({dest: './uploads'});
+const webpushConfig = require('./web-push');
+const webpush = require('web-push');
 
 // Middleware
 app.use(cookieParser(process.env.COOKIE_SECRET));
@@ -24,6 +26,22 @@ app.db = require('./lib/db/Database');
 app.use('/', require('./routes/index'));
 app.use('/', require('./routes/wall'));
 app.use('/api', require('./routes/api'));
+app.get('/sw.js', (req, res) => {
+	res.sendFile('./sw.js', {root: path.join(__dirname)});
+});
+
+app.get('/test', async (req, res) => {
+	const [subs] = await req.app.db.connection.query('SELECT subscription FROM Subscription');
+	const notification = {title: 'NOTIFICATION'};
+	const notifs = [];
+	console.log(subs);
+	for (const sub of subs) {
+		notifs.push(webpush.sendNotification(sub.subscription, JSON.stringify(notification)));
+	}
+	await Promise.all(notifs).catch((err) => console.log(err));
+	res.sendStatus(201);
+});
+webpushConfig();
 
 app.db.connect().then(() => {
 	app.log.info('Connecté à la base de données.');

public/manifest.json

@@ -5,7 +5,8 @@ module.exports = async function(req, res, next) {
 	if (req.path.startsWith('/public') ||
 		req.path.startsWith('/register') ||
 		req.path.startsWith('/renew-password') ||
-		req.path.startsWith('/recover'))
+		req.path.startsWith('/recover') ||
+		req.path.startsWith('/test'))
 		return next();
 
 	// Redirige vers l'accueil si l'utilisateur est connecté.

src/app.js

@@ -3,7 +3,7 @@ module.exports = async function(req, res, next) {
 	const nativeRender = res.render;
 	res.render = (view, data) => {
 		// La fonction render classique requiert l'objet `res` comme objet `this`.
-		nativeRender.call(res, view, {...data, user: req.user});
+		nativeRender.call(res, view, {...data, user: req.user, vapidPublic: process.env.PUBLIC_VAPID_KEY});
 	};
 	next();
 };

src/middleware/auth.js

@@ -2,6 +2,7 @@ const {Router} = require('express');
 const {join} = require('path');
 const multer = require('multer');
 const upload = multer({dest: 'uploads/'});
+const webpush = require('web-push');
 
 const router = Router();
 
@@ -42,6 +43,24 @@ router.post('/tweets/add', upload.single('image'), async (req, res) => {
 		parentTweet.replies.push(tweet.id);
 		await parentTweet.save();
 	}
+
+	const {followers} = req.user;
+	console.log(req.user);
+	if (followers) {
+		const [subs] = await req.app.db.connection.query('SELECT subscription FROM Subscription WHERE user_id IN (?)', [followers]);
+		console.log(subs);
+		const notification = {
+			title: `Nouveau tweet de ${(req.user.displayName || '@' + req.user.username)}`,
+			body: content,
+			icon: process.env.APP_URL + `/public/${req.user.avatarId || 'default_avatar'}.jpg`,
+			image: process.env.APP_URL + `/public/${imageId}.jpg`,
+			url: process.env.APP_URL + `/tweet/${tweet.id}`
+		};
+		for (const sub of subs) {
+			webpush.sendNotification(sub.subscription, JSON.stringify(notification)).catch(console.error);
+		}
+	}
+
 	return res.redirect(`/tweet/${tweet.id}`);
 });
 
@@ -236,4 +255,10 @@ router.get('/unfollow/:id', async (req, res) => {
 	return res.send({unfollowed: true});
 });
 
+router.post('/subscription', async (req, res) => {
+	const subscription = req.body;
+	await req.app.db.connection.query('INSERT INTO Subscription VALUES (?, ?)', [req.user.id, JSON.stringify(subscription)]);
+	res.sendStatus(201);
+});
+
 module.exports = router;

src/middleware/render.js

@@ -0,0 +1,49 @@
+const staticCacheName = 'twitter.paulleflon.fr';
+
+self.addEventListener('push', (e) => {
+	const data = e.data.json();
+	console.log(e);
+	self.registration.showNotification(data.title, {
+		body: data.body,
+		icon: data.icon,
+		image: data.image,
+		data: {
+			url: data.url
+		}
+	});
+});
+
+self.addEventListener('notificationclick', e => {
+	console.log(e);
+	e.notification.close();
+	e.waitUntil(clients.matchAll({type: 'window', includeUncontrolled: true}).then(clientList => {
+		for (const client of clientList) {
+			if (client.url === e.notification.data.url && 'focus' in client) {
+				return client.focus();
+			}
+		}
+		if (clients.openWindow) {
+			return clients.openWindow(e.notification.data.url);
+		}
+	}));
+});
+
+self.addEventListener('install', function(event) {
+	event.waitUntil(
+		caches.open(staticCacheName)
+		.then(function(cache) {
+			return cache.addAll([
+				'/',
+			]);
+		})
+	);
+});
+
+self.addEventListener('fetch', function(event) {
+	event.respondWith(
+		caches.match(event.request)
+			.then(function(response) {
+			return response || fetch(event.request);
+		})
+	);
+});