~emersion/gamja

e324638ae895aa409c84063c20b36065953bc78e — Simon Ser 3 years ago 9f0177d webpush
wip: add support for WEBPUSH
3 files changed, 64 insertions(+), 0 deletions(-)

M components/app.js
M index.html
A service-worker.js
M components/app.js => components/app.js +56 -0
@@ 114,6 114,21 @@ function showNotification(title, options) {
	}
}

function urlBase64ToUint8Array(base64String) {
	var padding = '='.repeat((4 - base64String.length % 4) % 4);
	var base64 = (base64String + padding)
		.replace(/\-/g, '+')
		.replace(/_/g, '/');

	var rawData = window.atob(base64);
	var outputArray = new Uint8Array(rawData.length);

	for (var i = 0; i < rawData.length; ++i) {
		outputArray[i] = rawData.charCodeAt(i);
	}
	return outputArray;
}

export default class App extends Component {
	state = {
		connectParams: {


@@ 508,6 523,47 @@ export default class App extends Component {
			this.setServerState(serverID, { status: client.status });
			if (client.status === Client.Status.REGISTERED) {
				this.setState({ connectForm: false });

				navigator.serviceWorker.ready.then((registration) => {
					return registration.pushManager.getSubscription()
					.then((subscription) => {
						if (subscription) {
							return subscription;
						}
						var msg = {
							command: "WEBPUSH",
							params: ["VAPIDPUBKEY"],
						};
						return client.roundtrip(msg, (event) => {
							var msg = event.detail.message;

							switch (msg.command) {
							case "WEBPUSH":
								if (msg.params[0] === "VAPIDPUBKEY") {
									return urlBase64ToUint8Array(msg.params[1]);
								}
								break;
							case "FAIL":
								if (msg.params[0] === "WEBPUSH") {
									throw msg;
								}
								break;
							}
						}).then((vapidPubKey) => {
							return registration.pushManager.subscribe({
								userVisibleOnly: true,
								applicationServerKey: vapidPubKey,
							});
						});
					}).then((subscription) => {
						var data = subscription.toJSON();
						var keysStr = irc.formatTags(data.keys);
						client.send({
							command: "WEBPUSH",
							params: ["REGISTER", data.endpoint, keysStr],
						});
					});
				});
			}
		});


M index.html => index.html +2 -0
@@ 15,6 15,8 @@
			import { html, render } from "./lib/index.js";
			import App from "./components/app.js";

			navigator.serviceWorker.register("./service-worker.js");

			render(html`<${App}/>`, document.body);
		</script>
	</body>

A service-worker.js => service-worker.js +6 -0
@@ 0,0 1,6 @@
self.addEventListener("push", (event) => {
	var payload = event.data ? event.data.text() : "no payload";
	event.waitUntil(self.registration.showNotification("gamja service worker", {
		body: payload,
	}));
});