basic pwa setup

This commit is contained in:
Felix Roos
2023-02-06 20:57:34 +01:00
parent 10580a0bec
commit fd09dff381
16 changed files with 1678 additions and 72 deletions
+12
View File
@@ -1,4 +1,5 @@
---
import { pwaInfo } from 'virtual:pwa-info';
import '../styles/index.css';
const { BASE_URL } = import.meta.env;
@@ -12,7 +13,18 @@ const base = BASE_URL;
<link rel="icon" type="image/svg+xml" href="favicon.ico" />
<meta
name="description"
content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript."
/>
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icons/apple-icon-180.png" sizes="180x180" />
<meta name="theme-color" content="#222222" />
<base href={base} />
<!-- Scrollable a11y code helper -->
<script src="./make-scrollable-code-focusable.js" is:inline></script>
<script src="/src/pwa.ts"></script>
{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
+2
View File
@@ -1 +1,3 @@
/// <reference types="astro/client" />
/// <reference types="vite-plugin-pwa/info" />
/// <reference types="vite-plugin-pwa/client" />
+1 -1
View File
@@ -22,7 +22,7 @@ const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.mdx`;
const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
---
<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en'} class="initial">
<head>
<HeadCommon />
<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
+1 -1
View File
@@ -3,7 +3,7 @@ import HeadCommon from '../components/HeadCommon.astro';
import { Repl } from '../repl/Repl.jsx';
---
<html>
<html lang="en">
<head>
<HeadCommon />
<title>Strudel REPL</title>
+11
View File
@@ -0,0 +1,11 @@
import { registerSW } from 'virtual:pwa-register'
registerSW({
immediate: true,
onRegisteredSW(swScriptUrl) {
// console.log('SW registered: ', swScriptUrl)
},
onOfflineReady() {
// console.log('PWA application ready to work offline')
},
})
+1 -1
View File
@@ -76,7 +76,7 @@ export function Footer({ context }) {
<FooterTab name="reference" />
</div>
{activeFooter !== '' && (
<button onClick={() => setActiveFooter('')} className="text-white">
<button onClick={() => setActiveFooter('')} className="text-white" aria-label="Close Panel">
<XMarkIcon className="w-5 h-5" />
</button>
)}