mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions 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
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>
);
}