Skip to content

Commit d9ffcb5

Browse files
userquinuserquin
authored
feat!: add experimental PWA assets generation and injection (#621)
* feat: pwa assets generation and injection * chore: update logic for assets 0.2.1 * chore: load assets generator when assets configured * chore: refactor `ResolvedIconAsset` * chore: cleanup assets entry from jsdocs * chore: remove cache control cache * chore: refactor assets loader logic * chore: include pwa assets reload support * chore: include test with png image * chore: early return if url is not an image * chore: use test in early return if url is not an image * chore: use any for PWA assets generator (+ jsdocs) * chore: refactor html injection * chore: use any for `lookupPWAAssetsInstructions` * chore: generate assets only when pwa enabled * chore: refactor helper functions * chore: return if missing icon asset * chore: refactor assets generator * chore: vite base can be empty * chore: change logic for overrideManifestIcons * chore: update logic for overrideManifestIcons * chore: update hint for overrideManifestIcons * chore: update icon last modified entry with Date.now() when created * chore: update `overrideManifestIcons` hint * chore: change `handleHotUpdate` logic * chore: find existing links in html injection * chore: add pwa assets in vue router examples via env var * chore: update lockfile * chore: fix lint * chore: move pwa assets generator to optional dependency * chore: add integration options * chore: add integration option to resolved options * chore: add public and output integration options * chore: update transform index html logic * chore: update ypes and docs
1 parent d18c510 commit d9ffcb5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1758
-188
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Zero-config PWA Framework-agnostic Plugin for Vite
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
## 📦 Install
4748

‎examples/assets-generator/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>PWA Assets Generator</title>
7+
<style>
8+
#app {
9+
text-align: center;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
<script type="module" src="/src/main.ts"></script>
16+
</body>
17+
</html>

‎examples/assets-generator/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "assets-generator",
3+
"type": "module",
4+
"version": "0.0.0",
5+
"private": true,
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"dev:png": "PNG=true vite",
11+
"build:png": "PNG=true vite build",
12+
"preview:png": "PNG=true vite preview"
13+
},
14+
"devDependencies": {
15+
"rimraf": "^5.0.5",
16+
"sharp": "^0.32.6",
17+
"sharp-ico": "^0.1.5",
18+
"typescript": "^5.3.3",
19+
"vite": "^5.0.10",
20+
"vite-plugin-pwa": "workspace:*",
21+
"@vite-pwa/assets-generator": "^0.2.4",
22+
"workbox-window": "^7.0.0"
23+
}
24+
}

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

+130
Loading

‎examples/assets-generator/public/source-test.png

16.6 KB
Loading

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
basePath: '/',
21+
xhtml: true,
22+
},
23+
}, ['iPad Air 9.7"']),
24+
},
25+
images: process.env.PNG ? 'public/source-test.png' : 'public/favicon.svg',
26+
})

‎examples/assets-generator/src/main.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const date = __DATE__
2+
3+
const app = document.querySelector<HTMLDivElement>('#app')!
4+
5+
app.innerHTML = `
6+
<div>
7+
<img src="/favicon.svg" alt="PWA Logo" width="60" height="60">
8+
<h1>PWA Assets Generator</h1>
9+
<br/>
10+
<p>${date}</p>
11+
<br/>
12+
</div>
13+
`
14+
15+
window.addEventListener('load', () => {
16+
import('./pwa.ts')
17+
})

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { pwaInfo } from 'virtual:pwa-info'
2+
import { pwaAssetsHead } from 'virtual:pwa-assets/head'
3+
import { pwaAssetsIcons } from 'virtual:pwa-assets/icons'
4+
import { registerSW } from 'virtual:pwa-register'
5+
6+
console.log(pwaInfo)
7+
console.log(pwaAssetsHead)
8+
console.log(pwaAssetsIcons)
9+
10+
registerSW({
11+
immediate: true,
12+
onNeedRefresh() {
13+
console.log('onNeedRefresh message should not appear')
14+
},
15+
})

‎examples/assets-generator/src/vite-env.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="vite/client" />
2+
/// <reference types="vite-plugin-pwa/vanillajs" />
3+
/// <reference types="vite-plugin-pwa/info" />
4+
5+
declare const __DATE__: string

‎examples/assets-generator/tsconfig.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
5+
"useDefineForClassFields": true,
6+
"module": "ESNext",
7+
8+
/* Bundler mode */
9+
"moduleResolution": "bundler",
10+
"resolveJsonModule": true,
11+
"types": ["vite/client", "vite-plugin-pwa/vanillajs", "vite-plugin-pwa/info", "vite-plugin-pwa/pwa-assets"],
12+
"allowImportingTsExtensions": true,
13+
14+
/* Linting */
15+
"strict": true,
16+
"noFallthroughCasesInSwitch": true,
17+
"noUnusedLocals": true,
18+
"noUnusedParameters": true,
19+
"noEmit": true,
20+
"isolatedModules": true,
21+
"skipLibCheck": true
22+
},
23+
"include": ["src"]
24+
}

