sveltekit-auth-example 1.0.19 → 1.0.20

package/CHANGELOG.md

@@ -1,9 +1,13 @@
 # Backlog
-* Add username and Avatar icon to menu bar
-* Consider not setting defaultUser in loginSession as it would simplify +layout.svelte.
 * Refactor $env/dynamic/private and public
 * Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 1.0.20
+* Bump dependencies
+* Add service-worker
+* Add dropdown, avatarm and user's first name to navbar once user is logged in
+* Refactor user session and update typing
+
 # 1.0.19
 * Added SvelteKit's cookies implementation in RequestEvent
 * [Bug] Logout then go to http://localhost/admin gives error on auth.ts:39

package/README.md

@@ -1,7 +1,8 @@
 # SvelteKit Authentication and Authorization Example
 
 This is an example of how to register, authenticate, and update users and limit their access to
-areas of the website by role (admin, teacher, student).
+areas of the website by role (admin, teacher, student). As almost every recent release of SvelteKit introduced breaking changes, this project attempts to
+maintain compatibility with the latest release.
 
 It's a Single Page App (SPA) built with SvelteKit and a PostgreSQL database back-end. Code is TypeScript and the website is styled using Bootstrap. PostgreSQL functions handle password hashing and UUID generation for the session ID. Unlike most authentication examples, this SPA does not use callbacks that redirect back to the site (causing the website to be reloaded with a visual flash).
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sveltekit-auth-example",
   "description": "SvelteKit Authentication Example",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "private": false,
   "author": "Nate Stuyvesant",
   "license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
@@ -33,7 +33,7 @@
 		"format": "prettier --write ."
   },
   "engines": {
-    "node": "~18.8.0",
+    "node": "~18.9.0",
     "npm": "^8.19.1"
   },
   "type": "module",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@sveltejs/adapter-node": "latest",
     "@sveltejs/kit": "latest",
-    "@types/bootstrap": "5.2.3",
+    "@types/bootstrap": "5.2.4",
     "@types/cookie": "^0.5.1",
     "@types/google.accounts": "0.0.2",
     "@types/jsonwebtoken": "^8.5.9",
@@ -60,12 +60,12 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
-    "sass": "^1.54.8",
-    "svelte": "^3.50.0",
+    "sass": "^1.54.9",
+    "svelte": "^3.50.1",
     "svelte-check": "^2.9.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.3",
     "vite": "^3.1.0"
   }
 }

package/src/app.d.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /// <reference types="bootstrap" />
 /// <reference types="google.accounts" />
 
@@ -16,14 +18,14 @@ declare namespace App {
 	// interface PublicEnv {} // $env/dynamic/public
 }
 
