vite-pwa · userquin · Feb 17, 2024 · Feb 17, 2024
diff --git a/README.md b/README.md
@@ -42,6 +42,7 @@ Zero-config PWA Integration for Astro
 - 🐞 **Development Support**: debug your custom service worker logic as you develop your application
 - 🛠️ **Versatile**: integration with meta frameworks: [îles](https://github.com/ElMassimo/iles), [SvelteKit](https://github.com/sveltejs/kit), [VitePress](https://github.com/vuejs/vitepress), [Astro](https://github.com/withastro/astro), and [Nuxt 3](https://github.com/nuxt/nuxt)
 - 💥 **PWA Assets Generator**: generate all the PWA assets from a single command and a single source image
+- 🚀 **PWA Assets Integration**: serving, generating and injecting PWA Assets on the fly in your application
 
 
 ## 📦 Install

diff --git a/examples/pwa-simple-assets-generator/astro.config.mjs b/examples/pwa-simple-assets-generator/astro.config.mjs
@@ -0,0 +1,40 @@
+import { defineConfig } from 'astro/config'
+import AstroPWA from '@vite-pwa/astro'
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    logLevel: 'info',
+    define: {
+      __DATE__: `'${new Date().toISOString()}'`,
+    },
+  },
+  integrations: [
+    AstroPWA({
+      mode: 'development',
+      base: '/',
+      scope: '/',
+      includeAssets: ['favicon.svg'],
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Astro PWA',
+        short_name: 'Astro PWA',
+        theme_color: '#ffffff',
+      },
+      pwaAssets: {
+        config: true,
+      },
+      workbox: {
+        navigateFallback: '/',
+        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}'],
+      },
+      devOptions: {
+        enabled: false,
+        navigateFallbackAllowlist: [/^\//],
+      },
+      experimental: {
+        directoryAndTrailingSlashHandler: true,
+      }
+    }),
+  ],
+})
diff --git a/examples/pwa-simple-assets-generator/package.json b/examples/pwa-simple-assets-generator/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "pwa-simple-assets-generator",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "devDependencies": {
+    "@vite-pwa/astro": "workspace:*",
+    "astro": "^4.0.1",
+    "workbox-window": "^7.0.0"
+  }
+}
diff --git a/examples/pwa-simple-assets-generator/pnpm-workspace.yaml b/examples/pwa-simple-assets-generator/pnpm-workspace.yaml
diff --git a/examples/pwa-simple-assets-generator/public/favicon.svg b/examples/pwa-simple-assets-generator/public/favicon.svg
diff --git a/examples/pwa-simple-assets-generator/public/robots.txt b/examples/pwa-simple-assets-generator/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/pwa-simple-assets-generator/pwa-assets.config.ts b/examples/pwa-simple-assets-generator/pwa-assets.config.ts
@@ -0,0 +1,25 @@
+import {
+  createAppleSplashScreens,
+  defineConfig,
+  minimal2023Preset,
+} from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: '2023',
+  },
+  preset: {
+    ...minimal2023Preset,
+    appleSplashScreens: createAppleSplashScreens({
+      padding: 0.3,
+      resizeOptions: { fit: 'contain', background: 'white' },
+      darkResizeOptions: { fit: 'contain', background: 'black' },
+      linkMediaOptions: {
+        log: true,
+        addMediaScreen: true,
+        xhtml: true,
+      },
+    }, ['iPad Air 9.7"']),
+  },
+  images: 'public/favicon.svg',
+})
diff --git a/examples/pwa-simple-assets-generator/src/env.d.ts b/examples/pwa-simple-assets-generator/src/env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="astro/client" />
+/// <reference types="vite-plugin-pwa/info" />
+/// <reference types="vite-plugin-pwa/vanillajs" />
diff --git a/examples/pwa-simple-assets-generator/src/layouts/DefaultLayout.astro b/examples/pwa-simple-assets-generator/src/layouts/DefaultLayout.astro
@@ -0,0 +1,43 @@
+---
+import { pwaInfo } from 'virtual:pwa-info';
+import { pwaAssetsHead } from 'virtual:pwa-assets/head';
+
+export interface Props {
+	title: string;
+}
+
+// replaced dynamically
+const buildDate = __DATE__;
+
+const { title } = Astro.props as Props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{title}</title>
+    <meta name="description" content={title}>
+    { pwaAssetsHead.themeColor && <meta name="theme-color" content={pwaAssetsHead.themeColor.content} /> }
+    { pwaAssetsHead.links.map(link => (
+        <link {...link} />
+    )) }
+    { pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
+    <script src="/src/pwa.ts"></script>
+    <style>
+      main, footer {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+        <article>
+            <slot />
+        </article>
+    </main>
+    <footer>
+        Built at: { buildDate }
+    </footer>
+  </body>
+</html>
diff --git a/examples/pwa-simple-assets-generator/src/pages/404.astro b/examples/pwa-simple-assets-generator/src/pages/404.astro
@@ -0,0 +1,8 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro';
+---
+<DefaultLayout title="Astro PWA">
+    <h1>Page not found</h1>
+    <h1>Upps, something is wrong, the requested page not found!</h1>
+    <a href="/">Back home</a>
+</DefaultLayout>
diff --git a/examples/pwa-simple-assets-generator/src/pages/about.astro b/examples/pwa-simple-assets-generator/src/pages/about.astro
@@ -0,0 +1,7 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro';
+---
+<DefaultLayout title="About - Astro PWA">
+    <h1>About - <a href="https://astro.build/">Astro</a> PWA!</h1>
+    <a href="/">Go Home</a>
+</DefaultLayout>
diff --git a/examples/pwa-simple-assets-generator/src/pages/index.astro b/examples/pwa-simple-assets-generator/src/pages/index.astro
@@ -0,0 +1,13 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro';
+---
+<DefaultLayout title="Astro PWA">
+    <h1>Welcome to <a href="https://astro.build/">Astro</a> PWA</h1>
+    <a href="/about">Go /about</a>
+    <br/>
+    <a href="/about/">Go /about/</a>
+    <br/>
+    <a href="/test">Go to /test</a>
+    <br/>
+    <a href="/test/">Go to /test/</a>
+</DefaultLayout>
diff --git a/examples/pwa-simple-assets-generator/src/pages/test/about.astro b/examples/pwa-simple-assets-generator/src/pages/test/about.astro
@@ -0,0 +1,9 @@
+---
+import DefaultLayout from '../../layouts/DefaultLayout.astro';
+---
+<DefaultLayout title="About Test Astro PWA">
+    <h1>Welcome to <a href="https://astro.build/">Astro</a> PWA</h1>
+    <a href="/test">Go /test</a>
+    <br/>
+    <a href="/test/">Go /test/</a>
+</DefaultLayout>
diff --git a/examples/pwa-simple-assets-generator/src/pages/test/index.astro b/examples/pwa-simple-assets-generator/src/pages/test/index.astro
@@ -0,0 +1,11 @@
+---
+import DefaultLayout from '../../layouts/DefaultLayout.astro';
+---
+<DefaultLayout title="Test Astro PWA">
+    <h1>Welcome to <a href="https://astro.build/">Astro</a> PWA</h1>
+    <a href="/test/about">Go to /test/about</a>
+    <br/>
+    <a href="/test/about/">Go to /test/about/</a>
+    <br/>
+    <a href="/">Go to /</a>
+</DefaultLayout>
diff --git a/examples/pwa-simple-assets-generator/src/pwa.ts b/examples/pwa-simple-assets-generator/src/pwa.ts
@@ -0,0 +1,13 @@
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({
+  immediate: true,
+  onRegisteredSW(swScriptUrl) {
+    // eslint-disable-next-line no-console
+    console.log('SW registered: ', swScriptUrl)
+  },
+  onOfflineReady() {
+    // eslint-disable-next-line no-console
+    console.log('PWA application ready to work offline')
+  },
+})
diff --git a/examples/pwa-simple-assets-generator/src/vite-env.d.ts b/examples/pwa-simple-assets-generator/src/vite-env.d.ts
@@ -0,0 +1 @@
+declare const __DATE__: string
diff --git a/examples/pwa-simple-assets-generator/tsconfig.json b/examples/pwa-simple-assets-generator/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "types": [
+      "astro/client",
+      "vite-plugin-pwa/vanillajs",
+      "vite-plugin-pwa/info"
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@vite-pwa/astro",
   "type": "module",
   "version": "0.2.0",
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@8.15.3",
   "description": "Zero-config PWA for Astro",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -42,11 +42,17 @@
     "release": "bumpp && npm publish"
   },
   "peerDependencies": {
+    "@vite-pwa/assets-generator": "^0.2.4",
     "astro": "^1.6.0 || ^2.0.0 || ^3.0.0 || ^4.0.0",
-    "vite-plugin-pwa": ">=0.17.3 <1"
+    "vite-plugin-pwa": ">=0.19.0 <1"
+  },
+  "peerDependenciesMeta": {
+    "@vite-pwa/assets-generator": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "vite-plugin-pwa": ">=0.17.3 <1"
+    "vite-plugin-pwa": ">=0.19.0 <1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.43.1",
@@ -59,7 +65,7 @@
     "eslint": "^8.54.0",
     "esno": "^4.0.0",
     "https-localhost": "^4.7.1",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
     "vite": "^5.0.0"
   }