Skip to content

Commit cb14787

Browse files
userquinuserquin
authored
feat!: add experimental PWA assets generation and injection (#37)
1 parent dbbcae9 commit cb14787

20 files changed

+522
-183
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Zero-config PWA Integration for Astro
4242
- 🐞 **Development Support**: debug your custom service worker logic as you develop your application
4343
- 🛠️ **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)
4444
- 💥 **PWA Assets Generator**: generate all the PWA assets from a single command and a single source image
45+
- 🚀 **PWA Assets Integration**: serving, generating and injecting PWA Assets on the fly in your application
4546

4647

4748
## 📦 Install

‎examples/pwa-simple-assets-generator/astro.config.mjs

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { defineConfig } from 'astro/config'
2+
import AstroPWA from '@vite-pwa/astro'
3+
4+
// https://astro.build/config
5+
export default defineConfig({
6+
vite: {
7+
logLevel: 'info',
8+
define: {
9+
__DATE__: `'${new Date().toISOString()}'`,
10+
},
11+
},
12+
integrations: [
13+
AstroPWA({
14+
mode: 'development',
15+
base: '/',
16+
scope: '/',
17+
includeAssets: ['favicon.svg'],
18+
registerType: 'autoUpdate',
19+
manifest: {
20+
name: 'Astro PWA',
21+
short_name: 'Astro PWA',
22+
theme_color: '#ffffff',
23+
},
24+
pwaAssets: {
25+
config: true,
26+
},
27+
workbox: {
28+
navigateFallback: '/',
29+
globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}'],
30+
},
31+
devOptions: {
32+
enabled: false,
33+
navigateFallbackAllowlist: [/^\//],
34+
},
35+
experimental: {
36+
directoryAndTrailingSlashHandler: true,
37+
}
38+
}),
39+
],
40+
})

‎examples/pwa-simple-assets-generator/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "pwa-simple-assets-generator",
3+
"type": "module",
4+
"version": "0.0.0",
5+
"private": true,
6+
"scripts": {
7+
"dev": "astro dev",
8+
"start": "astro dev",
9+
"build": "astro build",
10+
"preview": "astro preview",
11+
"astro": "astro"
12+
},
13+
"devDependencies": {
14+
"@vite-pwa/astro": "workspace:*",
15+
"astro": "^4.0.1",
16+
"workbox-window": "^7.0.0"
17+
}
18+
}

‎examples/pwa-simple-assets-generator/pnpm-workspace.yaml

Whitespace-only changes.

‎examples/pwa-simple-assets-generator/public/favicon.svg

Lines changed: 130 additions & 0 deletions
Loading

‎examples/pwa-simple-assets-generator/public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎examples/pwa-simple-assets-generator/pwa-assets.config.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {
2+
createAppleSplashScreens,
3+
defineConfig,
4+
minimal2023Preset,
5+
} from '@vite-pwa/assets-generator/config'
6+
7+
export default defineConfig({
8+
headLinkOptions: {
9+
preset: '2023',
10+
},
11+
preset: {
12+
...minimal2023Preset,
13+
appleSplashScreens: createAppleSplashScreens({
14+
padding: 0.3,
15+
resizeOptions: { fit: 'contain', background: 'white' },
16+
darkResizeOptions: { fit: 'contain', background: 'black' },
17+
linkMediaOptions: {
18+
log: true,
19+
addMediaScreen: true,
20+
xhtml: true,
21+
},
22+
}, ['iPad Air 9.7"']),
23+
},
24+
images: 'public/favicon.svg',
25+
})

‎examples/pwa-simple-assets-generator/src/env.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/// <reference types="astro/client" />
2+
/// <reference types="vite-plugin-pwa/info" />
3+
/// <reference types="vite-plugin-pwa/vanillajs" />

