Skip to content

Commit

Permalink
feat!: add experimental PWA assets generation and injection (#37)
Browse files Browse the repository at this point in the history
  • Loading branch information
userquin committed Feb 17, 2024
1 parent dbbcae9 commit cb14787
Show file tree
Hide file tree
Showing 20 changed files with 522 additions and 183 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
40 changes: 40 additions & 0 deletions examples/pwa-simple-assets-generator/astro.config.mjs
Original file line number Diff line number Diff line change
@@ -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,
}
}),
],
})
18 changes: 18 additions & 0 deletions examples/pwa-simple-assets-generator/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Empty file.
130 changes: 130 additions & 0 deletions examples/pwa-simple-assets-generator/public/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions examples/pwa-simple-assets-generator/public/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
25 changes: 25 additions & 0 deletions examples/pwa-simple-assets-generator/pwa-assets.config.ts
Original file line number Diff line number Diff line change
@@ -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',
})
3 changes: 3 additions & 0 deletions examples/pwa-simple-assets-generator/src/env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/// <reference types="astro/client" />
/// <reference types="vite-plugin-pwa/info" />
/// <reference types="vite-plugin-pwa/vanillajs" />
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 8 additions & 0 deletions examples/pwa-simple-assets-generator/src/pages/404.astro
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 7 additions & 0 deletions examples/pwa-simple-assets-generator/src/pages/about.astro
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions examples/pwa-simple-assets-generator/src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions examples/pwa-simple-assets-generator/src/pages/test/index.astro
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions examples/pwa-simple-assets-generator/src/pwa.ts
Original file line number Diff line number Diff line change
@@ -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')
},
})
1 change: 1 addition & 0 deletions examples/pwa-simple-assets-generator/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare const __DATE__: string
10 changes: 10 additions & 0 deletions examples/pwa-simple-assets-generator/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"types": [
"astro/client",
"vite-plugin-pwa/vanillajs",
"vite-plugin-pwa/info"
]
}
}
14 changes: 10 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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"
}
Expand Down
Loading

0 comments on commit cb14787

Please sign in to comment.