N-FIN-57: add serwist and PWA configuration

This commit is contained in:
Markus Thielker 2024-03-17 20:28:41 +01:00
parent 609e0056da
commit a7863d4b31
No known key found for this signature in database
8 changed files with 1365 additions and 49 deletions

3
.gitignore vendored
View file

@ -38,3 +38,6 @@ next-env.d.ts
# IDE
/.idea
# serwist
public/sw.js

View file

@ -1,5 +1,11 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
import withSerwistInit from '@serwist/next';
const withSerwist = withSerwistInit({
swSrc: 'src/app/service-worker.ts',
swDest: 'public/sw.js',
});
export default withSerwist({
webpack: (config) => {
config.externals.push(
'@node-rs/argon2',
@ -11,6 +17,4 @@ const nextConfig = {
env: {
appVersion: process.env.npm_package_version,
},
};
export default nextConfig;
});

1318
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -32,6 +32,9 @@
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@serwist/next": "^8.4.4",
"@serwist/precaching": "^8.4.4",
"@serwist/sw": "^8.4.4",
"@tanstack/react-table": "^8.13.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",

16
public/manifest.json Normal file
View file

@ -0,0 +1,16 @@
{
"name": "Finances",
"short_name": "Finances",
"icons": [
{
"src": "/logo_white.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#0B0908",
"background_color": "#0B0908",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}

View file

@ -1,4 +1,4 @@
import type { Metadata } from 'next';
import type { Viewport } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { cn } from '@/lib/utils';
@ -8,9 +8,31 @@ import Navigation from '@/components/navigation';
const inter = Inter({subsets: ['latin']});
export const metadata: Metadata = {
title: 'Finances',
description: 'Track your finances with ease',
const APP_NAME = 'Finances';
const APP_DEFAULT_TITLE = 'Finances';
const APP_TITLE_TEMPLATE = `%s | ${APP_DEFAULT_TITLE}`;
const APP_DESCRIPTION = 'Track your finances with ease';
export const metadata = {
applicationName: APP_NAME,
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
},
description: APP_DESCRIPTION,
appleWebApp: {
capable: true,
statusBarStyle: 'default',
title: APP_DEFAULT_TITLE,
},
formatDetection: {
telephone: false,
},
};
export const viewport: Viewport = {
themeColor: '#0B0908',
width: 'device-width',
};
export default function RootLayout({
@ -20,6 +42,13 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<head>
<link crossOrigin="use-credentials" rel="manifest" href="/manifest.json"/>
<link
rel="icon"
href="/logo_white.png"
/>
</head>
<body className={cn('dark', inter.className)}>
<Navigation/>
<main className="p-4 sm:p-8">

15
src/app/service-worker.ts Normal file
View file

@ -0,0 +1,15 @@
import { defaultCache } from '@serwist/next/browser';
import type { PrecacheEntry } from '@serwist/precaching';
import { installSerwist } from '@serwist/sw';
declare const self: ServiceWorkerGlobalScope & {
__SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
};
installSerwist({
precacheEntries: self.__SW_MANIFEST,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: defaultCache,
});

View file

@ -3,7 +3,8 @@
"lib": [
"dom",
"dom.iterable",
"esnext"
"esnext",
"webworker"
],
"allowJs": true,
"skipLibCheck": true,
@ -25,7 +26,10 @@
"@/*": [
"./src/*"
]
}
},
"types": [
"@serwist/next/typings"
]
},
"include": [
"next-env.d.ts",