‎examples/pwa-simple-assets-generator/src/layouts/DefaultLayout.astro

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
import { pwaInfo } from 'virtual:pwa-info';
3+
import { pwaAssetsHead } from 'virtual:pwa-assets/head';
4+
5+
export interface Props {
6+
title: string;
7+
}
8+
9+
// replaced dynamically
10+
const buildDate = __DATE__;
11+
12+
const { title } = Astro.props as Props;
13+
---
14+
15+
<html lang="en">
16+
<head>
17+
<meta charset="UTF-8">
18+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19+
<title>{title}</title>
20+
<meta name="description" content={title}>
21+
{ pwaAssetsHead.themeColor && <meta name="theme-color" content={pwaAssetsHead.themeColor.content} /> }
22+
{ pwaAssetsHead.links.map(link => (
23+
<link {...link} />
24+
)) }
25+
{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
26+
<script src="/src/pwa.ts"></script>
27+
<style>
28+
main, footer {
29+
text-align: center;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<main>
35+
<article>
36+
<slot />
37+
</article>
38+
</main>
39+
<footer>
40+
Built at: { buildDate }
41+
</footer>
42+
</body>
43+
</html>

‎examples/pwa-simple-assets-generator/src/pages/404.astro

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
import DefaultLayout from '../layouts/DefaultLayout.astro';
3+
---
4+
<DefaultLayout title="Astro PWA">
5+
<h1>Page not found</h1>
6+
<h1>Upps, something is wrong, the requested page not found!</h1>
7+
<a href="/">Back home</a>
8+
</DefaultLayout>

‎examples/pwa-simple-assets-generator/src/pages/about.astro

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
import DefaultLayout from '../layouts/DefaultLayout.astro';
3+
---
4+
<DefaultLayout title="About - Astro PWA">
5+
<h1>About - <a href="https://astro.build/">Astro</a> PWA!</h1>
6+
<a href="/">Go Home</a>
7+
</DefaultLayout>

‎examples/pwa-simple-assets-generator/src/pages/index.astro

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
import DefaultLayout from '../layouts/DefaultLayout.astro';
3+
---
4+
<DefaultLayout title="Astro PWA">
5+
<h1>Welcome to <a href="https://astro.build/">Astro</a> PWA</h1>
6+
<a href="/about">Go /about</a>
7+
<br/>
8+
<a href="/about/">Go /about/</a>
9+
<br/>
10+
<a href="/test">Go to /test</a>
11+
<br/>
12+
<a href="/test/">Go to /test/</a>
13+
</DefaultLayout>

‎examples/pwa-simple-assets-generator/src/pages/test/about.astro

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
import DefaultLayout from '../../layouts/DefaultLayout.astro';
3+
---
4+
<DefaultLayout title="About Test Astro PWA">
5+
<h1>Welcome to <a href="https://astro.build/">Astro</a> PWA</h1>
6+
<a href="/test">Go /test</a>
7+
<br/>
8+
<a href="/test/">Go /test/</a>
9+
</DefaultLayout>

‎examples/pwa-simple-assets-generator/src/pages/test/index.astro

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
import DefaultLayout from '../../layouts/DefaultLayout.astro';
3+
---
4+
<DefaultLayout title="Test Astro PWA">
5+
<h1>Welcome to <a href="https://astro.build/">Astro</a> PWA</h1>
6+
<a href="/test/about">Go to /test/about</a>
7+
<br/>
8+
<a href="/test/about/">Go to /test/about/</a>
9+
<br/>
10+
<a href="/">Go to /</a>
11+
</DefaultLayout>

‎examples/pwa-simple-assets-generator/src/pwa.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { registerSW } from 'virtual:pwa-register'
2+
3+
registerSW({
4+
immediate: true,
5+
onRegisteredSW(swScriptUrl) {
6+
// eslint-disable-next-line no-console
7+
console.log('SW registered: ', swScriptUrl)
8+
},
9+
onOfflineReady() {
10+
// eslint-disable-next-line no-console
11+
console.log('PWA application ready to work offline')
12+
},
13+
})

‎examples/pwa-simple-assets-generator/src/vite-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare const __DATE__: string

‎examples/pwa-simple-assets-generator/tsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "astro/tsconfigs/strict",
3+
"compilerOptions": {
4+
"types": [
5+
"astro/client",
6+
"vite-plugin-pwa/vanillajs",
7+
"vite-plugin-pwa/info"
8+
]
9+
}
10+
}

‎package.json

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@vite-pwa/astro",
33
"type": "module",
44
"version": "0.2.0",
5-
"packageManager": "pnpm@8.11.0",
5+
"packageManager": "pnpm@8.15.3",
66
"description": "Zero-config PWA for Astro",
77
"author": "antfu <anthonyfu117@hotmail.com>",
88
"license": "MIT",
@@ -42,11 +42,17 @@
4242
"release": "bumpp && npm publish"
4343
},
4444
"peerDependencies": {
45+
"@vite-pwa/assets-generator": "^0.2.4",
4546
"astro": "^1.6.0 || ^2.0.0 || ^3.0.0 || ^4.0.0",
46-
"vite-plugin-pwa": ">=0.17.3 <1"
47+
"vite-plugin-pwa": ">=0.19.0 <1"
48+
},
49+
"peerDependenciesMeta": {
50+
"@vite-pwa/assets-generator": {
51+
"optional": true
52+
}
4753
},
4854
"dependencies": {
49-
"vite-plugin-pwa": ">=0.17.3 <1"
55+
"vite-plugin-pwa": ">=0.19.0 <1"
5056
},
5157
"devDependencies": {
5258
"@antfu/eslint-config": "^0.43.1",
@@ -59,7 +65,7 @@
5965
"eslint": "^8.54.0",
6066
"esno": "^4.0.0",
6167
"https-localhost": "^4.7.1",
62-
"typescript": "^5.3.2",
68+
"typescript": "^5.3.3",
6369
"unbuild": "^2.0.0",
6470
"vite": "^5.0.0"
6571
}

0 commit comments

Comments
 (0)