Merge pull request 'webworker' (#1) from webworker into main
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Reviewed-on: #1
This commit is contained in:
commit
f2b79c1f9b
|
|
@ -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-node": "^1.0.0-next.78",
|
||||
"@sveltejs/kit": "next",
|
||||
"@types/serviceworker": "^0.0.48",
|
||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||
"@typescript-eslint/parser": "^5.27.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^8.16.0",
|
||||
"eslint": "^8.19.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
|
|
@ -30,7 +31,10 @@
|
|||
"svelte-preprocess": "^4.10.7",
|
||||
"tailwindcss": "^3.1.4",
|
||||
"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: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5"
|
||||
>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">Music</p>
|
||||
<li>Hatsune Miku</li>
|
||||
<li>PinocchioP</li>
|
||||
<li>Mothy/Akuno-p</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">TV</p>
|
||||
<li>Game of Thrones</li>
|
||||
<li>Avatar the Last Airbender</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">VTubers</p>
|
||||
<li>Momosuzu Nene</li>
|
||||
<li>Amane Kanata</li>
|
||||
<li>Petra Gurin</li>
|
||||
<li>Ninomae Ina'nis</li>
|
||||
<li>Kson</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">Food</p>
|
||||
<li>Spaghetti</li>
|
||||
<li>Sushi</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
|
||||
<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"
|
||||
>
|
||||
Welcome to my website
|
||||
</h1>
|
||||
>Welcome to my website</h1>
|
||||
<!-->
|
||||
<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" />
|
||||
<br />
|
||||
<div class="md:text-center lg:px-40">
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
</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="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row">
|
||||
<div class="h-full">
|
||||
<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 sm:aspect-square">
|
||||
<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"
|
||||
alt="Icon"
|
||||
/>
|
||||
<div class="block sm:hidden ml-2 mt-4">
|
||||
<div class="block sm:hidden ml-2 mt-4 w-fit">
|
||||
<Hamburger />
|
||||
</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">
|
||||
<h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
|
||||
<p class="h-min text-xs">Surviving the rewriting</p>
|
||||
<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 font-medium">Internetica Galactica 2</h1>
|
||||
<p class="text-xs">Surviving the rewriting</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import Maincontent from '../components/misc/maincontent.svelte';
|
||||
import Content from '../components/about/content.svelte';
|
||||
import Sidebar from '../components/about/sidebar.svelte';
|
||||
import Likes from '../components/about/likes.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -15,36 +16,12 @@
|
|||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div class="px-5 sm:px-0 sm:pr-5 lg:pr-0 sm:mt-10 col-span-7 sm:col-span-2 md:col-span-4 lg:col-span-3 ">
|
||||
<div
|
||||
class="px-5 sm:px-0 sm:pr-5 lg:pr-0 sm:mt-10 col-span-7 sm:col-span-2 md:col-span-4 lg:col-span-3 "
|
||||
>
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<div class="px-2 col-span-7">
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5">
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">Music</p>
|
||||
<li>Hatsune Miku</li>
|
||||
<li>Amane Kanata</li>
|
||||
<li>Mothy/Akuno-p</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">TV</p>
|
||||
<li>Game of Thrones</li>
|
||||
<li>Avatar the Last Airbender</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">VTubers</p>
|
||||
<li>Momosuzu Nene</li>
|
||||
<li>Amane Kanata</li>
|
||||
<li>Petra Gurin</li>
|
||||
<li>Ninomae Ina'nis</li>
|
||||
</ul>
|
||||
<ul class="list-disc ml-4">
|
||||
<p class="font-bold">Food</p>
|
||||
<li>Spaghetti</li>
|
||||
<li>Steak!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Likes />
|
||||
</div>
|
||||
</Maincontent>
|
||||
|
|
|
|||
|
|
@ -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,109 @@
|
|||
/* eslint-disable no-var */
|
||||
import { build, files, version } from '$service-worker';
|
||||
|
||||
// Code mostly comes from: https://dev.to/100lvlmaster/create-a-pwa-with-sveltekit-svelte-a36
|
||||
// With some modifications done by someone in the comments
|
||||
|
||||
const worker = (self as unknown) as ServiceWorkerGlobalScope;
|
||||
const STATIC_CACHE_NAME = `cache${version}`
|
||||
const APP_CACHE_NAME = `cache${version}`;
|
||||
|
||||
// Hardcoded bunch of routes to always preemptively cache
|
||||
const routes = ["/", "/about"];
|
||||
|
||||
// Hardcoded list of other assets to always preemptively cache
|
||||
const custom_assets = [
|
||||
"https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap"
|
||||
];
|
||||
|
||||
// Adds the domain to the file path, making it a full name
|
||||
const addDomain = (assets: string[]) =>
|
||||
assets.map((f) => self.location.origin + f);
|
||||
|
||||
// build is an array of all files generated by the bundler
|
||||
// files is an array of all files in the static dir
|
||||
const ourAssets = addDomain([
|
||||
...files,
|
||||
...build,
|
||||
...routes
|
||||
]);
|
||||
|
||||
const to_cache = [...ourAssets, ...custom_assets]
|
||||
const staticAssets = new Set(to_cache);
|
||||
|
||||
worker.addEventListener("install", (event) => {
|
||||
event.waitUntil(
|
||||
caches
|
||||
.open(STATIC_CACHE_NAME)
|
||||
.then((cache) => {
|
||||
return 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 !== STATIC_CACHE_NAME && key !== APP_CACHE_NAME) 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(APP_CACHE_NAME);
|
||||
|
||||
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 = staticAssets.has(url.href);
|
||||
const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
|
||||
|
||||
if (isHttp && !skipBecauseUncached) {
|
||||
event.respondWith(
|
||||
(async () => {
|
||||
// always serve static files and bundler-generated assets from cache.
|
||||
// if your application has other URLs with data that will never change,
|
||||
// set this variable to true for them, and they will only be fetched once.
|
||||
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 preprocess from 'svelte-preprocess';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true,
|
||||
}),
|
||||
sveltePreprocess({postcss: true})
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@
|
|||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true
|
||||
"strict": true,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue