feat: add asset caching (sw)

README.md

@@ -11,6 +11,7 @@
 </div>
 
 ## Table of Contents
+
 - [Main Features](#main-features)
 - [Getting Started](#getting-started)
   - [Setup](#setup)
@@ -124,6 +125,7 @@ ssh-copy-id -i ./id_rsa.pub user@host
 > Source: https://github.com/appleboy/ssh-action#setting-up-a-ssh-key
 
 ## Contributing
+
 We welcome contributions! Please visit our Trello board for project management and roadmap details. You can contribute by:
 
 - Creating issues for bugs, features, or discussions.

app/core/middlewares/service_worker_scope_extender.ts

@@ -0,0 +1,18 @@
+import { HttpContext } from '@adonisjs/core/http';
+
+const HEADER_NAME = 'Service-Worker-Allowed';
+
+export default class ServiceWorkerScopeExtender {
+	async handle(
+		{ request, response, logger }: HttpContext,
+		next: () => Promise<void>
+	) {
+		if (request.url().startsWith('/assets/sw.js')) {
+			response.header(HEADER_NAME, '/');
+			logger.debug(
+				`Header ${HEADER_NAME} for ${request.url()} set to ${response.getHeader(HEADER_NAME)}`
+			);
+		}
+		await next();
+	}
+}

config/project.ts

@@ -0,0 +1,12 @@
+const PROJECT_NAME = 'MyLinks';
+const PROJECT_DESCRIPTION =
+	'Another bookmark manager that lets you manage and share your favorite links in an intuitive interface';
+const PROJECT_URL = 'https://www.mylinks.app';
+const APP_COLOR = '#f0eef6';
+
+export default {
+	name: PROJECT_NAME,
+	description: PROJECT_DESCRIPTION,
+	url: PROJECT_URL,
+	color: APP_COLOR,
+};

inertia/components/navbar/navbar.tsx

@@ -31,7 +31,7 @@ export default function Navbar() {
 			<header className={classes.header}>
 				<Group justify="space-between" h="100%">
 					<Link href="/">
-						<Image src="/logo-light.png" h={35} alt="MyLinks's logo" />
+						<Image src="/logo.png" h={35} alt="MyLinks's logo" />
 					</Link>
 
 					<Group h="100%" gap={0} visibleFrom="sm">

package.json

@@ -6,13 +6,14 @@
 	"scripts": {
 		"start": "node bin/server.js",
 		"build": "node ace build",
-		"dev": "node ace serve --watch",
+		"dev": "node ace serve --hmr",
 		"test": "node ace test",
 		"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
 		"format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
 		"typecheck": "tsc --noEmit",
 		"prepare": "husky",
-		"release": "release-it"
+		"release": "release-it",
+		"generate-icons": "pwa-assets-generator"
 	},
 	"imports": {
 		"#admin/*": "./app/admin/*.js",
@@ -47,6 +48,7 @@
 		"@types/react": "^19.0.2",
 		"@types/react-dom": "^19.0.2",
 		"@typescript-eslint/eslint-plugin": "^8.19.0",
+		"@vite-pwa/assets-generator": "^0.2.6",
 		"@vitejs/plugin-react": "^4.3.4",
 		"eslint": "^9.17.0",
 		"hot-hook": "^0.4.0",
@@ -93,6 +95,7 @@
 		"react-i18next": "^15.4.0",
 		"react-icons": "^5.4.0",
 		"reflect-metadata": "^0.2.2",
+		"vite-plugin-pwa": "^0.21.1",
 		"zustand": "^5.0.2"
 	},
 	"hotHook": {

public/manifest.json

@@ -1,21 +0,0 @@
-{
-  "name": "MyLinks",
-  "short_name": "MyLinks",
-  "description": "MyLinks is a free and open source software, that lets you manage your favorite links in an intuitive interface",
-  "launch_handler": {
-    "client_mode": ["focus-existing", "auto"]
-  },
-  "icons": [
-    {
-      "src": "/favicon.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    }
-  ],
-  "theme_color": "#f0eef6",
-  "background_color": "#f0eef6",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait"
-}

pwa-assets.config.ts

@@ -0,0 +1,12 @@
+import {
+	defineConfig,
+	minimal2023Preset as preset,
+} from '@vite-pwa/assets-generator/config';
+
+export default defineConfig({
+	headLinkOptions: {
+		preset: '2023',
+	},
+	preset,
+	images: ['public/favicon.png'],
+});

resources/views/inertia_layout.edge

@@ -19,7 +19,7 @@
   />
   <link
     rel='manifest'
-    href='/manifest.json'
+    href='/assets/manifest.webmanifest'
   />
   <link
     rel='apple-touch-icon'
@@ -30,6 +30,13 @@
     href='/favicon.png'
   />
   <title inertia>MyLinks</title>
+	<script defer>
+    if('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/assets/sw.js', { scope: '/' })
+      })
+    }
+  </script>
 
   @routes()
   @inertiaHead()

start/kernel.ts

@@ -24,6 +24,7 @@ server.errorHandler(() => import('#core/exceptions/handler'));
  */
 server.use([
 	() => import('#core/middlewares/container_bindings_middleware'),
+	() => import('#core/middlewares/service_worker_scope_extender'),
 	() => import('@adonisjs/static/static_middleware'),
 	() => import('#core/middlewares/log_request'),
 	() => import('@adonisjs/cors/cors_middleware'),

tsconfig.json

@@ -4,5 +4,9 @@
 		"rootDir": "./",
 		"outDir": "./build"
 	},
-  "exclude": ["./inertia/**/*", "node_modules", "build"]
+	"exclude": [
+		"./inertia/**/*",
+		"node_modules",
+		"build"
+	]
 }

vite.config.ts

@@ -1,11 +1,103 @@
+import project from '#config/project';
 import { getDirname } from '@adonisjs/core/helpers';
 import inertia from '@adonisjs/inertia/client';
 import adonisjs from '@adonisjs/vite/client';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
 	plugins: [
+		VitePWA({
+			registerType: 'autoUpdate',
+			injectRegister: false,
+			strategies: 'generateSW',
+			devOptions: {
+				enabled: true,
+			},
+			manifest: {
+				name: project.name,
+				short_name: project.name,
+				description: project.description,
+				theme_color: project.color,
+				background_color: project.color,
+				scope: '/',
+				display: 'standalone',
+				orientation: 'portrait',
+				icons: [
+					{
+						src: '/pwa-64x64.png',
+						sizes: '64x64',
+						type: 'image/png',
+					},
+					{
+						src: '/pwa-192x192.png',
+						sizes: '192x192',
+						type: 'image/png',
+					},
+					{
+						src: '/pwa-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'any',
+					},
+					{
+						src: '/maskable-icon-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'maskable',
+					},
+				],
+				launch_handler: {
+					client_mode: ['focus-existing', 'auto'],
+				},
+			},
+			workbox: {
+				clientsClaim: true,
+				skipWaiting: true,
+				globPatterns: ['**/*.{js,css,html,png,svg,ico,json,woff2}'],
+				globIgnores: ['sw*.js', '**/manifest.webmanifest*'],
+				// undefined is required for solving the following error :
+				// Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/index.html"}]
+				// Source : https://github.com/vite-pwa/nuxt/issues/53#issuecomment-1615266204
+				navigateFallback: undefined,
+				runtimeCaching: [
+					{
+						urlPattern: /\.(?:js|css|woff2|woff|ttf|eot|otf)$/,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'static-assets-cache',
+							expiration: {
+								maxEntries: 50,
+								maxAgeSeconds: 60 * 60 * 24 * 30,
+							},
+						},
+					},
+					{
+						urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|ico)$/,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'images-cache',
+							expiration: {
+								maxEntries: 100,
+								maxAgeSeconds: 60 * 60 * 24 * 30,
+							},
+						},
+					},
+					{
+						urlPattern: /\/.*$/,
+						handler: 'NetworkFirst',
+						options: {
+							cacheName: 'html-cache',
+							expiration: {
+								maxEntries: 20,
+								maxAgeSeconds: 60 * 60 * 24 * 7,
+							},
+						},
+					},
+				],
+			},
+		}),
 		inertia({ ssr: { enabled: true, entrypoint: 'inertia/app/ssr.tsx' } }),
 		react(),
 		adonisjs({
@@ -14,10 +106,6 @@ export default defineConfig({
 		}),
 	],
 
-	/**
-	 * Define aliases for importing modules from
-	 * your frontend code
-	 */
 	resolve: {
 		alias: {
 			'~/': `${getDirname(import.meta.url)}/inertia/`,