Compare commits
No commits in common. "main" and "v0.2.0" have entirely different histories.
45 changed files with 1872 additions and 5561 deletions
11
.build.yml
11
.build.yml
|
|
@ -1,11 +0,0 @@
|
|||
image: alpine/edge
|
||||
secrets:
|
||||
- bbfcb6dc-7c4a-42ee-a11a-022f0339a133
|
||||
environment:
|
||||
REPO: astro-sw
|
||||
GH_USER: ayoayco
|
||||
tasks:
|
||||
- push-mirror: |
|
||||
cd ~/"${REPO}"
|
||||
git config --global credential.helper store
|
||||
git push --mirror "https://github.com/${GH_USER}/${REPO}"
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -7,4 +7,3 @@ package-lock.json
|
|||
*swo
|
||||
*swp
|
||||
|
||||
.eslintcache
|
||||
|
|
@ -1 +0,0 @@
|
|||
npm run check
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
# someday let's think about formatting html
|
||||
**/*.html
|
||||
|
||||
**/*.md
|
||||
**/*.css
|
||||
**/*.yml
|
||||
**/*.yaml
|
||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2024 Ayo Ayco
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
142
README.md
142
README.md
|
|
@ -2,24 +2,9 @@
|
|||
|
||||
[](https://www.npmjs.com/package/@ayco/astro-sw)
|
||||
[](https://www.npmjs.com/package/@ayco/astro-sw)
|
||||
[](#library-size)
|
||||
|
||||
Use your own authored [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) with Astro.
|
||||
|
||||
The integration accepts the path to your service worker and automatically injects dynamic variables such as `__assets` generated by Astro for caching.
|
||||
|
||||
It works on all Astro output options: `static`, `server`, or `hybrid`, and lets developers retain the flexibility for various [caching strategies](https://developer.chrome.com/docs/workbox/caching-strategies-overview/).
|
||||
|
||||
## Background
|
||||
|
||||
This integration was originally developed to support the Caching strategy needs of [Cozy](https://cozy.pub) -- the modern reading companion for the Web. You can find [an example service worker in the repository](https://github.com/ayoayco/Cozy/blob/main/src/sw.mjs).
|
||||
|
||||
There is a work in progress adding `presets` for using common caching strategies and customizing the behavior of the service worker via config options. This aims to reduce the need for writing the service worker script by hand for most use cases.
|
||||
|
||||
Get in touch:
|
||||
1. Chat via Discord: [Ayo's Projects](https://discord.gg/kkvW7GYNAp)
|
||||
1. Submit tickets via [SourceHut todo](https://todo.sr.ht/~ayoayco/astro-sw)
|
||||
1. Start a [GitHub discussion](https://github.com/ayoayco/astro-sw/discussions)
|
||||
1. Email me: [ayo@ayco.io](mailto:ayo@ayco.io)
|
||||
The integration accepts path to your own authored [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) and automatically injects dynamic variables such as `__assets` generated by Astro for caching. The goal is to [invert the control](https://en.wikipedia.org/wiki/Inversion_of_control) (i.e., compared to generating the service worker script code), and let devs retain the flexibility for various [caching strategies](https://developer.chrome.com/docs/workbox/caching-strategies-overview/).
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
@ -27,124 +12,45 @@ In your [Astro](https://astro.build) project:
|
|||
|
||||
```bash
|
||||
# if using npm
|
||||
$ npm i @ayco/astro-sw
|
||||
$ npm i -D @ayco/astro-sw
|
||||
|
||||
# if using pnpm
|
||||
$ pnpm add @ayco/astro-sw
|
||||
$ pnpm add -D @ayco/astro-sw
|
||||
```
|
||||
|
||||
## Minimal Usage
|
||||
## Usage
|
||||
|
||||
Here's an example `astro.config.mjs` file:
|
||||
Example `astro.config.mjs`
|
||||
|
||||
```js
|
||||
import { defineConfig } from "astro/config";
|
||||
import node from "@astrojs/node";
|
||||
import serviceWorker from "@ayco/astro-sw";
|
||||
|
||||
export default defineConfig({
|
||||
output: "server",
|
||||
adapter: node({
|
||||
mode: "middleware"
|
||||
}),
|
||||
integrations: [
|
||||
serviceWorker({
|
||||
path: "./src/sw.ts",
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
For more options available, see the [API](#api).
|
||||
|
||||
## TypeScript support
|
||||
|
||||
We use `esbuild` to resolve service worker `imports` and build TS files! You can customize the build options by providing it to the `esbuild` configuration property.
|
||||
|
||||
```js
|
||||
import { defineConfig } from "astro/config";
|
||||
import serviceWorker from "@ayco/astro-sw";
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
serviceWorker({
|
||||
path: "./src/sw.ts",
|
||||
esbuild: {
|
||||
minify: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Injected variables
|
||||
|
||||
The most important variable your service worker will have access to is `__assets`, which contains all routes and public assets that Astro includes in your build. Additionally, you will also get `__prefix` and `__version` you can use for naming & invalidating your Cache storage (useful for debugging purposes).
|
||||
|
||||
## `eslint` globals
|
||||
|
||||
Because of the injected variables not being defined in your script, you might get `eslint` errors for the undefined variables when you have the `no-undef` rule. To prevent this, you can use our exported `globals` object in your eslint config as follows:
|
||||
|
||||
```js
|
||||
import astroSwGlobals from "@ayco/astro-sw/globals";
|
||||
|
||||
export default [
|
||||
{
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...astroSwGlobals,
|
||||
},
|
||||
},
|
||||
},
|
||||
// add more generic rule sets here, such as:
|
||||
// jsPlugin.configs.recommended,
|
||||
];
|
||||
```
|
||||
|
||||
## Registration Hooks
|
||||
|
||||
Hooks are provided for adding custom logic that triggers in various service worker registration events.
|
||||
|
||||
The following properties are available for the `registrationHooks` configuration:
|
||||
|
||||
1. `installing` - when the registration is 'installing'
|
||||
1. `waiting` - when the registration is 'waiting'
|
||||
1. `active` - when the registration is 'active'
|
||||
1. `error` - when the registration throws an error
|
||||
1. `unsupported` - when the service workers are unsupported
|
||||
1. `afterRegistration` - after the registration succeeds
|
||||
|
||||
```js
|
||||
import { defineConfig } from "astro/config";
|
||||
import serviceWorker from "@ayco/astro-sw";
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
serviceWorker({
|
||||
path: "./src/sw.ts",
|
||||
registrationHooks: {
|
||||
afterRegistration: async () => {
|
||||
const sw = await navigator.serviceWorker.getRegistration();
|
||||
console.log(">>> registrered", sw);
|
||||
},
|
||||
installing: () => console.log("installing..."),
|
||||
waiting: () => console.log("waiting..."),
|
||||
active: () => console.log("active..."),
|
||||
error: (error) => console.error(error),
|
||||
unsupported: () => console.log(":("),
|
||||
},
|
||||
}),
|
||||
],
|
||||
path: "./src/sw.js",
|
||||
assetCachePrefix: 'cozy-reader',
|
||||
})
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
The integration accepts a configuration object with the following properties
|
||||
The integration accepts a configuration object of type `ServiceWorkerConfig` with the following properties
|
||||
|
||||
| property | type | required? | notes |
|
||||
| ------------------- | ---------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| path | string | required | path to your _own_ service worker script; no surprises & easy debugging |
|
||||
| assetCachePrefix | string | optional | cache storage name prefix |
|
||||
| assetCacheVersionID | string | optional | cache storage name versioning; by default, a random UUID is used |
|
||||
| customRoutes | string[] | optional | list of custom routes you want to be cached. Beware that non-existent routes that result to HTTP Error404 will cause the service worker to fail |
|
||||
| excludeRoutes | string[] | optional | list of routes you want to be ignored/removed from assets |
|
||||
| logAssets | boolean | optional | set to see a list of the assets found; defaults to false |
|
||||
| esbuild | [BuildOptions](https://esbuild.github.io/api/) | optional | custom build options for your service worker script |
|
||||
| registrationHooks | object | optional | provide callbacks for various registration events; see section on [Registration Hooks](#registration-hooks) |
|
||||
| property | type | required? | notes |
|
||||
| --- | --- | --- | --- |
|
||||
| path | string | required | path to your *own* service worker script; no surprises & easy debugging |
|
||||
| assetCachePrefix | string | optional | cache storage name prefix; useful for debugging |
|
||||
| assetCacheVersionID | string | optional | cache storage name versioning; by default, a random UUID is used but you can provide your own for easy debugging & invalidation |
|
||||
|
||||
## Example sw.js
|
||||
|
||||
You can find an example service worker (`example_sw.js`) in the [repository](https://ayco.io/gh/astro-sw), and here's the [raw file](https://raw.githubusercontent.com/ayoayco/astro-sw/main/example_sw.js) too.
|
||||
|
|
|
|||
20
astro.config.mjs
Normal file
20
astro.config.mjs
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import node from "@astrojs/node";
|
||||
import serviceWorker from "./index.js";
|
||||
|
||||
export default defineConfig({
|
||||
output: "server",
|
||||
adapter: node({
|
||||
mode: "middleware"
|
||||
}),
|
||||
integrations: [
|
||||
serviceWorker({
|
||||
path: "./example_sw.js",
|
||||
assetCachePrefix: 'cozy-reader',
|
||||
// onInstalled: () => console.log('Installed...'),
|
||||
// onInstalling: () => console.log('Installing...'),
|
||||
// onActive: () => console.log('Active!'),
|
||||
// onError: (error) => console.error(`Registration failed on ${error}`)
|
||||
})
|
||||
]
|
||||
});
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// @ts-check
|
||||
|
||||
import { defineConfig } from 'astro/config'
|
||||
import node from '@astrojs/node'
|
||||
import serviceWorker from '@ayco/astro-sw'
|
||||
import { deleteOldCaches, staleWhileRevalidate } from '@ayco/astro-sw/presets'
|
||||
|
||||
export default defineConfig({
|
||||
output: 'static',
|
||||
adapter: node({
|
||||
mode: 'middleware',
|
||||
}),
|
||||
site: 'https://ayo.ayco.io',
|
||||
integrations: [
|
||||
serviceWorker({
|
||||
path: './src/example_sw.js',
|
||||
presets: [staleWhileRevalidate(), deleteOldCaches()],
|
||||
customRoutes: [
|
||||
// '/threads'
|
||||
],
|
||||
excludeRoutes: ['/exclude'],
|
||||
assetCachePrefix: 'hey',
|
||||
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)
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
})
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"name": "demo",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "astro dev",
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"build:preview:static": "astro build && astro preview",
|
||||
"build:preview": "astro build && node ./server.mjs"
|
||||
},
|
||||
"author": "Ayo Ayco",
|
||||
"license": "MIT",
|
||||
"description": "",
|
||||
"devDependencies": {
|
||||
"astro": "^5.6.1",
|
||||
"@astrojs/node": "^9.1.3",
|
||||
"@fastify/middie": "^9.0.3",
|
||||
"@fastify/static": "^8.1.1",
|
||||
"astro-eslint-parser": "^1.2.2",
|
||||
"fastify": "^5.2.2",
|
||||
"@ayco/astro-sw": "workspace:*"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
|
|
@ -1,18 +0,0 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
import Fastify from 'fastify'
|
||||
import fastifyMiddie from '@fastify/middie'
|
||||
import fastifyStatic from '@fastify/static'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { handler as ssrHandler } from './dist/server/entry.mjs'
|
||||
|
||||
const app = Fastify({ logger: true })
|
||||
|
||||
await app
|
||||
.register(fastifyStatic, {
|
||||
root: fileURLToPath(new URL('./dist/client', import.meta.url)),
|
||||
})
|
||||
.register(fastifyMiddie)
|
||||
app.use(ssrHandler)
|
||||
|
||||
app.listen({ port: 4321 })
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
---
|
||||
title: Building a Cozy Web
|
||||
description: Let us build the web we want!
|
||||
pubDate: 'Aug 14 2024'
|
||||
heroImage: '/cozy.jpg'
|
||||
---
|
||||
|
||||
> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web).
|
||||
|
||||
Have you ever clicked a link to an article, all hyped up to read the content, only to be slapped in the face with popups over popups of requests to subscribe and asking consent to track you with cookies?
|
||||
|
||||
Do you sometimes wish you can have a consistent experience when opening articles... a place to save all your favorites, and possibly get helpful insights?
|
||||
|
||||
Ah, well you're not alone. 🤣
|
||||
|
||||
This is exactly why I started [**Cozy** 🧸](https://cozy.ayco.io/).
|
||||
|
||||
It's a simple web page that can make any web page content-focused! 🎉
|
||||
|
||||
It uses a library called [@extractus/article-extractor](https://www.npmjs.com/package/@extractus/article-extractor) to fetch and extract just the content.
|
||||
|
||||
Then with [Astro](https://astro.build), we can server-side render the page so your browser only gets clean HTML!
|
||||
|
||||
No nonsense. No headaches.
|
||||
|
||||
The project and the road map for features are all public on my [GitHub](https://github.com/ayoayco/cozy-reader)
|
||||
|
||||
## Cozy Features
|
||||
|
||||
Right now, it successfully extracts the content and delivers a clean page to your browser.
|
||||
|
||||
I'm working toward bringing the following in the coming weeks:
|
||||
1. Save favorites to a library
|
||||
2. Offline access
|
||||
3. Smart Insights about the article
|
||||
4. Easier usage (browser extensions or apps?)
|
||||
|
||||
## Coziest Usage
|
||||
|
||||
The most convenient way to use it right now is through what we call a browser bookmarklet.
|
||||
|
||||
Basically you can have a button there beside your other bookmarks that will open the current page in Cozy.
|
||||
|
||||
You can create this new bookmark titled 'Get cozy!' and put the following as value for the URL:
|
||||
|
||||
```js
|
||||
javascript:(function(){ window.open('https://cozy.ayco.io/?url=%27 + window.location.href, %27_self%27); })();
|
||||
```
|
||||
|
||||
This is possible on all major browsers, including Safari on iOS (where I personally use this often). Some screenshots:
|
||||
|
||||
| Firefox | Chrome |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
## Join the Project!
|
||||
|
||||
I'm sure this looks very simple, but I think this is the most exciting hobby project I've started yet.
|
||||
|
||||
There's a lot that happened and a lot of problems could have been avoided if people were equipped to assess the content they find online.
|
||||
|
||||
I think there's lots of good a simple tool could bring if it allows users to cut-through all the distractions and are presented with unbiased and accurate information.
|
||||
|
||||
This project is a groundwork for this experience.
|
||||
|
||||
Let's build the web we want! 🧸
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { defineCollection, z } from 'astro:content'
|
||||
|
||||
const blog = defineCollection({
|
||||
type: 'content',
|
||||
// Type-check frontmatter using a schema
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
// Transform string to Date object
|
||||
pubDate: z.coerce.date(),
|
||||
updatedDate: z.coerce.date().optional(),
|
||||
heroImage: z.string().optional(),
|
||||
}),
|
||||
})
|
||||
|
||||
export const collections = { blog }
|
||||
2
demo/src/env.d.ts
vendored
2
demo/src/env.d.ts
vendored
|
|
@ -1,2 +0,0 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
/**
|
||||
* Note: @ayco/astro-sw integration injects variables `__prefix`, `__version`, & `__assets`
|
||||
* -- find usage in package readme; `astro.config.mjs` integrations
|
||||
* @see https://ayco.io/n/@ayco/astro-sw
|
||||
*/
|
||||
const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}`
|
||||
const addResourcesToCache = async (resources) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
console.log('adding resources to cache...', resources)
|
||||
await cache.addAll(resources)
|
||||
}
|
||||
|
||||
console.log('test log', { hello: 'world' })
|
||||
|
||||
const putInCache = async (request, response) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
console.log('adding one response to cache...', request)
|
||||
await cache.put(request, response)
|
||||
}
|
||||
|
||||
const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
|
||||
// First try to get the resource from the cache
|
||||
const responseFromCache = await caches.match(request)
|
||||
if (responseFromCache) {
|
||||
return responseFromCache
|
||||
}
|
||||
|
||||
// Next try to use the preloaded response, if it's there
|
||||
// NOTE: Chrome throws errors regarding preloadResponse, see:
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=1420515
|
||||
// https://github.com/mdn/dom-examples/issues/145
|
||||
// To avoid those errors, remove or comment out this block of preloadResponse
|
||||
// code along with enableNavigationPreload() and the "activate" listener.
|
||||
const preloadResponse = await preloadResponsePromise
|
||||
if (preloadResponse) {
|
||||
console.info('using preload response', preloadResponse)
|
||||
putInCache(request, preloadResponse.clone())
|
||||
return preloadResponse
|
||||
}
|
||||
|
||||
// Next try to get the resource from the network
|
||||
try {
|
||||
const responseFromNetwork = await fetch(request.clone())
|
||||
// response may be used only once
|
||||
// we need to save clone to put one copy in cache
|
||||
// and serve second one
|
||||
putInCache(request, responseFromNetwork.clone())
|
||||
return responseFromNetwork
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
} catch (error) {
|
||||
const fallbackResponse = await caches.match(fallbackUrl)
|
||||
if (fallbackResponse) {
|
||||
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' },
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const enableNavigationPreload = async () => {
|
||||
if (self.registration.navigationPreload) {
|
||||
// Enable navigation preloads!
|
||||
await self.registration.navigationPreload.enable()
|
||||
}
|
||||
}
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
console.log('activating...', event)
|
||||
event.waitUntil(enableNavigationPreload())
|
||||
})
|
||||
|
||||
self.addEventListener('install', (event) => {
|
||||
console.log('installing...', event)
|
||||
event.waitUntil(addResourcesToCache(__assets ?? []))
|
||||
})
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
console.log('fetch happened', event.request)
|
||||
event.respondWith(
|
||||
cacheFirst({
|
||||
request: event.request,
|
||||
preloadResponsePromise: event.preloadResponse,
|
||||
fallbackUrl: './',
|
||||
})
|
||||
)
|
||||
})
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
404
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
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 />
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
blog index
|
||||
|
||||
<a href="/blog/building-a-cozy-web">post</a>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
exclude
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
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>
|
||||
</head>
|
||||
<body> Hello </body>
|
||||
</html>
|
||||
<!-- <Fragment set:html={content} /> -->
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import globals from 'globals'
|
||||
import eslintPluginAstro from 'eslint-plugin-astro'
|
||||
import jsPlugin from '@eslint/js'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import astroSwGlobals from '@ayco/astro-sw/globals'
|
||||
import astroParser from 'astro-eslint-parser'
|
||||
|
||||
export default [
|
||||
{
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
...astroSwGlobals,
|
||||
},
|
||||
},
|
||||
},
|
||||
// add more generic rule sets here, such as:
|
||||
jsPlugin.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
...eslintPluginAstro.configs['recommended'],
|
||||
...eslintPluginAstro.configs['jsx-a11y-recommended'],
|
||||
{
|
||||
ignores: [
|
||||
'**/dist/*',
|
||||
'**/.output/*',
|
||||
'**/.astro/*',
|
||||
'**/node_modules/*',
|
||||
'**/env.d.ts',
|
||||
],
|
||||
},
|
||||
{
|
||||
files: ['**/*.astro'],
|
||||
languageOptions: {
|
||||
parser: astroParser,
|
||||
parserOptions: {
|
||||
parser: tseslint.parser,
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
93
example_sw.js
Normal file
93
example_sw.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
/**
|
||||
* Note: @ayco/astro-sw integration injects variables `__prefix`, `__version`, & `__assets`
|
||||
* -- find usage in package readme; `astro.config.mjs` integrations
|
||||
* @see https://ayco.io/n/@ayco/astro-sw
|
||||
*/
|
||||
const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}`
|
||||
const addResourcesToCache = async (resources) => {
|
||||
const cache = await caches.open(cacheName);
|
||||
console.log('adding resources to cache...', resources)
|
||||
await cache.addAll(resources);
|
||||
};
|
||||
|
||||
const putInCache = async (request, response) => {
|
||||
const cache = await caches.open(cacheName);
|
||||
console.log('adding one response to cache...', request)
|
||||
await cache.put(request, response);
|
||||
};
|
||||
|
||||
const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
|
||||
// First try to get the resource from the cache
|
||||
const responseFromCache = await caches.match(request);
|
||||
if (responseFromCache) {
|
||||
return responseFromCache;
|
||||
}
|
||||
|
||||
// Next try to use the preloaded response, if it's there
|
||||
// NOTE: Chrome throws errors regarding preloadResponse, see:
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=1420515
|
||||
// https://github.com/mdn/dom-examples/issues/145
|
||||
// To avoid those errors, remove or comment out this block of preloadResponse
|
||||
// code along with enableNavigationPreload() and the "activate" listener.
|
||||
const preloadResponse = await preloadResponsePromise;
|
||||
if (preloadResponse) {
|
||||
console.info('using preload response', preloadResponse);
|
||||
putInCache(request, preloadResponse.clone());
|
||||
return preloadResponse;
|
||||
}
|
||||
|
||||
// Next try to get the resource from the network
|
||||
try {
|
||||
const responseFromNetwork = await fetch(request.clone());
|
||||
// response may be used only once
|
||||
// we need to save clone to put one copy in cache
|
||||
// and serve second one
|
||||
putInCache(request, responseFromNetwork.clone());
|
||||
return responseFromNetwork;
|
||||
} catch (error) {
|
||||
const fallbackResponse = await caches.match(fallbackUrl);
|
||||
if (fallbackResponse) {
|
||||
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' },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const enableNavigationPreload = async () => {
|
||||
if (self.registration.navigationPreload) {
|
||||
// Enable navigation preloads!
|
||||
await self.registration.navigationPreload.enable();
|
||||
}
|
||||
};
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
console.log('activating...', event)
|
||||
event.waitUntil(enableNavigationPreload());
|
||||
});
|
||||
|
||||
self.addEventListener('install', (event) => {
|
||||
console.log('installing...', event)
|
||||
event.waitUntil(
|
||||
addResourcesToCache([
|
||||
'./',
|
||||
...(__assets ?? [])
|
||||
])
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
console.log('fetch happened', event.request)
|
||||
event.respondWith(
|
||||
cacheFirst({
|
||||
request: event.request,
|
||||
preloadResponsePromise: event.preloadResponse,
|
||||
fallbackUrl: './',
|
||||
})
|
||||
);
|
||||
});
|
||||
114
index.js
Normal file
114
index.js
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import { readFile, writeFile } from 'node:fs/promises';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import path from 'node:path';
|
||||
import { randomUUID } from "node:crypto";
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* path: string,
|
||||
* assetCachePrefix?: string,
|
||||
* assetCacheVersionID?: string,
|
||||
* onInstalling?: Function,
|
||||
* onInstalled?: Function,
|
||||
* onActive?: Function,
|
||||
* onError?: Function
|
||||
* }} ServiceWorkerConfig
|
||||
* @typedef {import('astro').AstroIntegration} AstroIntegration
|
||||
*/
|
||||
|
||||
/**
|
||||
* Accepts configuration options with service worker path
|
||||
* and injects needed variables such as `__assets` generated by Astro
|
||||
* @param {ServiceWorkerConfig} config
|
||||
* @returns {AstroIntegration}
|
||||
*/
|
||||
export default function serviceWorker(config) {
|
||||
let {
|
||||
assetCachePrefix,
|
||||
assetCacheVersionID = randomUUID(),
|
||||
path: serviceWorkerPath,
|
||||
/**
|
||||
* TODO: use registration hooks callbacks
|
||||
*/
|
||||
// onInstalling,
|
||||
// onInstalled,
|
||||
// onActive,
|
||||
// onError,
|
||||
// onUnsupported,
|
||||
} = config;
|
||||
|
||||
/**
|
||||
* @type {Array<string>}
|
||||
*/
|
||||
let assets = [];
|
||||
|
||||
const registrationScript = `const registerSW = async () => {
|
||||
if ("serviceWorker" in navigator) {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.register("/sw.js", {
|
||||
scope: "/",
|
||||
});
|
||||
if (registration.installing) {
|
||||
// installingFn();
|
||||
console.log('[astro-sw] Installing...')
|
||||
} else if (registration.waiting) {
|
||||
// installedFn();
|
||||
console.log('[astro-sw] Installed...')
|
||||
} else if (registration.active) {
|
||||
// activeFn();
|
||||
console.log('[astro-sw] Active...')
|
||||
}
|
||||
} catch (error) {
|
||||
// onError(error);
|
||||
console.error('[astro-sw] ERR', error)
|
||||
}
|
||||
} else {
|
||||
// onUnsupported();
|
||||
console.log('[astro-sw] Browser does not support Service Worker')
|
||||
}
|
||||
}
|
||||
|
||||
registerSW();`
|
||||
|
||||
return {
|
||||
'name': 'astro-sw',
|
||||
'hooks': {
|
||||
'astro:config:setup': ({injectScript}) => {
|
||||
injectScript('page', registrationScript);
|
||||
},
|
||||
'astro:build:ssr': ({ manifest }) => {
|
||||
assets = manifest.assets.filter(ass => !ass.includes('sw.js'))
|
||||
},
|
||||
'astro:build:done': async ({ dir, routes }) => {
|
||||
const outFile = fileURLToPath(new URL('./sw.js', dir));
|
||||
const __dirname = path.resolve(path.dirname('.'));
|
||||
const swPath = path.join(__dirname, serviceWorkerPath ?? '');
|
||||
let originalScript;
|
||||
|
||||
const _routes = routes
|
||||
.filter(({isIndex}) => isIndex)
|
||||
.map(({pathname}) => pathname)
|
||||
?? [];
|
||||
|
||||
assets = [...new Set([...assets, ..._routes])]
|
||||
|
||||
console.log('>>> assets', assets);
|
||||
|
||||
try {
|
||||
console.log('[astro-sw] Using service worker:', swPath);
|
||||
originalScript = await readFile(swPath);
|
||||
} catch {
|
||||
throw Error('[astro-sw] ERROR: service worker script not found!', swPath)
|
||||
}
|
||||
const assetsDeclaration = `const __assets = ${JSON.stringify(assets)};\n`;
|
||||
const versionDeclaration = `const __version = ${JSON.stringify(assetCacheVersionID)};\n`;
|
||||
const prefixDeclaration = `const __prefix = ${JSON.stringify(assetCachePrefix)};\n`;
|
||||
|
||||
await writeFile(
|
||||
outFile,
|
||||
assetsDeclaration + versionDeclaration + prefixDeclaration + originalScript
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
54
package.json
54
package.json
|
|
@ -1,37 +1,35 @@
|
|||
{
|
||||
"name": "astro-sw-monorepo",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "> [!NOTE] > This project moved to [SourceHut](https://git.sr.ht/~ayoayco/astro-sw).",
|
||||
"scripts": {
|
||||
"format": "prettier . --write",
|
||||
"lint": "eslint . --config eslint.config.mjs --cache",
|
||||
"check": "npm run format && npm run lint",
|
||||
"prepare": "husky",
|
||||
"test": "pnpm -F @ayco/astro-sw test",
|
||||
"build": "pnpm -F @ayco/astro-sw build",
|
||||
"demo": "pnpm run build && pnpm -F demo build:preview"
|
||||
},
|
||||
"name": "@ayco/astro-sw",
|
||||
"version": "0.2.0",
|
||||
"description": "Simple Astro integration to use your own authored service-worker",
|
||||
"homepage": "https://github.com/ayoayco/astro-sw",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@git.sr.ht/~ayoayco/astro-sw.git"
|
||||
"url": "https://github.com/ayoayco/astro-sw"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./index.js"
|
||||
}
|
||||
},
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"withastro",
|
||||
"perf"
|
||||
],
|
||||
"author": "Ayo Ayco",
|
||||
"license": "MIT",
|
||||
"homepage": "https://ayco.io/n/@ayco/astro-sw#readme",
|
||||
"devDependencies": {
|
||||
"@ayco/astro-sw": "workspace:*",
|
||||
"@eslint/js": "^9.24.0",
|
||||
"eslint": "^9.24.0",
|
||||
"eslint-plugin-astro": "^1.3.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||
"globals": "^16.0.0",
|
||||
"husky": "^9.1.7",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"tsup": "^8.4.0",
|
||||
"typescript": "^5.8.3",
|
||||
"typescript-eslint": "^8.29.0",
|
||||
"vitest": "^3.1.1"
|
||||
"@astrojs/node": "^8.3.2",
|
||||
"astro": "^4.13.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
{
|
||||
"name": "@ayco/astro-sw",
|
||||
"version": "0.9.0",
|
||||
"description": "Use your own authored service worker with Astro",
|
||||
"homepage": "https://ayco.io/n/@ayco/astro-sw",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.sr.ht/~ayoayco/astro-sw"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/index.js"
|
||||
},
|
||||
"./globals": {
|
||||
"types": "./dist/eslint/globals.d.ts",
|
||||
"default": "./dist/eslint/globals.js"
|
||||
},
|
||||
"./presets": {
|
||||
"types": "./dist/presets/index.d.ts",
|
||||
"default": "./dist/presets/index.js"
|
||||
},
|
||||
"./presets/*": {
|
||||
"types": "./dist/presets/*/index.d.ts",
|
||||
"default": "./dist/presets/*/index.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"main": "./astro-sw.js",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src/index.ts src/presets/index.ts src/presets/**/index.ts src/eslint/globals.ts --format esm --dts --clean",
|
||||
"test": "vitest run",
|
||||
"version:patch": "npm version patch",
|
||||
"version:minor": "npm version minor",
|
||||
"version:major": "npm version major"
|
||||
},
|
||||
"keywords": [
|
||||
"withastro",
|
||||
"perf"
|
||||
],
|
||||
"author": "Ayo Ayco",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"astro": "^5.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export default {
|
||||
__prefix: false,
|
||||
__version: false,
|
||||
__assets: false,
|
||||
}
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
/**
|
||||
* @license MIT <https://opensource.org/licenses/MIT>
|
||||
* @author Ayo Ayco <https://ayo.ayco.io>
|
||||
*/
|
||||
|
||||
import { readFile, writeFile, readdir, unlink } from 'node:fs/promises'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { resolve, dirname, join } from 'node:path'
|
||||
import { build } from 'esbuild'
|
||||
import type { AstroServiceWorkerConfig } from './types'
|
||||
import type { AstroIntegration } from 'astro'
|
||||
|
||||
const ASTROSW = '@ayco/astro-sw'
|
||||
|
||||
/**
|
||||
* TODO: update JSDoc
|
||||
* Accepts configuration options with service worker path
|
||||
* and injects needed variables such as `__assets` generated by Astro
|
||||
*/
|
||||
export default function serviceWorker(
|
||||
// TODO handle options undefined
|
||||
options?: AstroServiceWorkerConfig
|
||||
): AstroIntegration {
|
||||
const {
|
||||
presets,
|
||||
assetCachePrefix = ASTROSW,
|
||||
assetCacheVersionID = '0',
|
||||
path: serviceWorkerPath = undefined,
|
||||
customRoutes = [],
|
||||
excludeRoutes = [],
|
||||
logAssets = false,
|
||||
esbuild = {},
|
||||
registrationHooks = {},
|
||||
} = options ?? {}
|
||||
|
||||
const {
|
||||
installing: installingFn = () => {},
|
||||
waiting: waitingFn = () => {},
|
||||
active: activeFn = () => {},
|
||||
error: errorFn = () => {},
|
||||
unsupported: unsupportedFn = () => {},
|
||||
afterRegistration: afterRegistrationFn = () => {},
|
||||
} = registrationHooks
|
||||
|
||||
// TODO use presets
|
||||
console.log(presets)
|
||||
|
||||
/**
|
||||
* @type {Array<string>}
|
||||
*/
|
||||
let manifestAssets: string[] = []
|
||||
|
||||
const registrationScript = `const registerSW = async () => {
|
||||
if ("serviceWorker" in navigator) {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.register("/sw.js", {
|
||||
scope: "/",
|
||||
});
|
||||
if (registration.installing) {
|
||||
(${installingFn.toString()})();
|
||||
} else if (registration.waiting) {
|
||||
(${waitingFn.toString()})();
|
||||
} else if (registration.active) {
|
||||
(${activeFn.toString()})();
|
||||
}
|
||||
|
||||
(${afterRegistrationFn.toString()})();
|
||||
} catch (error) {
|
||||
(${errorFn.toString()})(error);
|
||||
}
|
||||
} else {
|
||||
(${unsupportedFn.toString()})();
|
||||
}
|
||||
}
|
||||
|
||||
registerSW();`
|
||||
|
||||
// let output = 'static'
|
||||
const __dirname = resolve(dirname('.'))
|
||||
|
||||
return {
|
||||
name: ASTROSW,
|
||||
hooks: {
|
||||
'astro:config:setup': async ({ injectScript, command, logger }) => {
|
||||
if (!serviceWorkerPath || serviceWorkerPath === '') {
|
||||
// REQUIRED OPTION IS MISSING
|
||||
logger.error('Missing required path to service worker script')
|
||||
}
|
||||
// const transformedScript=await transform(registrationScript)
|
||||
|
||||
// output = _config.output
|
||||
if (command === 'build') {
|
||||
injectScript('page', registrationScript)
|
||||
}
|
||||
},
|
||||
'astro:config:done': async ({ injectTypes }) => {
|
||||
const injectedTypes = `
|
||||
declare const __assets: string[];
|
||||
declare const __version: string;
|
||||
declare const __prefix: string;`
|
||||
injectTypes({ filename: 'caching.d.ts', content: injectedTypes })
|
||||
},
|
||||
'astro:build:ssr': ({ manifest }) => {
|
||||
manifestAssets = manifest.assets
|
||||
},
|
||||
'astro:build:done': async ({
|
||||
dir,
|
||||
assets: astroAssets,
|
||||
pages,
|
||||
logger,
|
||||
}) => {
|
||||
const outfile = fileURLToPath(new URL('./sw.js', dir))
|
||||
const swPath =
|
||||
serviceWorkerPath && serviceWorkerPath !== ''
|
||||
? join(__dirname, serviceWorkerPath)
|
||||
: undefined
|
||||
let originalScript
|
||||
|
||||
const _publicFiles = (
|
||||
(await readdir(dir, { withFileTypes: true })) ?? []
|
||||
)
|
||||
.filter((dirent) => dirent.isFile())
|
||||
.map((dirent) => `/${dirent.name}`)
|
||||
|
||||
const _assets = Array.from(astroAssets.keys())
|
||||
.filter((key) => !key.includes('[...slug]'))
|
||||
.flatMap((key) => (key === '/' ? key : [key, `${key}/`]))
|
||||
|
||||
const _pages =
|
||||
pages
|
||||
.filter(({ pathname }) => pathname !== '')
|
||||
.map(({ pathname }) => `/${pathname}`) ?? []
|
||||
|
||||
const _pagesWithoutEndSlash =
|
||||
pages
|
||||
.filter(({ pathname }) => pathname !== '')
|
||||
.map(({ pathname }) => {
|
||||
const lastChar = pathname.slice(-1)
|
||||
const len = pathname.length
|
||||
return lastChar === '/'
|
||||
? `/${pathname.slice(0, len - 1)}`
|
||||
: `/${pathname}`
|
||||
})
|
||||
.filter((pathname) => pathname !== '') ?? []
|
||||
|
||||
const _excludeRoutes = [
|
||||
...excludeRoutes,
|
||||
...excludeRoutes.map((route) => `${route}/`),
|
||||
]
|
||||
|
||||
const __assets = [
|
||||
...new Set([
|
||||
...manifestAssets,
|
||||
..._assets,
|
||||
..._pages,
|
||||
..._pagesWithoutEndSlash,
|
||||
...customRoutes,
|
||||
..._publicFiles,
|
||||
]),
|
||||
].filter(
|
||||
(asset) =>
|
||||
!!asset &&
|
||||
asset !== '' &&
|
||||
!asset.includes('404') &&
|
||||
!asset.includes('index.html') &&
|
||||
!_excludeRoutes.includes(asset)
|
||||
)
|
||||
|
||||
if (logAssets) {
|
||||
logger.info(
|
||||
`${__assets.length} assets for caching: \n ▶ ${__assets.toString().replaceAll(',', '\n ▶ ')}\n`
|
||||
)
|
||||
} else {
|
||||
logger.info(`${__assets.length} assets for caching.`)
|
||||
}
|
||||
|
||||
try {
|
||||
logger.info(`Using service worker in path: ${swPath}`)
|
||||
// @ts-expect-error undefined error is caught via try-catch
|
||||
originalScript = await readFile(swPath)
|
||||
} catch (err: unknown) {
|
||||
logger.error(JSON.stringify(err))
|
||||
if (!swPath) {
|
||||
logger.error(`
|
||||
|
||||
[${ASTROSW}] ERR: The 'path' option is required!
|
||||
[${ASTROSW}] INFO: Please see service worker options in https://ayco.io/gh/astro-sw#readme
|
||||
`)
|
||||
}
|
||||
}
|
||||
|
||||
const assetsDeclaration = `const __assets = ${JSON.stringify(__assets)};\n`
|
||||
const versionDeclaration = `const __version = ${JSON.stringify(assetCacheVersionID)};\n`
|
||||
const prefixDeclaration = `const __prefix = ${JSON.stringify(assetCachePrefix)};\n`
|
||||
|
||||
const tempFile = `${swPath}.tmp.ts`
|
||||
|
||||
try {
|
||||
await writeFile(
|
||||
tempFile,
|
||||
assetsDeclaration +
|
||||
versionDeclaration +
|
||||
prefixDeclaration +
|
||||
originalScript,
|
||||
{ flag: 'w+' }
|
||||
)
|
||||
} catch (err) {
|
||||
logger.error(JSON.stringify(err))
|
||||
}
|
||||
|
||||
try {
|
||||
await build({
|
||||
bundle: true,
|
||||
...esbuild,
|
||||
outfile,
|
||||
platform: 'browser',
|
||||
entryPoints: [tempFile],
|
||||
})
|
||||
} catch (err) {
|
||||
logger.error(JSON.stringify(err))
|
||||
}
|
||||
|
||||
// remove temp file
|
||||
try {
|
||||
await unlink(tempFile)
|
||||
} catch (err) {
|
||||
logger.error(JSON.stringify(err))
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { AstroServiceWorkerPreset } from '../../types'
|
||||
|
||||
export const activateFn: AstroServiceWorkerPreset['activate'] = async ({
|
||||
cacheName,
|
||||
}) => {
|
||||
const allowCacheNames = [cacheName]
|
||||
const allCaches = await caches.keys()
|
||||
allCaches.forEach((key) => {
|
||||
if (!allowCacheNames.includes(key)) {
|
||||
console.info('Deleting old cache', key)
|
||||
caches.delete(key)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default activateFn
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { AstroServiceWorkerPreset } from '../../types'
|
||||
import activate from './activate'
|
||||
|
||||
export const deleteOldCaches: () => AstroServiceWorkerPreset = () => ({
|
||||
activate,
|
||||
})
|
||||
|
||||
export default deleteOldCaches
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { staleWhileRevalidate } from './stale-while-revalidate'
|
||||
export { deleteOldCaches } from './delete-old-caches'
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import { AstroServiceWorkerPreset } from '../../types'
|
||||
|
||||
export const fetchFn: AstroServiceWorkerPreset['fetch'] = ({
|
||||
event,
|
||||
cacheName,
|
||||
}) => {
|
||||
console.info('fetch happened', { data: event })
|
||||
|
||||
event.respondWith(
|
||||
cacheAndRevalidate(
|
||||
{
|
||||
request: event.request,
|
||||
fallbackUrl: './',
|
||||
},
|
||||
cacheName
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export default fetchFn
|
||||
|
||||
// @ts-expect-error TODO fix types
|
||||
const putInCache = async (request, response, cacheName) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
|
||||
if (response.ok) {
|
||||
console.info('adding one response to cache...', request.url)
|
||||
|
||||
// if exists, replace
|
||||
cache.keys().then((keys) => {
|
||||
if (keys.includes(request)) {
|
||||
cache.delete(request)
|
||||
}
|
||||
})
|
||||
|
||||
cache.put(request, response)
|
||||
}
|
||||
}
|
||||
|
||||
const cacheAndRevalidate = async (
|
||||
// @ts-expect-error TODO fix types
|
||||
{ request, fallbackUrl },
|
||||
cacheName: string
|
||||
) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
|
||||
// Try get the resource from the cache
|
||||
const responseFromCache = await cache.match(request)
|
||||
if (responseFromCache) {
|
||||
console.info('using cached response...', responseFromCache.url)
|
||||
// get network response for revalidation of cached assets
|
||||
fetch(request.clone())
|
||||
.then((responseFromNetwork) => {
|
||||
if (responseFromNetwork) {
|
||||
console.info('fetched updated resource...', responseFromNetwork.url)
|
||||
putInCache(request, responseFromNetwork.clone(), cacheName)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.info('failed to fetch updated resource', error)
|
||||
})
|
||||
|
||||
return responseFromCache
|
||||
}
|
||||
|
||||
try {
|
||||
// Try to get the resource from the network for 5 seconds
|
||||
const responseFromNetwork = await fetch(request.clone())
|
||||
// response may be used only once
|
||||
// we need to save clone to put one copy in cache
|
||||
// and serve second one
|
||||
putInCache(request, responseFromNetwork.clone(), cacheName)
|
||||
console.info('using network response', responseFromNetwork.url)
|
||||
return responseFromNetwork
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
} catch (error) {
|
||||
// Try the fallback
|
||||
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' },
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
/**
|
||||
* preset for stale-while-revalidate caching strategy
|
||||
*/
|
||||
|
||||
import { AstroServiceWorkerPreset } from '../../types'
|
||||
import install from './install'
|
||||
import fetch from './fetch'
|
||||
|
||||
export const staleWhileRevalidate: () => AstroServiceWorkerPreset = () => ({
|
||||
install,
|
||||
fetch,
|
||||
})
|
||||
|
||||
export default staleWhileRevalidate
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { AstroServiceWorkerPreset } from '../../types'
|
||||
|
||||
declare const self: ServiceWorkerGlobalScope
|
||||
|
||||
export const installFn: AstroServiceWorkerPreset['install'] = ({
|
||||
event,
|
||||
routes,
|
||||
cacheName,
|
||||
}) => {
|
||||
console.info('installing service worker...')
|
||||
self.skipWaiting() // go straight to activate
|
||||
|
||||
event.waitUntil(addResourcesToCache(routes ?? [], cacheName))
|
||||
}
|
||||
|
||||
// @ts-expect-error TODO fix types
|
||||
const addResourcesToCache = async (resources, cacheName: string) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
console.info('adding resources to cache...', 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',
|
||||
{
|
||||
resources,
|
||||
error,
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default installFn
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import type { BuildOptions } from 'esbuild'
|
||||
|
||||
export type AstroServiceWorkerPreset = {
|
||||
activate?: (options: { event: ExtendableEvent; cacheName: string }) => void
|
||||
install?: (options: {
|
||||
event: ExtendableEvent
|
||||
routes: string[]
|
||||
cacheName: string
|
||||
}) => void
|
||||
fetch?: (options: { event: FetchEvent; cacheName: string }) => void
|
||||
}
|
||||
|
||||
export type AstroServiceWorkerConfig = {
|
||||
path?: string
|
||||
presets?: AstroServiceWorkerPreset[]
|
||||
assetCachePrefix?: string
|
||||
assetCacheVersionID?: string
|
||||
customRoutes?: string[]
|
||||
excludeRoutes?: string[]
|
||||
logAssets?: true
|
||||
esbuild?: BuildOptions
|
||||
registrationHooks?: {
|
||||
installing?: () => void
|
||||
waiting?: () => void
|
||||
active?: () => void
|
||||
error?: (error: Error) => void
|
||||
unsupported?: () => void
|
||||
afterRegistration?: () => void
|
||||
}
|
||||
experimental?: {
|
||||
strategy?: {
|
||||
fetchFn: () => void
|
||||
installFn: () => void
|
||||
activateFn: () => void
|
||||
waitFn: () => void
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { expect } from 'vitest'
|
||||
import { test } from 'vitest'
|
||||
|
||||
test('astro-sw', () => {
|
||||
expect(true).toBeTruthy()
|
||||
})
|
||||
5934
pnpm-lock.yaml
5934
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -1,3 +0,0 @@
|
|||
packages:
|
||||
- "package"
|
||||
- "demo"
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/**
|
||||
* @see https://prettier.io/docs/en/configuration.html
|
||||
* @type {import("prettier").Config}
|
||||
*/
|
||||
const config = {
|
||||
trailingComma: 'es5',
|
||||
tabWidth: 2,
|
||||
semi: false,
|
||||
singleQuote: true,
|
||||
plugins: ['prettier-plugin-astro'],
|
||||
overrides: [
|
||||
{
|
||||
files: '*.astro',
|
||||
options: {
|
||||
parser: 'astro',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export default config
|
||||
125
sample-sw.js
125
sample-sw.js
|
|
@ -1,125 +0,0 @@
|
|||
/**
|
||||
* 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 cleanOldCaches = async () => {
|
||||
const allowCacheNames = ['cozy-reader', cacheName]
|
||||
const allCaches = await caches.keys()
|
||||
allCaches.forEach((key) => {
|
||||
if (!allowCacheNames.includes(key)) {
|
||||
console.info('Deleting old cache', key)
|
||||
caches.delete(key)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addResourcesToCache = async (resources) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
console.info('adding resources to cache...', 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',
|
||||
{
|
||||
resources,
|
||||
error,
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const putInCache = async (request, response) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
|
||||
if (response.ok) {
|
||||
console.info('adding one response to cache...', request.url)
|
||||
|
||||
// if exists, replace
|
||||
cache.keys().then((keys) => {
|
||||
if (keys.includes(request)) {
|
||||
cache.delete(request)
|
||||
}
|
||||
})
|
||||
|
||||
cache.put(request, response)
|
||||
}
|
||||
}
|
||||
|
||||
const cacheAndRevalidate = async ({ request, fallbackUrl }) => {
|
||||
const cache = await caches.open(cacheName)
|
||||
|
||||
// Try get the resource from the cache
|
||||
const responseFromCache = await cache.match(request)
|
||||
if (responseFromCache) {
|
||||
console.info('using cached response...', responseFromCache.url)
|
||||
// get network response for revalidation of cached assets
|
||||
fetch(request.clone())
|
||||
.then((responseFromNetwork) => {
|
||||
if (responseFromNetwork) {
|
||||
console.info('fetched updated resource...', responseFromNetwork.url)
|
||||
putInCache(request, responseFromNetwork.clone())
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.info('failed to fetch updated resource', error)
|
||||
})
|
||||
|
||||
return responseFromCache
|
||||
}
|
||||
|
||||
try {
|
||||
// Try to get the resource from the network for 5 seconds
|
||||
const responseFromNetwork = await fetch(request.clone())
|
||||
// response may be used only once
|
||||
// we need to save clone to put one copy in cache
|
||||
// and serve second one
|
||||
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 the fallback
|
||||
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(
|
||||
cacheAndRevalidate({
|
||||
request: event.request,
|
||||
fallbackUrl: './',
|
||||
})
|
||||
)
|
||||
})
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
3
src/pages/blog/index.astro
Normal file
3
src/pages/blog/index.astro
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
---
|
||||
blog index
|
||||
14
src/pages/index.astro
Normal file
14
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hello</title>
|
||||
</head>
|
||||
<body>
|
||||
Hello
|
||||
</body>
|
||||
</html>
|
||||
<!-- <Fragment set:html={content} /> -->
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||
"module": "ESNext" /* Specify what module code is generated. */,
|
||||
"moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
|
||||
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
|
||||
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
"lib": ["WebWorker", "ES2021.String"]
|
||||
},
|
||||
"exclude": ["./dist/**/*"]
|
||||
}
|
||||
Loading…
Reference in a new issue