jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-12 18:43:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(*): Add workbox service worker

Browse Source
This commit is contained in:
Josh Creek
2024-04-14 16:03:01 +01:00
parent 63de9c82a4
commit 5285d5d84d
24 changed files with 6414 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adapter.mjs
+7
View File
@@ -0,0 +1,7 @@
import process from 'node:process'
import AdapterNode from '@sveltejs/adapter-node';
import AdpaterStatic from '@sveltejs/adapter-static';
export const nodeAdapter = process.env.NODE_ADAPTER === 'true'
export const adapter = nodeAdapter ? AdapterNode() : AdpaterStatic()
client-test/offline.spec.ts
+39
View File
@@ -0,0 +1,39 @@
import { test, expect } from '@playwright/test';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
test('Test offline and trailing slashes', async ({ browser }) => {
// test offline + trailing slashes routes
const context = await browser.newContext();
const offlinePage = await context.newPage();
await offlinePage.goto('/');
const offlineSwURL = await offlinePage.evaluate(async () => {
const registration = await Promise.race([
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
navigator.serviceWorker.ready,
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)
)
]);
// @ts-expect-error registration is of type unknown
return registration.active?.scriptURL;
});
const offlineSwName = 'sw.js';
expect(offlineSwURL).toBe(`http://localhost:4173/${offlineSwName}`);
await context.setOffline(true);
const aboutAnchor = offlinePage.getByRole('link', { name: 'About' });
expect(await aboutAnchor.getAttribute('href')).toBe('/about');
await aboutAnchor.click({ noWaitAfter: false });
const url = await offlinePage.evaluate(async () => {
await new Promise((resolve) => setTimeout(resolve, 3000));
return location.href;
});
expect(url).toBe('http://localhost:4173/about');
expect(offlinePage.locator('li[aria-current="page"] a').getByText('About')).toBeTruthy();
await offlinePage.reload({ waitUntil: 'load' });
expect(offlinePage.url()).toBe('http://localhost:4173/about');
expect(offlinePage.locator('li[aria-current="page"] a').getByText('About')).toBeTruthy();
// Dispose context once it's no longer needed.
await context.close();
});
client-test/sw.spec.ts
+56
View File
@@ -0,0 +1,56 @@
import { test, expect } from '@playwright/test';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
test('The service worker is registered and cache storage is present', async ({ page }) => {
await page.goto('/');
const swURL = await page.evaluate(async () => {
const registration = await Promise.race([
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
navigator.serviceWorker.ready,
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)
)
]);
// @ts-expect-error registration is of type unknown
return registration.active?.scriptURL;
});
const swName = 'sw.js';
expect(swURL).toBe(`http://localhost:4173/${swName}`);
const cacheContents = await page.evaluate(async () => {
const cacheState: Record<string, Array<string>> = {};
for (const cacheName of await caches.keys()) {
const cache = await caches.open(cacheName);
cacheState[cacheName] = (await cache.keys()).map((req) => req.url);
}
return cacheState;
});
expect(Object.keys(cacheContents).length).toEqual(1);
const key = 'workbox-precache-v2-http://localhost:4173/';
expect(Object.keys(cacheContents)[0]).toEqual(key);
const urls = cacheContents[key].map((url) => url.slice('http://localhost:4173/'.length));
/*
'http://localhost:4173/about?__WB_REVISION__=38251751d310c9b683a1426c22c135a2',
'http://localhost:4173/?__WB_REVISION__=073370aa3804305a787b01180cd6b8aa',
'http://localhost:4173/manifest.webmanifest?__WB_REVISION__=27df2fa4f35d014b42361148a2207da3'
*/
expect(urls.some((url) => url.startsWith('manifest.webmanifest?__WB_REVISION__='))).toEqual(true);
expect(urls.some((url) => url.startsWith('?__WB_REVISION__='))).toEqual(true);
expect(urls.some((url) => url.startsWith('about?__WB_REVISION__='))).toEqual(true);
// dontCacheBustURLsMatching: any asset in _app/immutable folder shouldn't have a revision (?__WB_REVISION__=)
expect(urls.some((url) => url.startsWith('_app/immutable/') && url.endsWith('.css'))).toEqual(
true
);
expect(urls.some((url) => url.startsWith('_app/immutable/') && url.endsWith('.js'))).toEqual(
true
);
expect(urls.some((url) => url.includes('_app/version.json?__WB_REVISION__='))).toEqual(true);
});
package-lock.json
Generated
+5827 -5
View File
File diff suppressed because it is too large Load Diff
package.json
+26 -7
View File
@@ -4,22 +4,41 @@
"private": true,
"scripts": {
"dev": "npx tailwindcss -i ./static/input.css -o ./static/output.css && vite dev",
"dev-generate": "GENERATE_SW=true npx tailwindcss -i ./static/input.css -o ./static/output.css && vite dev",
"dev-generate-suppress-w": "GENERATE_SW=true SUPPRESS_WARNING=true npx tailwindcss -i ./static/input.css -o ./static/output.css && vite dev",
"build-generate-sw": "GENERATE_SW=true vite build",
"build-generate-sw-node": "NODE_ADAPTER=true GENERATE_SW=true vite build",
"build": "npx tailwindcss -i ./static/input.css -o ./static/output.css && vite build",
"preview": "vite preview",
"build-inject-manifest-node": "NODE_ADAPTER=true vite build",
"build-self-destroying": "SELF_DESTROYING_SW=true vite build",
"preview": "vite preview --port=4173",
"preview-node": "PORT=4173 node build",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"lint-fix": "npm run lint --fix",
"format": "prettier --write .",
"tailwind": "npx tailwindcss -i ./static/input.css -o ./static/output.css"
"tailwind": "npx tailwindcss -i ./static/input.css -o ./static/output.css",
"test-generate-sw": "npm run build-generate-sw && GENERATE_SW=true vitest run && GENERATE_SW=true playwright test",
"test-generate-sw-node": "npm run build-generate-sw-node && NODE_ADAPTER=true GENERATE_SW=true vitest run && NODE_ADAPTER=true GENERATE_SW=true playwright test",
"test-inject-manifest": "npm run build-inject-manifest && vitest run && playwright test",
"test-inject-manifest-node": "npm run build-inject-manifest-node && NODE_ADAPTER=true vitest run && NODE_ADAPTER=true playwright test",
"test": "npm run test-generate-sw && npm run test-generate-sw-node && npm run test-inject-manifest && npm run test-inject-manifest-node"
},
"devDependencies": {
"@playwright/test": "^1.37.1",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-netlify": "^4.1.0",
"@sveltejs/adapter-node": "^2.0.0",
"@sveltejs/adapter-static": "^3.0.0",
"@sveltejs/kit": "^2.0.6",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/cookie": "^0.6.0",
"@types/eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"@vite-pwa/assets-generator": "^0.2.4",
"@vite-pwa/sveltekit": "^0.4.0",
"autoprefixer": "^10.4.19",
"daisyui": "^4.10.1",
"eslint": "^8.56.0",
@@ -28,12 +47,12 @@
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte": "^4.2.8",
"svelte-check": "^3.6.2",
"tailwindcss": "^3.4.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vitest": "^1.0.4"
},
"type": "module",
"dependencies": {
playwright.config.ts
+96
View File
@@ -0,0 +1,96 @@
import { defineConfig, devices } from '@playwright/test'
const url = 'http://localhost:4173'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { nodeAdapter } from './adapter.mjs'
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './client-test',
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
outputDir: 'test-results/',
timeout: 5 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();`
*/
timeout: 1000,
},
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'line',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: url,
//offline: true,
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ..devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
webServer: {
command: nodeAdapter ? 'pnpm run preview-node' : 'pnpm run preview',
url,
reuseExistingServer: !process.env.CI,
},
});
pwa-assets.config.ts
+28
View File
@@ -0,0 +1,28 @@
import {
createAppleSplashScreens,
defineConfig,
minimal2023Preset
} from '@vite-pwa/assets-generator/config';
export default defineConfig({
headLinkOptions: {
preset: '2023'
},
preset: {
...minimal2023Preset,
appleSplashScreens: createAppleSplashScreens(
{
padding: 0.3,
resizeOptions: { fit: 'contain', background: 'white' },
darkResizeOptions: { fit: 'contain', background: 'black' },
linkMediaOptions: {
log: true,
addMediaScreen: true,
xhtml: true
}
},
['iPad Air 9.7"']
)
},
images: 'static/favicon.png'
});
pwa.mjs
+3
View File
@@ -0,0 +1,3 @@
import process from 'node:process'
export const generateSW = process.env.GENERATE_SW === 'true'
src/app.d.ts
Vendored
+19 -7
View File
@@ -1,13 +1,25 @@
import 'vite-plugin-pwa/svelte';
import 'vite-plugin-pwa/info';
import 'vite-plugin-pwa/pwa-assets';
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
// and what to do when importing types
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
const __DATE__: string;
const __RELOAD_SW__: boolean;
namespace App {
// interface Error {}
interface Locals {
userid: string;
buildDate: string;
periodicUpdates: boolean;
}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};
src/app.html
-14
View File
@@ -4,20 +4,6 @@
<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="/site.webmanifest" />
<meta name="theme-color" content="#f00000" />
<meta
name="description"
content="A free and open source web app to track completion of a living Pokédex, which works offline."
/>
<meta property="og:title" content="Living Dex Tracker - A free Pokédex completion tool" />
<meta property="og:url" content="https://pokedex.jcreek.co.uk" />
<meta
property="og:description"
content="A free and open source web app to track completion of a living Pokédex, which works offline."
/>
<link rel="canonical" href="https://pokedex.jcreek.co.uk" />
<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
%sveltekit.head%
<link rel="stylesheet" href="%sveltekit.assets%/output.css" />
</head>
src/lib/components/pwa/ReloadPrompt.svelte
+63
View File
@@ -0,0 +1,63 @@
<script lang="ts">
import { useRegisterSW } from 'virtual:pwa-register/svelte';
const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
onRegistered(r) {
// uncomment following code if you want check for updates
// r && setInterval(() => {
// console.log('Checking for sw update')
// r.update()
// }, 20000 /* 20s for testing purposes */)
console.log(`SW Registered: ${r}`);
},
onRegisterError(error) {
console.log('SW registration error', error);
}
});
const close = () => {
offlineReady.set(false);
needRefresh.set(false);
};
$: toast = $offlineReady || $needRefresh;
</script>
{#if toast}
<div class="pwa-toast" role="alert">
<div class="message">
{#if $offlineReady}
<span> App ready to work offline </span>
{:else}
<span> New content available, click on reload button to update. </span>
{/if}
</div>
{#if $needRefresh}
<button on:click={() => updateServiceWorker(true)}> Reload </button>
{/if}
<button on:click={close}> Close </button>
</div>
{/if}
<style>
.pwa-toast {
position: fixed;
right: 0;
bottom: 0;
margin: 16px;
padding: 12px;
border: 1px solid #8885;
border-radius: 4px;
z-index: 2;
text-align: left;
box-shadow: 3px 4px 5px 0 #8885;
background-color: white;
}
.pwa-toast .message {
margin-bottom: 8px;
}
.pwa-toast button {
border: 1px solid #8885;
outline: none;
margin-right: 5px;
border-radius: 2px;
padding: 3px 10px;
}
</style>
src/prompt-sw.ts
+32
View File
@@ -0,0 +1,32 @@
/// <reference lib="WebWorker" />
/// <reference types="vite/client" />
/// <reference no-default-lib="true"/>
/// <reference lib="esnext" />
import {
cleanupOutdatedCaches,
createHandlerBoundToURL,
precacheAndRoute,
precache
} from 'workbox-precaching';
import { NavigationRoute, registerRoute } from 'workbox-routing';
declare let self: ServiceWorkerGlobalScope;
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting();
});
// Add root route to precache manifest
precache([{ url: '/', revision: null }]);
// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST);
// clean old assets
cleanupOutdatedCaches();
let allowlist: undefined | RegExp[];
if (import.meta.env.DEV) allowlist = [/^\/$/];
// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('/'), { allowlist }));
src/routes/+layout.svelte
+55
View File
@@ -6,6 +6,11 @@
import SignIn from '$lib/components/SignIn.svelte';
import SignOut from '$lib/components/SignOut.svelte';
import { pwaInfo } from 'virtual:pwa-info';
import { pwaAssetsHead } from 'virtual:pwa-assets/head';
$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
export let data;
let { supabase } = data;
$: ({ supabase } = data);
@@ -18,6 +23,24 @@
onMount(async () => {
await getUser();
if (pwaInfo) {
const { registerSW } = await import('virtual:pwa-register');
registerSW({
immediate: true,
onRegistered(r) {
// uncomment following code if you want check for updates
// r && setInterval(() => {
// console.log('Checking for sw update')
// r.update()
// }, 20000 /* 20s for testing purposes */)
console.log(`SW Registered: ${r}`);
},
onRegisterError(error) {
console.log('SW registration error', error);
}
});
}
});
async function getUser() {
@@ -37,6 +60,34 @@
}
</script>
<svelte:head>
{#if pwaAssetsHead.themeColor}
<meta name="theme-color" content={pwaAssetsHead.themeColor.content} />
{/if}
{#if pwaAssetsHead.description}
<meta name="description" content={pwaAssetsHead.description.content} />
{/if}
{#each pwaAssetsHead.links as link}
<link {...link} />
{/each}
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html webManifestLink}
<!-- <meta
name="description"
content="A free and open source web app to track completion of a living Pokédex, which works offline."
/> -->
<meta property="og:title" content="Living Dex Tracker - A free Pokédex completion tool" />
<meta property="og:url" content="https://pokedex.jcreek.co.uk" />
<meta
property="og:description"
content="A free and open source web app to track completion of a living Pokédex, which works offline."
/>
<link rel="canonical" href="https://pokedex.jcreek.co.uk" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" /> -->
</svelte:head>
<header>
<div class="navbar bg-base-100">
<div class="flex-1">
@@ -104,3 +155,7 @@
<a class="link link-hover">Cookie policy</a>
</nav>
</footer>
{#await import('$lib/components/pwa/ReloadPrompt.svelte') then { default: ReloadPrompt }}
<ReloadPrompt />
{/await}
src/routes/about/+page.svelte
+30
View File
@@ -0,0 +1,30 @@
<svelte:head>
<title>About</title>
<meta name="description" content="About this app" />
</svelte:head>
<div class="content">
<h1>About this app</h1>
<p>
This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
following into your command line and following the prompts:
</p>
<pre>npm create svelte@latest</pre>
<p>
The page you're looking at is purely static HTML, with no client-side interactivity needed.
Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
the devtools network panel and reloading.
</p>
</div>
<style>
.content {
width: 100%;
max-width: var(--column-width);
margin: var(--column-margin-top) auto 0 auto;
}
</style>
src/routes/about/+page.ts
+9
View File
@@ -0,0 +1,9 @@
import { dev } from '$app/environment';
// we don't need any JS on this page, though we'll load
// it in dev so that we get hot module replacement...
export const csr = dev;
// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in prod
export const prerender = true;
src/service-worker.js
-80
View File
@@ -1,80 +0,0 @@
/// <reference types="@sveltejs/kit" />
import { build, files, version } from '$service-worker';
// Create a unique cache name for this deployment
const CACHE = `cache-${version}`;
const ASSETS = [
...build, // the app itself
...files // everything in `static`
];
self.addEventListener('install', (event) => {
// Create a new cache and add all files to it
async function addFilesToCache() {
const cache = await caches.open(CACHE);
await cache.addAll(ASSETS);
}
event.waitUntil(addFilesToCache());
});
self.addEventListener('activate', (event) => {
// Remove previous cached data from disk
async function deleteOldCaches() {
for (const key of await caches.keys()) {
if (key !== CACHE) await caches.delete(key);
}
}
event.waitUntil(deleteOldCaches());
});
self.addEventListener('fetch', (event) => {
// ignore POST requests etc
if (event.request.method !== 'GET') return;
async function respond() {
const url = new URL(event.request.url);
const cache = await caches.open(CACHE);
// `build`/`files` can always be served from the cache
if (ASSETS.includes(url.pathname)) {
const response = await cache.match(url.pathname);
if (response) {
return response;
}
}
// for everything else, try the network first, but
// fall back to the cache if we're offline
try {
const response = await fetch(event.request);
// if we're offline, fetch can return a value that is not a Response
// instead of throwing - and we can't pass this non-Response to respondWith
if (!(response instanceof Response)) {
throw new Error('invalid response from fetch');
}
if (response.status === 200) {
cache.put(event.request, response.clone());
}
return response;
} catch (err) {
const response = await cache.match(event.request);
if (response) {
return response;
}
// if there's no cache, then just error out
// as there is nothing we can do to respond to this request
throw err;
}
}
event.respondWith(respond());
});
static/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

static/robots.txt
+3
View File
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
static/site.webmanifest
-22
View File
@@ -1,22 +0,0 @@
{
"name": "Living Dex Tracker",
"short_name": "Living Dex Tracker",
"description": "A tool to enable you to track your progress in completing the living Pokédex in Pokémon games.",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"start_url": "/",
"theme_color": "#f00000",
"background_color": "#f0f0f0",
"display": "standalone"
}
svelte.config.js
+10 -1
View File
@@ -1,5 +1,7 @@
import adapter from '@sveltejs/adapter-netlify';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
// you don't need to do this if you're using generateSW strategy in your app
import { generateSW } from './pwa.mjs';
/** @type {import('@sveltejs/kit').Config} */
const config = {
@@ -17,7 +19,14 @@ const config = {
// instead of creating a single one for the entire app.
// if `edge` is true, this option cannot be used
split: false
})
}),
serviceWorker: {
register: true
},
files: {
// you don't need to do this if you're using generateSW strategy in your app
serviceWorker: generateSW ? undefined : 'src/prompt-sw.ts'
}
}
};
test/build.test.ts
+35
View File
@@ -0,0 +1,35 @@
import { describe, expect, it } from 'vitest'
import { existsSync, readFileSync } from 'node:fs'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { generateSW } from '../pwa.mjs'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { nodeAdapter } from '../adapter.mjs'
describe(`test-build: ${nodeAdapter ? 'node' : 'static'} adapter`, () => {
it(`service worker is generated: ${generateSW ? 'sw.js' : 'prompt-sw.js'}`, () => {
const swName = `./build/${nodeAdapter ? 'client/': ''}${generateSW ? 'sw.js' : 'prompt-sw.js'}`
expect(existsSync(swName), `${swName} doesn't exist`).toBeTruthy()
const webManifest = `./build/${nodeAdapter ? 'client/': ''}manifest.webmanifest`
expect(existsSync(webManifest), `${webManifest} doesn't exist`).toBeTruthy()
const swContent = readFileSync(swName, 'utf-8')
let match: RegExpMatchArray | null
if (generateSW) {
match = swContent.match(/define\(\['\.\/(workbox-\w+)'/)
expect(match && match.length === 2, `workbox-***.js entry not found in ${swName}`).toBeTruthy()
const workboxName = `./build/${nodeAdapter ? 'client/': ''}${match?.[1]}.js`
expect(existsSync(workboxName),`${workboxName} doesn't exist`).toBeTruthy()
}
match = swContent.match(/"url":\s*"manifest\.webmanifest"/)
expect(match && match.length === 1, 'missing manifest.webmanifest in sw precache manifest').toBeTruthy()
match = swContent.match(/"url":\s*"\/"/)
expect(match && match.length === 1, 'missing entry point route (/) in sw precache manifest').toBeTruthy()
match = swContent.match(/"url":\s*"about"/)
expect(match && match.length === 1,'missing about route (/about) in sw precache manifest').toBeTruthy()
if (nodeAdapter) {
match = swContent.match(/"url":\s*"server\//)
expect(match === null, 'found server/ entries in sw precache manifest').toBeTruthy()
}
})
})
tsconfig.json
+9 -2
View File
@@ -9,8 +9,15 @@
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
"moduleResolution": "bundler",
"types": [
"vite-plugin-pwa/svelte",
"vite-plugin-pwa/vanillajs",
"vite-plugin-pwa/info",
"virtual:pwa-assets"
]
},
"include": ["node_modules/vite-plugin-pwa/client.d.ts", "node_modules/**/*.d.ts"]
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
vite.config.ts
+60 -1
View File
@@ -1,6 +1,65 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';
// you don't need to do this if you're using generateSW strategy in your app
import { generateSW } from './pwa.mjs';
export default defineConfig({
plugins: [sveltekit()]
plugins: [
sveltekit(),
SvelteKitPWA({
srcDir: './src',
mode: 'development',
// you don't need to do this if you're using generateSW strategy in your app
strategies: generateSW ? 'generateSW' : 'injectManifest',
// you don't need to do this if you're using generateSW strategy in your app
filename: generateSW ? undefined : 'prompt-sw.ts',
scope: '/',
base: '/',
selfDestroying: process.env.SELF_DESTROYING_SW === 'true',
pwaAssets: {
config: true
},
manifest: {
name: 'Living Dex Tracker',
short_name: 'Living Dex Tracker',
description:
'A tool to enable you to track your progress in completing the living Pokédex in Pokémon games.',
icons: [
{
src: '/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: '/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable'
}
],
start_url: '/',
scope: '/',
display: 'standalone',
theme_color: '#f00000',
background_color: '#f0f0f0'
},
injectManifest: {
globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2,webmanifest}']
},
workbox: {
globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2,webmanifest}']
},
devOptions: {
enabled: false,
suppressWarnings: process.env.SUPPRESS_WARNING === 'true',
type: 'module',
navigateFallback: '/'
},
// if you have shared info in svelte config file put in a separate module and use it also here
kit: {
includeVersionFile: true
}
})
]
});
vitest.config.mts
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
include: ['test/*.test.ts']
}
})