webworker #1
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"typescript.tsdk": "node_modules/typescript/lib"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
|
|
@ -16,10 +16,11 @@
|
||||||
"@sveltejs/adapter-auto": "next",
|
"@sveltejs/adapter-auto": "next",
|
||||||
"@sveltejs/adapter-node": "^1.0.0-next.78",
|
"@sveltejs/adapter-node": "^1.0.0-next.78",
|
||||||
"@sveltejs/kit": "next",
|
"@sveltejs/kit": "next",
|
||||||
|
"@types/serviceworker": "^0.0.48",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||||
"@typescript-eslint/parser": "^5.27.0",
|
"@typescript-eslint/parser": "^5.27.0",
|
||||||
"autoprefixer": "^10.4.7",
|
"autoprefixer": "^10.4.7",
|
||||||
"eslint": "^8.16.0",
|
"eslint": "^8.19.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-svelte3": "^4.0.0",
|
"eslint-plugin-svelte3": "^4.0.0",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.14",
|
||||||
|
|
@ -30,7 +31,10 @@
|
||||||
"svelte-preprocess": "^4.10.7",
|
"svelte-preprocess": "^4.10.7",
|
||||||
"tailwindcss": "^3.1.4",
|
"tailwindcss": "^3.1.4",
|
||||||
"tslib": "^2.3.1",
|
"tslib": "^2.3.1",
|
||||||
"typescript": "^4.7.2"
|
"typescript": "^4.7.4"
|
||||||
},
|
},
|
||||||
"type": "module"
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"svelte-language-server": "^0.14.29"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,8 @@ module.exports = {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
|
plugins: [
|
||||||
|
require('tailwindcss'),
|
||||||
|
require('autoprefixer'),
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,11 @@
|
||||||
|
|
||||||
<h1
|
<h1
|
||||||
class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
|
class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
|
||||||
>
|
>Welcome to my website</h1>
|
||||||
Welcome to my website
|
<!-->
|
||||||
</h1>
|
|
||||||
<br class="hidden lg:block" />
|
<br class="hidden lg:block" />
|
||||||
<p class="font-roboto_slab text-center lg:text-2xl text-md">The modern web meets 2000</p>
|
</!-->
|
||||||
|
<p class="font-roboto_slab text-center lg:text-2xl text-md lg:mt-5">The modern web meets 2000</p>
|
||||||
<hr class="border-black" />
|
<hr class="border-black" />
|
||||||
<br />
|
<br />
|
||||||
<div class="md:text-center lg:px-40">
|
<div class="md:text-center lg:px-40">
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,20 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="grid grid-cols-7 grid-rows-1 sm:grid-rows-1 gap-y-2 mt-2 sm:mt-4 sm:pl-4 align-middle h-24 md:h-16">
|
<div class="grid grid-cols-7 grid-rows-1 sm:grid-rows-1 gap-y-2 mt-2 sm:mt-4 sm:pl-4 align-middle h-24 md:h-16">
|
||||||
<div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row">
|
<div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row items-start">
|
||||||
<div class="h-full">
|
<div class="h-full sm:aspect-square">
|
||||||
<img
|
<img
|
||||||
class="hidden sm:block h-full my-auto"
|
class="hidden sm:block h-full my-auto aspect-square"
|
||||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
|
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
|
||||||
alt="Icon"
|
alt="Icon"
|
||||||
/>
|
/>
|
||||||
<div class="block sm:hidden ml-2 mt-4">
|
<div class="block sm:hidden ml-2 mt-4 w-fit">
|
||||||
<Hamburger />
|
<Hamburger />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full sm:w-auto sm:pl-5 sm:my-auto text-center mx-auto sm:mx-0 pr-9 sm:pr-0">
|
<div class="w-full sm:pl-5 sm:my-auto text-center sm:text-left sm:mx-0 pr-9 sm:pr-0">
|
||||||
<h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
|
<h1 class="text-2xl md:text-3xl font-medium">Internetica Galactica 2</h1>
|
||||||
<p class="h-min text-xs">Surviving the rewriting</p>
|
<p class="text-xs">Surviving the rewriting</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
|
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
export const prerender = true;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="text-center mt-10">
|
||||||
|
<h1 class="text-7xl">This page is not available offline</h1>
|
||||||
|
<br />
|
||||||
|
<a class="underline hover:underline-offset-2" href="/">Click here to go back</a>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
/* eslint-disable no-var */
|
||||||
|
import { build, files, version } from '$service-worker';
|
||||||
|
|
||||||
|
const worker = (self as unknown) as ServiceWorkerGlobalScope;
|
||||||
|
|
||||||
|
const FILES = `cache${version}`;
|
||||||
|
|
||||||
|
// build is an array of all files generated by the bundler
|
||||||
|
// files is an array of all files in the static dir
|
||||||
|
const to_cache = build.concat(files);
|
||||||
|
const staticAssets = new Set(to_cache);
|
||||||
|
|
||||||
|
worker.addEventListener("install", (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches
|
||||||
|
.open(FILES)
|
||||||
|
.then((cache) => cache.addAll(to_cache))
|
||||||
|
.then(() => {
|
||||||
|
worker.skipWaiting();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
worker.addEventListener("activate", (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.keys()
|
||||||
|
.then(async (keys) => {
|
||||||
|
// Delete old caches
|
||||||
|
for (const key of keys) {
|
||||||
|
if (key !== FILES) await caches.delete(key);
|
||||||
|
}
|
||||||
|
console.log("old caches deleted")
|
||||||
|
worker.clients.claim();
|
||||||
|
})
|
||||||
|
.then(() => console.log("Activated"))
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Fetch the asset from the network and store it in the cache
|
||||||
|
// Falls back to the cache if the user is offline
|
||||||
|
async function fetchAndCache(request: Request) {
|
||||||
|
const cache = await caches.open(`offline${version}`);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(request);
|
||||||
|
cache.put(request, response.clone());
|
||||||
|
return response;
|
||||||
|
} catch (err) { // if the user is offline, the request will fail
|
||||||
|
const response = await cache.match(request);
|
||||||
|
if (response) return response;
|
||||||
|
|
||||||
|
// if not in cache, throw error anyway
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
worker.addEventListener("fetch", (event) => {
|
||||||
|
if (event.request.method !== "GET") return;
|
||||||
|
|
||||||
|
console.log("fetch event intercepted")
|
||||||
|
|
||||||
|
// Firefox has not yet fixed this, so it needs to be excluded from this caching behavior
|
||||||
|
// https://web.dev/sw-range-requests/
|
||||||
|
// https://wpt.fyi/results/fetch/range/sw.https.window.html?label=master&label=experimental&aligned
|
||||||
|
if (navigator.userAgent.includes("Firefox/") && event.request.headers.has("range")) return;
|
||||||
|
|
||||||
|
const url = new URL(event.request.url);
|
||||||
|
|
||||||
|
// Don't try to cache protocols other than http/https
|
||||||
|
const isHttp = url.protocol.startsWith("http");
|
||||||
|
const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
|
||||||
|
const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
|
||||||
|
|
||||||
|
if (isHttp && !skipBecauseUncached) {
|
||||||
|
event.respondWith(
|
||||||
|
(async () => {
|
||||||
|
const cachedAsset = isStaticAsset && (await caches.match(event.request));
|
||||||
|
|
||||||
|
return cachedAsset || fetchAndCache(event.request);
|
||||||
|
})()
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"short_name": "Internetica Galactica 2",
|
||||||
|
"name": "Internetica Galactica 2",
|
||||||
|
"start_url": "/",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"background_color": "#FFAFCC",
|
||||||
|
"display": "standalone",
|
||||||
|
"scope": "/",
|
||||||
|
"theme_color": "#FFAFCC",
|
||||||
|
"description": "The modern web meets 2000"
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,12 @@
|
||||||
import adapter from '@sveltejs/adapter-node';
|
import adapter from '@sveltejs/adapter-node';
|
||||||
import preprocess from 'svelte-preprocess';
|
import sveltePreprocess from 'svelte-preprocess';
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: [
|
preprocess: [
|
||||||
preprocess({
|
sveltePreprocess({postcss: true})
|
||||||
postcss: true,
|
|
||||||
}),
|
|
||||||
],
|
],
|
||||||
kit: {
|
kit: {
|
||||||
adapter: adapter(),
|
adapter: adapter(),
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,6 @@
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"strict": true
|
"strict": true,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue