ayo/astro-sw
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add new demo-static
Some checks are pending
Demo / Explore-CI (push) Waiting to run
Details

Browse source
This commit is contained in:
ayo 2026-05-15 20:25:36 +02:00
parent c6ba991d12
commit cbe210855e
14 changed files with 266 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
demo-static/astro.config.mjs Normal file
View file

@ -0,0 +1,36 @@
// @ts-check
import { defineConfig } from 'astro/config'
import serviceWorker from '@ayco/astro-sw'
// import { deleteOldCaches, staleWhileRevalidate } from '@ayco/astro-sw/presets'
import * as pkg from './package.json'
export default defineConfig({
output: 'static',
site: 'https://ayo.ayco.io',
integrations: [
serviceWorker({
path: './src/sw.ts',
assetCachePrefix: 'AstroSWTest',
assetCacheVersionID: pkg.version,
// presets: [staleWhileRevalidate(), deleteOldCaches()],
exclude: ['/exclude'],
// include: ['/components/web-component.js'],
logAssets: true,
esbuild: {
minify: true,
},
registrationHooks: {
installing: () => console.log('>>> installing...'),
waiting: () => console.log('>>> waiting...'),
active: () => console.log('>>> active...'),
error: (error) => console.error('>>> error', error),
afterRegistration: async () => {
const sw = await navigator.serviceWorker.getRegistration()
console.log('>>> registrered', sw)
},
},
}),
],
})

24
demo-static/package.json Normal file
View file

@ -0,0 +1,24 @@
{
"name": "demo-static",
"private": true,
"version": "1.0.3",
"main": "index.js",
"scripts": {
"start": "astro dev",
"dev": "astro dev",
"build": "astro build",
"build:preview:static": "astro build && astro preview",
"build:preview": "astro build && astro preview"
},
"author": "Ayo Ayco",
"license": "MIT",
"description": "",
"devDependencies": {
"@astrojs/node": "^10.0.4",
"@ayco/astro-sw": "workspace:*",
"@fastify/middie": "^9.3.1",
"@fastify/static": "^9.0.0",
"astro": "^6.1.3",
"fastify": "^5.8.4"
}
}

BIN
demo-static/public/Thanos.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

14
demo-static/public/components/web-component.js Normal file
View file

@ -0,0 +1,14 @@
function register(){
if ('customElements' in window)
window.customElements.define('web-component', WebComponent)
}
class WebComponent extends HTMLElement {
connectedCallback() {
console.log('hello')
}
}
register()
export default WebComponent

BIN
demo-static/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

1
demo-static/public/sample.asset.txt Normal file
View file

@ -0,0 +1 @@
asset

2
demo-static/src/env.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

5
demo-static/src/pages/404.astro Normal file
View file

@ -0,0 +1,5 @@
---
---
404

17
demo-static/src/pages/blog/[...slug].astro Normal file
View file

@ -0,0 +1,17 @@
---
import { type CollectionEntry, getCollection } from 'astro:content'
export async function getStaticPaths() {
const posts = await getCollection('blog')
return posts.map((post) => ({
params: { slug: post.slug },
props: post,
}))
}
type Props = CollectionEntry<'blog'>
const post = Astro.props
const { Content } = await post.render()
---
<Content />

7
demo-static/src/pages/blog/index.astro Normal file
View file

@ -0,0 +1,7 @@
---
---
blog index
<a href="/blog/building-a-cozy-web">post</a>

5
demo-static/src/pages/exclude.astro Normal file
View file

@ -0,0 +1,5 @@
---
---
exclude

15
demo-static/src/pages/index.astro Normal file
View file

@ -0,0 +1,15 @@
---
// export const prerender = false
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello</title>
<script type="module" src="components/web-component.js"></script>
</head>
<body> Hello </body><web-component></web-component>
</html>
<!-- <Fragment set:html={content} /> -->

135
demo-static/src/sw.ts Normal file
View file

@ -0,0 +1,135 @@
/**
* Note: @ayco/astro-sw integration injects variables `__prefix`, `__version`, & `__assets`
* -- find usage in `astro.config.mjs` integrations
* @see https://ayco.io/n/@ayco/astro-sw
*/
const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}`
const forceLogging = true
/**
* Cleans up old service worker caches by deleting any cache that doesn't match the current cache name.
* This ensures only the current version of the application's cache is retained.
* @async
* @function cleanOldCaches
* @returns {Promise<void>} A promise that resolves when old caches have been deleted
*/
const cleanOldCaches = async () => {
const allowCacheNames = [cacheName]
const allCaches = await caches.keys()
allCaches.forEach((key) => {
if (!allowCacheNames.includes(key)) {
console.info('Deleting old cache', key)
caches
.delete(key)
.then(() => {
console.info('Successfully deleted cache:', key)
})
.catch((error) => {
console.warn('Failed to delete old cache:', key, error)
})
}
})
}
/**
* Adds specified resources to the service worker cache.
* This function is used to cache static assets for offline access.
* @async
* @function addResourcesToCache
* @param {Array<string>} resources - An array of URLs representing the resources to be cached.
* @returns {Promise<void>} A promise that resolves when all resources have been successfully added to the cache.
*/
const addResourcesToCache = async (resources) => {
const cache = await caches.open(cacheName)
console.info('adding resources to cache...', {
force: !!forceLogging,
context: 'ayco-sw',
data: resources,
})
try {
await cache.addAll(resources)
} catch (error) {
console.error(
'failed to add resources to cache; make sure requests exists and that there are no duplicates',
error
)
}
}
/**
* Puts a response in the cache.
* @async
* @function putInCache
* @param {Request} request - The request to be cached.
* @param {Response} response - The response to be cached.
* @returns {Promise<void>} A promise that resolves when the response has been added to the cache.
*/
const putInCache = async (request, response) => {
const cache = await caches.open(cacheName)
if (response.ok) {
console.info('adding one response to cache...', request.url)
cache.put(request, response)
}
}
const networkFirst = async ({ request, fallbackUrl }) => {
const cache = await caches.open(cacheName)
try {
// Try to get the resource from the network for 5 seconds
const responseFromNetwork = await fetch(request.clone())
putInCache(request, responseFromNetwork.clone())
console.info('using network response', responseFromNetwork.url)
return responseFromNetwork
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
// Try get the resource from the cache
const responseFromCache = await cache.match(request)
if (responseFromCache) {
console.info('using cached response...', responseFromCache.url)
return responseFromCache
}
// If fallback is provided, try to use it, otherwise return error
if (fallbackUrl) {
const fallbackResponse = await cache.match(fallbackUrl)
if (fallbackResponse) {
console.info('using fallback cached response...', fallbackResponse.url)
return fallbackResponse
}
}
// when even the fallback response is not available,
// there is nothing we can do, but we must always
// return a Response object
return new Response('Network error happened', {
status: 408,
headers: { 'Content-Type': 'text/plain' },
})
}
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
self.addEventListener('activate', (event) => {
console.info('activating service worker...')
cleanOldCaches()
})
self.addEventListener('install', (event) => {
console.info('installing service worker...')
self.skipWaiting() // go straight to activate
event.waitUntil(addResourcesToCache(__assets ?? []))
})
self.addEventListener('fetch', (event) => {
console.info('fetch happened', { data: event })
event.respondWith(
networkFirst({
request: event.request,
fallbackUrl: './',
})
)
})

5
demo-static/tsconfig.json Normal file
View file

@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}