Include backend, split into versions

wortwart · Mar 26, 2018 · 292a316 · 292a316
1 parent f6bf5cb
commit 292a316
Show file tree

Hide file tree

Showing 27 changed files with 540 additions and 133 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1 @@
-google/
-private.key
+priv*
diff --git a/README.md b/README.md
@@ -1,6 +1,13 @@
 # push-notifications
 Frontend code for subscribing to and receiving push notifications in the browser
 
-**Demo project for [c't Magazin](https://ct.de/) in March 2018**
+**Demo project for [c't Magazin](https://ct.de/) in April 2018**
 
-This code borrows from [Google's web push code lab](https://developers.google.com/web/fundamentals/codelabs/push-notifications/) and uses the [Push companion](https://web-push-codelab.glitch.me/) as backend.
+This shows several phases of building an own web push client.
+
+- Phase 1: show notifications
+- Phase 2: register a service worker
+- Phase 3: send messages from dev tools
+- Phase 4: send messages from [Push companion](https://web-push-codelab.glitch.me/)
+- Phase 5: build your own subscription service based on PHP/MySQL and send messages from the command shell using [web-push](https://github.com/web-push-libs/web-push). The included bash script creates a key pair and requires a shell with OpenSSL, dd, and tr (can be installed in Windows with [Cygwin](https://www.cygwin.com/))
+- Phase 6: create a more elegant solution (not included)
diff --git a/common/bild.jpg b/common/bild.jpg
diff --git a/ct.png → common/ct.png b/ct.png → common/ct.png
diff --git a/common/less-ugly.css b/common/less-ugly.css
@@ -0,0 +1,50 @@
+body {
+	font-family: Verdana, Arial, sans-serif;
+	width: 50em;
+	margin: auto;
+	text-align: center;
+}
+
+label {
+	display: inline-block;
+	margin-bottom: 1em;
+	text-align: left;
+}
+
+label > input, button {
+	margin: .25em 0 1em;
+}
+
+input, button {
+	padding: .5em;
+	line-height: 1.5em;
+	font-size: large;
+}
+
+input, output, button {
+	display: block;
+	margin: 1em auto;
+}
+
+input:not([type="submit"]), output {
+	display: block;
+	width: 50em;
+	text-align: left;
+	font-family: monospace;
+	font-size: 11px;
+}
+
+output {
+	max-width: 80em;
+	padding: 2em;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	background-color: #ccc;
+}
+
+button {
+	width: 20em;
+	margin: 3em auto;
+	padding: .5em;
+	font-size: large;
+}
diff --git a/less-ugly.css b/less-ugly.css
diff --git a/push.js b/push.js
diff --git a/v0 - notification only/index.html b/v0 - notification only/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8">
+		<meta name="author" content="Herbert Braun">
+		<title>Einfache Benachrichtigungen</title>
+		<link rel="stylesheet" href="../common/less-ugly.css">
+		<script src="notification.js" defer></script>
+	</head>
+	<body>
+		<h1>Einfache Benachrichtigungen</h1>
+		<form action="#">
+			<textarea></textarea>
+			<button>Benachrichtigung senden</button>
+		</form>
+	</body>
+</html>
diff --git a/v0 - notification only/notification.js b/v0 - notification only/notification.js
@@ -0,0 +1,30 @@
+document.querySelector('button').addEventListener('click', ev => {
+	ev.preventDefault();
+	if (!('Notification' in window)) {
+		throw new Error('Der Browser unterstützt keine Benachrichtigungen.');
+		return;
+	}
+	const ask = Notification.requestPermission(permission => {
+		if (permission !== 'granted') {
+			alert('Keine Erlaubnis zum Anzeigen von Benachrichtigungen!');
+			return;
+		}
+		const txt = document.querySelector('textarea').value;
+		if (txt.match(/^\W*$/)) {
+			alert('Bitte geben Sie Text ein.');
+			return;
+		}
+		setTimeout(() => {
+			const msg = new Notification('Dummy-Nachricht', {
+				body: txt,
+				lang: 'de',
+				icon: '../common/ct.png',
+				image: '../common/bild.jpg'
+			});
+			msg.onclick = ev => alert('Sie haben die Nachricht angeklickt!');
+			msg.onerror = err => console.error(err);
+			msg.onshow = ev => console.info(ev);
+			msg.onclose = ev => console.info(ev);
+		}, 1000);
+	});
+});
diff --git a/index.html → v1 - serviceworker/index.html b/index.html → v1 - serviceworker/index.html
@@ -4,18 +4,18 @@
 		<meta charset="utf-8">
 		<meta name="author" content="Herbert Braun">
 		<title>Push-Benachrichtigungen</title>
-		<link rel="stylesheet" href="less-ugly.css">
+		<link rel="stylesheet" href="../common/less-ugly.css">
 		<script src="push.js" defer></script>
 	</head>
 	<body>
 		<h1>Push-Benachrichtigungen</h1>
 		<form action="#">
 			<label>
 				Public Key:
-				<input type="text" id="pubkey" value="">
+				<input type="text">
 			</label>
-			<button id="button" disabled>Push-Nachrichten nicht möglich</button>
-			<output id="pushAuth"></output>
+			<button disabled>Push-Nachrichten nicht möglich</button>
+			<output></output>
 		</form>
 	</body>
 </html>
diff --git a/v1 - serviceworker/push.js b/v1 - serviceworker/push.js
@@ -0,0 +1,25 @@
+'use strict';
+const btnTexts = [
+  'Abonnieren',
+  'Abo beenden'
+];
+const btn = document.querySelector('button');
+let worker = null;
+let isSubscribed = false;
+if ('PushManager' in window) {
+  navigator.serviceWorker.register('worker.js')
+  .then(reg => {
+    worker = reg;
+    btn.disabled = false;
+    worker.pushManager.getSubscription()
+    .then(subscription => {
+      if (subscription === null) {
+        btn.textContent = btnTexts[0];
+      } else {
+        isSubscribed = true;
+        btn.textContent = btnTexts[1];
+      }
+    });
+  })
+  .catch(err => console.error(err));
+}
diff --git a/v1 - serviceworker/worker.js b/v1 - serviceworker/worker.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/v2 - push from devtools/index.html b/v2 - push from devtools/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8">
+		<meta name="author" content="Herbert Braun">
+		<title>Push-Benachrichtigungen</title>
+		<link rel="stylesheet" href="../common/less-ugly.css">
+		<script src="push.js" defer></script>
+	</head>
+	<body>
+		<h1>Push-Benachrichtigungen</h1>
+		<form action="#">
+			<label>
+				Public Key:
+				<input type="text">
+			</label>
+			<button disabled>Push-Nachrichten nicht möglich</button>
+			<output></output>
+		</form>
+	</body>
+</html>
diff --git a/v2 - push from devtools/push.js b/v2 - push from devtools/push.js
@@ -0,0 +1,25 @@
+'use strict';
+const btnTexts = [
+  'Abonnieren',
+  'Abo beenden'
+];
+const btn = document.querySelector('button');
+let worker = null;
+let isSubscribed = false;
+if ('PushManager' in window) {
+  navigator.serviceWorker.register('worker.js')
+  .then(reg => {
+    worker = reg;
+    btn.disabled = false;
+    worker.pushManager.getSubscription()
+    .then(subscription => {
+      if (subscription === null) {
+        btn.textContent = btnTexts[0];
+      } else {
+        isSubscribed = true;
+        btn.textContent = btnTexts[1];
+      }
+    });
+  })
+  .catch(err => console.error(err));
+}
diff --git a/v2 - push from devtools/worker.js b/v2 - push from devtools/worker.js
@@ -0,0 +1,8 @@
+'use strict';
+self.addEventListener('push', ev => {
+  const title = 'Nachricht für dich!';
+  let text = 'Text ...';
+  if (ev.data !== null)
+    text = ev.data.text();
+  ev.waitUntil(self.registration.showNotification(title, {body: text}));
+});
diff --git a/v3 - push from push companion/index.html b/v3 - push from push companion/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8">
+		<meta name="author" content="Herbert Braun">
+		<title>Push-Benachrichtigungen</title>
+		<link rel="stylesheet" href="../common/less-ugly.css">
+		<script src="push.js" defer></script>
+	</head>
+	<body>
+		<h1>Push-Benachrichtigungen</h1>
+		<form action="#">
+			<label>
+				Public Key:
+				<input type="text">
+			</label>
+			<button disabled>Push-Nachrichten nicht möglich</button>
+			<output></output>
+		</form>
+	</body>
+</html>
diff --git a/v3 - push from push companion/push-companion.url b/v3 - push from push companion/push-companion.url
@@ -0,0 +1,5 @@
+[{000214A0-0000-0000-C000-000000000046}]
+Prop3=19,11
+[InternetShortcut]
+IDList=
+URL=https://web-push-codelab.glitch.me/