-type AuthenticationResult = {
+interface AuthenticationResult {
   statusCode: number
   status: string
   user: User
   sessionId: string
 }
 
-type Credentials = {
+interface Credentials {
   email: string
   password: string
 }
@@ -45,12 +47,12 @@ interface ImportMetaEnv {
   VITE_GOOGLE_CLIENT_ID: string
 }
 
-type MessageAddressee = {
+interface MessageAddressee {
   email: string
   name?: string
 }
 
-type Message = {
+interface Message {
   sender?: MessageAddressee
   to?: MessageAddressee[]
   subject: string
@@ -81,7 +83,7 @@ interface SendInBlueRequest extends RequestInit {
   }
 }
 
-type User = {
+interface UserProperties {
   id: number
   role: 'student' | 'teacher' | 'admin'
   password?: string
@@ -91,13 +93,13 @@ type User = {
   phone?: string
 }
 
-type UserSession = {
+type User = UserProperties | undefined
+
+interface UserSession {
   id: string,
   user: User
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 interface Window {
   google?: any
   grecaptcha: any

package/src/lib/auth.ts

@@ -1,130 +1,130 @@
-import type { Page } from '@sveltejs/kit' 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { Page } from '@sveltejs/kit'
 import type { Readable, Writable } from 'svelte/store'
 import { config } from '$lib/config'
-import { defaultUser } from '../stores'
 
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any
-export default function useAuth(page: Readable<Page>, loginSession: Writable<User>, goto: (url: string | URL, opts?: { replaceState?: boolean; noscroll?: boolean; keepfocus?: boolean; state?: any; }) => Promise<any>) {
-  let user: User
-  loginSession.subscribe(value => {
-    user = value
-  })
+export default function useAuth(
+	page: Readable<Page>,
+	loginSession: Writable<User>,
+	goto: (
+		url: string | URL,
+		opts?: { replaceState?: boolean; noscroll?: boolean; keepfocus?: boolean; state?: any }
+	) => Promise<any>
+) {
+	let user: User
+	loginSession.subscribe((value) => {
+		user = value
+	})
 
-  let referrer: string | null
-  page.subscribe(value => {
+	let referrer: string | null
+	page.subscribe((value) => {
 		referrer = value.url.searchParams.get('referrer')
 	})
 
-  async function googleCallback(response: GoogleCredentialResponse) {
-    const res = await fetch('/auth/google', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ token: response.credential })
-    })
-
-    if (res.ok) {
-      const fromEndpoint = await res.json()
-      loginSession.set(fromEndpoint.user) // update loginSession store
-      const { role } = fromEndpoint.user
-      if (referrer) return goto(referrer)
-      if (role === 'teacher') return goto('/teachers')
-      if (role === 'admin') return goto('/admin')
-      if (location.pathname === '/login') goto('/') // logged in so go home
-    }
-  }
+	async function googleCallback(response: GoogleCredentialResponse) {
+		const res = await fetch('/auth/google', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ token: response.credential })
+		})
 
-  function initializeSignInWithGoogle(htmlId?: string) {
-    const { id } = window.google.accounts // assumes <script src="https://accounts.google.com/gsi/client" async defer></script> is in app.html
-    id.initialize({ client_id: config.googleClientId, callback: googleCallback })
+		if (res.ok) {
+			const fromEndpoint = await res.json()
+			loginSession.set(fromEndpoint.user) // update loginSession store
+			const { role } = fromEndpoint.user
+			if (referrer) return goto(referrer)
+			if (role === 'teacher') return goto('/teachers')
+			if (role === 'admin') return goto('/admin')
+			if (location.pathname === '/login') goto('/') // logged in so go home
+		}
+	}
 
-    if (htmlId) { // render button instead of prompt
-      return id.renderButton(
-        document.getElementById(htmlId), {
-          theme: 'filled_blue',
-          size: 'large',
-          width: '367'
-        }
-      )
-    }
+	function initializeSignInWithGoogle(htmlId?: string) {
+		const { id } = window.google.accounts // assumes <script src="https://accounts.google.com/gsi/client" async defer></script> is in app.html
+		id.initialize({ client_id: config.googleClientId, callback: googleCallback })
 
-    if (!user) id.prompt()
-  }
+		if (htmlId) {
+			// render button instead of prompt
+			return id.renderButton(document.getElementById(htmlId), {
+				theme: 'filled_blue',
+				size: 'large',
+				width: '367'
+			})
+		}
 
-  function setloginSession(user: User | null) {
-    loginSession.update(s => ({
-      ...s,
-      user
-    }))
-  }
+		if (!user) id.prompt()
+	}
 
-  async function registerLocal(user: User) {
-    try {
-      const res = await fetch('/auth/register', {
-        method: 'POST',
-        body: JSON.stringify(user), // server needs to ignore user.role and always set it to 'student'
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      if (!res.ok)  {
-        if (res.status == 401) // user already existed and passwords didn't match (otherwise, we login the user)
-          throw new Error('Sorry, that username is already in use.')
-        throw new Error(res.statusText) // should only occur if there's a database error
-      }
+	async function registerLocal(user: User) {
+		try {
+			const res = await fetch('/auth/register', {
+				method: 'POST',
+				body: JSON.stringify(user), // server needs to ignore user.role and always set it to 'student'
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			})
+			if (!res.ok) {
+				if (res.status == 401)
+					// user already existed and passwords didn't match (otherwise, we login the user)
+					throw new Error('Sorry, that username is already in use.')
+				throw new Error(res.statusText) // should only occur if there's a database error
+			}
 
-      // res.ok
-      const fromEndpoint = await res.json()
-      loginSession.set(fromEndpoint.user) // update store so user is logged in
-      goto('/')
-    } catch (err) {
-      console.error('Register error', err)
-      if (err instanceof Error) {
-        throw new Error(err.message)
-      }
-    }
-  }
+			// res.ok
+			const fromEndpoint = await res.json()
+			loginSession.set(fromEndpoint.user) // update store so user is logged in
+			goto('/')
+		} catch (err) {
+			console.error('Register error', err)
+			if (err instanceof Error) {
+				throw new Error(err.message)
+			}
+		}
+	}
 
-  async function loginLocal(credentials: Credentials) {
-    try {
-      const res = await fetch('/auth/login', {
-        method: 'POST',
-        body: JSON.stringify(credentials),
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      const fromEndpoint = await res.json()
-      if (res.ok) {
-        setloginSession(fromEndpoint.user)
-        const { role } = fromEndpoint.user
-        if (referrer) return goto(referrer)
-        if (role === 'teacher') return goto('/teachers')
-        if (role === 'admin') return goto('/admin')
-        return goto('/')
-      } else {
-        throw new Error(fromEndpoint.message)
-      }
-    } catch (err) {
-      if (err instanceof Error) {
-        console.error('Login error', err)
-        throw new Error(err.message)
-      }
-    }
-  }
+	async function loginLocal(credentials: Credentials) {
+		try {
+			const res = await fetch('/auth/login', {
+				method: 'POST',
+				body: JSON.stringify(credentials),
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			})
+			const fromEndpoint = await res.json()
+			if (res.ok) {
+				loginSession.set(fromEndpoint.user)
+				const { role } = fromEndpoint.user
+				if (referrer) return goto(referrer)
+				if (role === 'teacher') return goto('/teachers')
+				if (role === 'admin') return goto('/admin')
+				return goto('/')
+			} else {
+				throw new Error(fromEndpoint.message)
+			}
+		} catch (err) {
+			if (err instanceof Error) {
+				console.error('Login error', err)
+				throw new Error(err.message)
+			}
+		}
+	}
 
-  async function logout() {
-    // Request server delete httpOnly cookie called loginSession
-    const url = '/auth/logout'
-    const res = await fetch(url, {
-      method: 'POST'
-    })
-    if (res.ok) {
-      loginSession.set(defaultUser) // delete loginSession.user from 
-      goto('/login')
-    } else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
-  }
+	async function logout() {
+		// Request server delete httpOnly cookie called loginSession
+		const url = '/auth/logout'
+		const res = await fetch(url, {
+			method: 'POST'
+		})
+		if (res.ok) {
+			loginSession.set(undefined) // delete loginSession.user from
+			goto('/login')
+		} else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
+	}
 
-  return { initializeSignInWithGoogle, registerLocal, loginLocal, logout }
-}
+	return { initializeSignInWithGoogle, registerLocal, loginLocal, logout }
+}

package/src/routes/+layout.svelte

@@ -20,6 +20,7 @@
 
   onMount(async () => {
     await import('bootstrap/js/dist/collapse') // lots of ways to load Bootstrap but prefer this approach to avoid SSR issues
+    await import('bootstrap/js/dist/dropdown')
     Toast = (await import('bootstrap/js/dist/toast')).default
 		initializeSignInWithGoogle()
 	})
@@ -37,20 +38,50 @@
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
-    <a class="navbar-brand" href="/">Auth</a>
+    <a class="navbar-brand" href="/">SvelteKit-Auth-Example</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMain">
-      <div class="navbar-nav">
-        <a class="nav-link active" aria-current="page" href="/">Home</a>
-        <a class="nav-link" href="/info">Info</a>
-        <a class="nav-link" class:d-none={!$loginSession || $loginSession.id === 0} href="/profile">Profile</a>
-        <a class="nav-link" class:d-none={!$loginSession || $loginSession?.role !== 'admin'} href="/admin">Admin</a>
-        <a class="nav-link" class:d-none={!$loginSession || $loginSession?.role === 'student'} href="/teachers">Teachers</a>
-        <a class="nav-link" class:d-none={!!$loginSession} href="/login">Login</a>
-        <a on:click|preventDefault={logout} class="nav-link" class:d-none={!$loginSession || $loginSession.id === 0} href={'#'}>Logout</a>
-      </div>
+
+      <ul class="navbar-nav me-5">
+        <li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Home</a></li>
+        <li class="nav-item"><a class="nav-link" href="/info">Info</a></li>
+
+        {#if $loginSession}
+          {#if $loginSession.role == 'admin'}
+            <li class="nav-item"><a class="nav-link" href="/admin">Admin</a></li>
+          {/if}
+          {#if $loginSession.role != 'student'}
+            <li class="nav-item"><a class="nav-link" href="/teachers">Teachers</a></li>
+          {/if}
+        {/if}
+      </ul>
+      <ul class="navbar-nav">
+        {#if $loginSession}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href={'#'} role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="avatar" viewBox="0 0 16 16">
+                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+              </svg>
+              {$loginSession.firstName}
+            </a>
+            <ul class="dropdown-menu">
+              <li>
+                <a class="dropdown-item" href="/profile">Profile</a>
+              </li>
+              <li>
+                <a on:click|preventDefault={logout} class="dropdown-item" class:d-none={!$loginSession || $loginSession.id === 0} href={'#'}>Logout</a>
+              </li>
+            </ul>
+          </li>
+        {:else}
+          <li class="nav-item">
+            <a class="nav-link" href="/login">Login</a>
+          </li>
+        {/if}
+      </ul>
     </div>
   </div>
 </nav>
@@ -80,4 +111,9 @@
   .toast {
     z-index: 9999;
   }
+
+  .avatar {
+    position: relative;
+    top: -1.5px;
+  }
 </style>

package/src/routes/admin/+page.server.ts

@@ -4,7 +4,6 @@ import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({locals})=> {
 	const { user } = locals
 	const authorized = ['admin']
-	console.log('admin/+page.server.ts', user)
 	if (!user || !authorized.includes(user.role)) {
 		throw redirect(302, '/login?referrer=/admin')
 	}

package/src/routes/register/+page.svelte

@@ -54,6 +54,7 @@
 
 
   const passwordMatch = () => {
+    if (!user) return false // placate TypeScript
     if (!user.password) user.password = ''
     return user.password == confirmPassword.value
   }
@@ -68,47 +69,49 @@
     <div class="card-body">
       <h4><strong>Register</strong></h4>
       <p>Welcome to our community.</p>
-      <form id="register" autocomplete="on" novalidate class="mt-3">
-        <div class="mb-3">
-          <div id="googleButton"></div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="email">Email</label>
-          <input bind:this={focusedField} type="email" class="form-control" bind:value={user.email} required placeholder="Email" id="email" autocomplete="email"/>
-          <div class="invalid-feedback">Email address required</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="password">Password</label>
-          <input type="password" id="password" class="form-control" bind:value={user.password} required minlength="8" maxlength="80" placeholder="Password" autocomplete="new-password"/>
-          <div class="invalid-feedback">Password with 8 chars or more required</div>
-          <div class="form-text">Password minimum length 8, must have one capital letter, 1 number, and one unique character.</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="password">Confirm password</label>
-          <input type="password" id="password" class="form-control" bind:this={confirmPassword} required minlength="8" maxlength="80" placeholder="Password (again)" autocomplete="new-password"/>
-          <div class="form-text">Password minimum length 8, must have one capital letter, 1 number, and one unique character.</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="firstName">First name</label>
-          <input bind:value={user.firstName} class="form-control" id="firstName" placeholder="First name" required autocomplete="given-name"/>
-          <div class="invalid-feedback">First name required</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="lastName">Last name</label>
-          <input bind:value={user.lastName} class="form-control" id="lastName" placeholder="Last name" required autocomplete="family-name"/>
-          <div class="invalid-feedback">Last name required</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="phone">Phone</label>
-          <input type="tel" bind:value={user.phone} id="phone" class="form-control" placeholder="Phone" autocomplete="tel-local"/>
-        </div>
-      
-        {#if message}
-          <p class="text-danger">{message}</p>
-        {/if}
-      
-        <button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
-      </form>
+      {#if user}
+        <form id="register" autocomplete="on" novalidate class="mt-3">
+          <div class="mb-3">
+            <div id="googleButton"></div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="email">Email</label>
+            <input bind:this={focusedField} type="email" class="form-control" bind:value={user.email} required placeholder="Email" id="email" autocomplete="email"/>
+            <div class="invalid-feedback">Email address required</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="password">Password</label>
+            <input type="password" id="password" class="form-control" bind:value={user.password} required minlength="8" maxlength="80" placeholder="Password" autocomplete="new-password"/>
+            <div class="invalid-feedback">Password with 8 chars or more required</div>
+            <div class="form-text">Password minimum length 8, must have one capital letter, 1 number, and one unique character.</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="password">Confirm password</label>
+            <input type="password" id="password" class="form-control" bind:this={confirmPassword} required minlength="8" maxlength="80" placeholder="Password (again)" autocomplete="new-password"/>
+            <div class="form-text">Password minimum length 8, must have one capital letter, 1 number, and one unique character.</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="firstName">First name</label>
+            <input bind:value={user.firstName} class="form-control" id="firstName" placeholder="First name" required autocomplete="given-name"/>
+            <div class="invalid-feedback">First name required</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="lastName">Last name</label>
+            <input bind:value={user.lastName} class="form-control" id="lastName" placeholder="Last name" required autocomplete="family-name"/>
+            <div class="invalid-feedback">Last name required</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="phone">Phone</label>
+            <input type="tel" bind:value={user.phone} id="phone" class="form-control" placeholder="Phone" autocomplete="tel-local"/>
+          </div>
+        
+          {#if message}
+            <p class="text-danger">{message}</p>
+          {/if}
+        
+          <button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
+        </form>
+      {/if}
     </div>
   </div>
 </div>

package/src/service-worker.ts

@@ -0,0 +1,74 @@
+/// <reference lib="webworker" />
+import { build, files, version } from '$service-worker'
+
+const worker = <ServiceWorkerGlobalScope> <unknown> self
+const cacheName = `cache${version}`
+const toCache = build.concat(files)
+const staticAssets = new Set(toCache)
+
+worker.addEventListener('install', event => {
+	// console.log('[Service Worker] Installation')
+	event.waitUntil(
+		caches
+			.open(cacheName)
+			.then(cache => cache.addAll(toCache))
+			.then(() => {
+				worker.skipWaiting()
+			})
+			.catch(error => console.error(error))
+	)
+})
+
+worker.addEventListener('activate', event => {
+	// console.log('[Service Worker] Activation')
+	event.waitUntil(
+		caches.keys()
+			.then(async (keys) => {
+				for (const key of keys) {
+					if (key !== cacheName) await caches.delete(key)
+				}
+			})
+	)
+	worker.clients.claim() // or should this be inside the caches.keys().then()?
+})
+
+// Fetch from network into cache and fall back to cache if user 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) {
+		const response = await cache.match(request)
+		if (response) return response
+		throw err
+	}
+}
+
+worker.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return
+
+	const url = new URL(event.request.url)
+	// console.log(`[Service Worker] Fetch ${url}`)
+
+	// don't try to handle data: or blob: URIs
+	const isHttp = url.protocol.startsWith('http')
+	const isDevServerRequest = url.hostname === self.location.hostname && url.port !== self.location.port
+	const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname)
+	const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset
+
+	if (isHttp && !isDevServerRequest && !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)
+			})()
+		)
+	}
+})

package/src/stores.ts

@@ -1,17 +1,11 @@
-import { writable } from 'svelte/store'
+import { writable, type Writable } from 'svelte/store'
 
 export const toast = writable({
-  title: '',
-  body: '',
-  isOpen: false
+	title: '',
+	body: '',
+	isOpen: false
 })
 
 // While server determines whether the user is logged in by examining RequestEvent.locals.user, the
 // loginSession is updated so all parts of the SPA client-side see the user and role.
-
-export const defaultUser: User = {
-  id: 0, // the not-logged-in user id
-  role: 'student' // default role for users who are not logged in
-}
-
-export const loginSession = writable(defaultUser)
+export const loginSession = <Writable<User>> writable(undefined)

package/svelte.config.js

@@ -31,6 +31,9 @@ const config = {
 				'object-src': ['none'],
 				'base-uri': ['self']
 			}
+		},
+		files: {
+			serviceWorker: 'src/service-worker.ts'
 		}
 	}
 }