mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add webmanifest and notification handler in service worker

Browse Source
This commit is contained in:
m5r 2021-08-04 02:53:10 +08:00
parent d93f6fd5d5
commit 1f80ce4114
6 changed files with 113 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/pages/_document.tsx
View File

@ -1,4 +1,4 @@
import { Document, Html, DocumentHead, Main, BlitzScript /*DocumentContext*/ } from "blitz";
import { Document, Html, DocumentHead, Main, BlitzScript, Head /*DocumentContext*/ } from "blitz";
class MyDocument extends Document {
// Only uncomment if you need to customize this behaviour
@ -11,6 +11,19 @@ class MyDocument extends Document {
return (
<Html lang="en">
<DocumentHead />
<Head>
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Shellphone" />
<meta name="apple-mobile-web-app-title" content="Shellphone" />
<meta name="theme-color" content="#663399" />
<meta name="msapplication-navbutton-color" content="#663399" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="msapplication-starturl" content="/" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</Head>
<body>
<Main />
<BlitzScript />

22
app/pages/_offline.tsx Normal file
View File

@ -0,0 +1,22 @@
import { useRouter } from "blitz";
import Layout from "../core/layouts/layout";
export default function Offline() {
const router = useRouter();
return (
<Layout title="App went offline">
<h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
Oops, looks like you went offline.
</h2>
<p className="mt-2 text-center text-lg leading-5 text-gray-600">
Once you&apos;re back online,{" "}
<button className="inline-flex space-x-2 items-center text-left" onClick={router.reload}>
<span className="transition-colors duration-150 border-b border-primary-200 hover:border-primary-500">
reload the page
</span>
</button>
</p>
</Layout>
);
}

23
public/manifest.webmanifest Normal file
View File

@ -0,0 +1,23 @@
{
"name": "Shellphone: Your Personal Virtual Phone",
"short_name": "Shellphone",
"lang": "en-US",
"start_url": "/",
"scope": "/",
"shortcuts": [
{
"name": "Shellphone Messages",
"short_name": "Messages",
"url": "/messages"
},
{
"name": "Shellphone Calls",
"short_name": "Calls",
"url": "/calls"
}
],
"display": "standalone",
"orientation": "portrait",
"theme_color": "#663399",
"background_color": "#F9FAFB"
}

2
tsconfig.json
View File

@ -1,7 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"lib": ["dom", "dom.iterable", "esnext", "webworker"],
"baseUrl": "./",
"allowJs": true,
"skipLibCheck": true,

40
worker/index.js
View File

@ -1,40 +0,0 @@
"use strict";
self.addEventListener("push", function (event) {
console.log("event.data.text()", event.data.text());
const data = JSON.parse(event.data.text());
event.waitUntil(
registration.showNotification(data.title, {
body: data.message,
icon: "/icons/android-chrome-192x192.png",
}),
);
});
self.addEventListener("notificationclick", function (event) {
event.notification.close();
event.waitUntil(
clients.matchAll({ type: "window", includeUncontrolled: true }).then(function (clientList) {
if (clientList.length > 0) {
let client = clientList[0];
for (let i = 0; i < clientList.length; i++) {
if (clientList[i].focused) {
client = clientList[i];
}
}
return client.focus();
}
return clients.openWindow("/");
}),
);
});
// self.addEventListener('pushsubscriptionchange', function(event) {
// event.waitUntil(
// Promise.all([
// Promise.resolve(event.oldSubscription ? deleteSubscription(event.oldSubscription) : true),
// Promise.resolve(event.newSubscription ? event.newSubscription : subscribePush(registration))
// .then(function(sub) { return saveSubscription(sub) })
// ])
// )
// })

53
worker/notifications.ts Normal file
View File

@ -0,0 +1,53 @@
import { Routes } from "blitz";
const worker = self as unknown as ServiceWorkerGlobalScope & typeof globalThis;
worker.addEventListener("push", function (event) {
if (!event.data) {
return;
}
console.log("event.data.text()", event.data.text());
const data = JSON.parse(event.data.text());
event.waitUntil(
worker.registration.showNotification(data.title, {
body: data.message,
icon: "/icons/android-chrome-192x192.png",
actions: [
{ title: "Open", action: "open" },
{ title: "Mark as read", action: "mark-as-read" },
],
}),
);
});
worker.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(
worker.clients.matchAll({ type: "window", includeUncontrolled: true }).then((clientList) => {
if (!event.notification.data) {
return;
}
switch (event.action) {
case "mark-as-read":
// TODO
return;
case "open":
default: {
const data = JSON.parse(event.notification.data.text());
const route = Routes.ConversationPage({ recipient: data.recipient });
const url = `${route.pathname}${route.query}`;
if (clientList.length > 0) {
const client = clientList.find((client) => client.focused) ?? clientList[0]!;
client.navigate(url);
return client.focus();
}
return worker.clients.openWindow(url);
}
}
}),
);
});