‎examples/assets-generator/vite.config.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { defineConfig } from 'vite'
2+
import { VitePWA } from 'vite-plugin-pwa'
3+
4+
export default defineConfig({
5+
logLevel: 'info',
6+
define: {
7+
__DATE__: `'${new Date().toISOString()}'`,
8+
},
9+
build: {
10+
sourcemap: true,
11+
},
12+
plugins: [
13+
VitePWA({
14+
mode: 'development',
15+
base: '/',
16+
/* buildBase: '/test-build-base/', */
17+
strategies: 'generateSW',
18+
registerType: 'autoUpdate',
19+
includeAssets: ['favicon.svg'],
20+
manifest: {
21+
name: 'Vite PWA',
22+
short_name: 'Vite PWA',
23+
theme_color: '#ffffff',
24+
},
25+
pwaAssets: {
26+
config: true,
27+
overrideManifestIcons: true,
28+
},
29+
workbox: {
30+
globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
31+
cleanupOutdatedCaches: true,
32+
clientsClaim: true,
33+
skipWaiting: true,
34+
},
35+
devOptions: {
36+
enabled: true,
37+
suppressWarnings: true,
38+
type: 'module',
39+
},
40+
}),
41+
],
42+
})

‎examples/preact-router/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@
5656
"@rollup/plugin-replace": "^5.0.5",
5757
"https-localhost": "^4.7.1",
5858
"rimraf": "^5.0.5",
59-
"typescript": "^5.2.2",
60-
"vite": "^5.0.0",
59+
"typescript": "^5.3.3",
60+
"vite": "^5.0.10",
6161
"vite-plugin-pwa": "workspace:*",
6262
"workbox-core": "^7.0.0",
6363
"workbox-precaching": "^7.0.0",

‎examples/react-router/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@
6363
"@vitejs/plugin-react": "^4.2.0",
6464
"https-localhost": "^4.7.1",
6565
"rimraf": "^5.0.5",
66-
"typescript": "^5.2.2",
67-
"vite": "^5.0.0",
66+
"typescript": "^5.3.3",
67+
"vite": "^5.0.10",
6868
"vite-plugin-pwa": "workspace:*",
6969
"workbox-core": "^7.0.0",
7070
"workbox-precaching": "^7.0.0",

‎examples/solid-router/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@
5555
"@rollup/plugin-replace": "^5.0.5",
5656
"https-localhost": "^4.7.1",
5757
"rimraf": "^5.0.5",
58-
"typescript": "^5.2.2",
59-
"vite": "^5.0.0",
58+
"typescript": "^5.3.3",
59+
"vite": "^5.0.10",
6060
"vite-plugin-pwa": "workspace:*",
6161
"vite-plugin-solid": "^2.7.2",
6262
"workbox-core": "^7.0.0",

‎examples/svelte-routify/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
"svelte": "^4.2.5",
6060
"svelte-check": "^3.6.0",
6161
"svelte-preprocess": "^5.1.0",
62-
"typescript": "^5.2.2",
63-
"vite": "^5.0.0",
62+
"typescript": "^5.3.3",
63+
"vite": "^5.0.10",
6464
"vite-plugin-pwa": "workspace:*",
6565
"workbox-core": "^7.0.0",
6666
"workbox-precaching": "^7.0.0",

‎examples/vanilla-ts-dev-options/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
},
2222
"devDependencies": {
2323
"rimraf": "^5.0.5",
24-
"typescript": "^5.2.2",
25-
"vite": "^5.0.0",
24+
"typescript": "^5.3.3",
25+
"vite": "^5.0.10",
2626
"vite-plugin-pwa": "workspace:*"
2727
}
2828
}

‎examples/vanilla-ts-no-ip/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"devDependencies": {
1919
"lodash-es": "^4.17.21",
2020
"rimraf": "^5.0.5",
21-
"typescript": "^5.2.2",
22-
"vite": "^5.0.0",
21+
"typescript": "^5.3.3",
22+
"vite": "^5.0.10",
2323
"vite-plugin-pwa": "workspace:*",
2424
"workbox-cacheable-response": "^7.0.0",
2525
"workbox-core": "^7.0.0",

‎examples/vue-basic-cdn/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"@vitejs/plugin-vue": "^4.3.4",
1919
"@vueuse/core": "^10.6.1",
2020
"https-localhost": "^4.7.1",
21-
"typescript": "^5.2.2",
22-
"vite": "^5.0.0",
21+
"typescript": "^5.3.3",
22+
"vite": "^5.0.10",
2323
"vite-plugin-pwa": "workspace:*"
2424
}
2525
}

0 commit comments

Comments
 (0)