Skip to content

Commit b605dbe

Browse files
hugo-vrijswijkuserquin
hugo-vrijswijk
and
userquin
authored
fix: use build.client output directory for adapters (#64)
* fix: use build.client config dir if available For server outputs, the `dist/client` output directory should be used and not `dist`. * chore: add SSR example * chore: add small runtime caching to the example * chore(example): cache only 200 responses and add max entries --------- Co-authored-by: userquin <userquin@gmail.com>
1 parent 159f7af commit b605dbe

File tree

18 files changed

+1181
-404
lines changed

18 files changed

+1181
-404
lines changed

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import node from '@astrojs/node'
2+
import AstroPWA from '@vite-pwa/astro'
3+
import { defineConfig } from 'astro/config'
4+
5+
// https://astro.build/config
6+
export default defineConfig({
7+
vite: {
8+
logLevel: 'info',
9+
define: {
10+
__DATE__: `'${new Date().toISOString()}'`,
11+
},
12+
server: {
13+
fs: {
14+
// Allow serving files from hoisted root node_modules
15+
allow: ['../..'],
16+
},
17+
},
18+
},
19+
output: 'server',
20+
adapter: node({
21+
mode: 'standalone',
22+
}),
23+
integrations: [
24+
AstroPWA({
25+
mode: 'development',
26+
base: '/',
27+
scope: '/',
28+
includeAssets: ['favicon.svg'],
29+
registerType: 'autoUpdate',
30+
manifest: {
31+
name: 'Astro PWA',
32+
short_name: 'Astro PWA',
33+
theme_color: '#ffffff',
34+
},
35+
pwaAssets: {
36+
config: true,
37+
},
38+
workbox: {
39+
navigateFallback: '/',
40+
globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}'],
41+
navigateFallbackAllowlist: [/^\/$/],
42+
runtimeCaching: [{
43+
urlPattern: ({ url, sameOrigin, request }) => sameOrigin && request.mode === 'navigate' && !url.pathname.match(/^\/$/),
44+
handler: 'NetworkFirst',
45+
options: {
46+
cacheName: 'offline-ssr-pages-cache',
47+
/* check the options in the workbox-build docs */
48+
matchOptions: {
49+
ignoreVary: true,
50+
ignoreSearch: true,
51+
},
52+
cacheableResponse: {
53+
statuses: [200],
54+
},
55+
expiration: {
56+
maxEntries: 100,
57+
},
58+
plugins: [{
59+
cachedResponseWillBeUsed: async (params) => {
60+
// When handlerDidError is invoked, then we can prevent redirecting if there is an entry in the cache.
61+
// To check the behavior, navigate to a product page, then disable the network and refresh the page.
62+
params.state ??= {}
63+
params.state.dontRedirect = params.cachedResponse
64+
console.log(`[SW] cachedResponseWillBeUsed ${params.request.url}, ${params.state ? JSON.stringify(params.state) : ''}`)
65+
},
66+
// This callback will be called when the fetch call fails.
67+
// Beware of the logic, will be also invoked if the server is down.
68+
handlerDidError: async ({ request, state, error }) => {
69+
if (state?.dontRedirect)
70+
return state.dontRedirect
71+
72+
console.log(`[SW] handlerDidError ${request.url}, ${state ? JSON.stringify(state) : ''}`)
73+
return error && 'name' in error && error.name === 'no-response'
74+
? Response.redirect(
75+
state.dontRedirect.url,
76+
404,
77+
)
78+
: undefined
79+
},
80+
}],
81+
},
82+
}],
83+
},
84+
devOptions: {
85+
enabled: true,
86+
navigateFallbackAllowlist: [/^\/$/],
87+
},
88+
experimental: {
89+
directoryAndTrailingSlashHandler: true,
90+
},
91+
}),
92+
],
93+
})

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "pwa-simple-assets-ssr",
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+
"@astrojs/node": "^9.1.3",
15+
"@vite-pwa/astro": "workspace:*",
16+
"astro": "^5.0.9",
17+
"workbox-window": "^7.3.0"
18+
}
19+
}

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

Whitespace-only changes.

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

Lines changed: 130 additions & 0 deletions
Loading

‎examples/pwa-simple-assets-ssr/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-ssr/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-ssr/src/env.d.ts‎

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

‎examples/pwa-simple-assets-ssr/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 { pwaAssetsHead } from 'virtual:pwa-assets/head'
3+
import { pwaInfo } from 'virtual:pwa-info'
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-ssr/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-ssr/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>

0 commit comments

Comments
 (0)