feat(mapper): replace manager frontend PWA with mapper frontend PWA (#…

…2247) * feat: replace manager frontend PWA with mapper frontend PWA * refactor: removed missed console logs from project create flow * refactor: tidy error messages for invalid project mapper frontend * feat: configure pwa for mapper frontend * build: rename PWA to shorter FieldTM
hotosm · Mar 4, 2025 · 5477f91 · 5477f91
1 parent da3b91f
commit 5477f91
Show file tree

Hide file tree

Showing 14 changed files with 256 additions and 2,698 deletions.
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -41,7 +41,6 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^5.2.12",
-    "vite-plugin-pwa": "^0.20.0",
     "vitest": "^1.6.0",
     "workbox-window": "^7.1.0"
   },

diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
@@ -13,7 +13,6 @@ import '@hotosm/ui/dist/components';
 import environment from '@/environment';
 import AppRoutes from '@/routes';
 import { store, persistor } from '@/store/Store';
-import OfflineReadyPrompt from '@/components/OfflineReadyPrompt';
 
 const RefreshUserCookies = () => {
   const dispatch = useAppDispatch();
@@ -54,7 +53,6 @@ const App = () => {
       <PersistGate loading={null} persistor={persistor}>
         <RouterProvider router={AppRoutes} />
         <RefreshUserCookies />
-        <OfflineReadyPrompt />
         <hot-tracking site-id={environment.matomoTrackingId} domain={'fmtm.hotosm.org'}></hot-tracking>
       </PersistGate>
     </Provider>

diff --git a/src/frontend/src/components/OfflineReadyPrompt.tsx b/src/frontend/src/components/OfflineReadyPrompt.tsx
diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -58,8 +58,6 @@ const SelectForm = ({ flag, _geojsonFile, xlsFormFile, setXlsFormFile }) => {
     const { files } = event.target;
     // Set the selected file as the xlsFormFile state
     setXlsFormFile(files[0]);
-    console.log(files[0]);
-    console.log(xlsFormFile);
     handleCustomChange('xlsFormFileUpload', files[0]);
   };
   const resetFile = (): void => {

diff --git a/src/frontend/src/styles/OfflineReadyPrompt.css b/src/frontend/src/styles/OfflineReadyPrompt.css
diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json
@@ -29,8 +29,7 @@
     "noImplicitReturns": true,
     "strictPropertyInitialization": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "types": ["vite-plugin-pwa/react"]
+    "noUnusedParameters": true
   },
   "include": ["src", "src/**/*.ts", "tests"],
   "exclude": ["node_modules", "dist"]

diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
@@ -3,50 +3,11 @@ import path from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { configDefaults } from 'vitest/config';
-import { VitePWA } from 'vite-plugin-pwa';
-import type { VitePWAOptions } from 'vite-plugin-pwa';
-
-const pwaOptions: Partial<VitePWAOptions> = {
-  // this is temporary to remove the existing service worker
-  // prior to complete PWA removal
-  selfDestroying: true,
-  manifest: {
-    name: 'Field Mapping Tasking Manager',
-    short_name: 'FMTM',
-    description: 'Coordinated field mapping for Open Mapping campaigns.',
-    display: 'standalone',
-    theme_color: '#d63f3f',
-    background_color: '#d63f3f',
-    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',
-      },
-      {
-        src: 'maskable-icon-512x512.png',
-        sizes: '512x512',
-        type: 'image/png',
-        purpose: 'maskable',
-      },
-    ],
-  },
-};
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   return {
-    plugins: [react(), VitePWA(pwaOptions)],
+    plugins: [react()],
     server: {
       port: 7051,
       host: '0.0.0.0',

diff --git a/src/mapper/package.json b/src/mapper/package.json
@@ -29,6 +29,7 @@
 		"@typescript-eslint/eslint-plugin": "^8.16.0",
 		"@typescript-eslint/parser": "^8.16.0",
 		"@unocss/extractor-svelte": "^0.65.0-beta.2",
+		"@vite-pwa/sveltekit": "^0.6.7",
 		"eslint": "^9.16.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -40,7 +41,6 @@
 		"typescript": "^5.7.2",
 		"unocss": "^0.65.0-beta.2",
 		"vite": "^6.0.1",
-		"vite-plugin-pwa": "^0.21.1",
 		"vitest": "^2.1.6"
 	},
 	"dependencies": {

diff --git a/src/mapper/pnpm-lock.yaml b/src/mapper/pnpm-lock.yaml
diff --git a/src/mapper/src/routes/+layout.svelte b/src/mapper/src/routes/+layout.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
 	import '@hotosm/ui/dist/style.css';
 	import '@hotosm/ui/dist/hotosm-ui';
+	import { pwaInfo } from 'virtual:pwa-info';
 	import Toast from '$lib/components/toast.svelte';
 	import Header from '$lib/components/header.svelte';
 
 	let { data, children } = $props();
+	const webManifestLink = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
 </script>
 
+<svelte:head> 
+ 	{@html webManifestLink} 
+</svelte:head>
 <main class="flex flex-col h-screen overflow-hidden">
 	<Header />
 	<Toast />

diff --git a/src/mapper/src/routes/[projectId]/+page.ts b/src/mapper/src/routes/[projectId]/+page.ts
@@ -32,9 +32,12 @@ export const load: PageLoad = async ({ parent, params, fetch }) => {
 	if (projectResponse.status === 401) {
 		// TODO redirect to different error page to handle login
 		throw error(401, { message: `You must log in first` });
-	}
-	if (projectResponse.status === 404) {
+	} else if (projectResponse.status === 404) {
 		throw error(404, { message: `Project with ID (${projectId}) not found` });
+	} else if (projectResponse.status === 400) {
+		throw error(400, { message: `Invalid project ID (${projectId}). It must be numeric` });
+	} else if (projectResponse.status >= 300) {
+		throw error(400, { message: `Unknown error for project (${projectId})` });
 	}
 
 	return {

diff --git a/src/mapper/tsconfig.json b/src/mapper/tsconfig.json
@@ -10,7 +10,7 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-		"types": ["vite-plugin-pwa/client"],
+		"types": ["vite-plugin-pwa/client", "vite-plugin-pwa/info"],
 		"paths": {
 			"$lib/*": ["./src/lib/*"],
 			"$components/*": ["./src/components/*"],

diff --git a/src/mapper/vite.config.ts b/src/mapper/vite.config.ts
@@ -1,27 +1,61 @@
 import path from 'path';
 import { defineConfig } from 'vitest/config';
-import { VitePWA } from 'vite-plugin-pwa';
+import type { VitePWAOptions } from 'vite-plugin-pwa';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { paraglide } from '@inlang/paraglide-vite';
 import UnoCSS from 'unocss/vite';
 import extractorSvelte from '@unocss/extractor-svelte';
 
+const pwaOptions: Partial<VitePWAOptions> = {
+	registerType: 'autoUpdate',
+	devOptions: {
+		enabled: true,
+	},
+	manifest: {
+		name: 'FieldTM',
+		short_name: 'FieldTM',
+		description: 'Coordinated field mapping for Open Mapping campaigns.',
+		display: 'standalone',
+		theme_color: '#d63f3f',
+		background_color: '#d63f3f',
+		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',
+			},
+			{
+				src: 'maskable-icon-512x512.png',
+				sizes: '512x512',
+				type: 'image/png',
+				purpose: 'maskable',
+			},
+		],
+	},
+};
+
 export default defineConfig({
 	plugins: [
 		sveltekit(),
+		SvelteKitPWA(pwaOptions),
 		paraglide({
 			project: './project.inlang',
 			outdir: './src/translations',
 		}),
 		UnoCSS({
 			extractors: [extractorSvelte()],
 		}),
-		VitePWA({
-			registerType: 'autoUpdate',
-			devOptions: {
-				enabled: true,
-			},
-		}),
 	],
 	server: {
 		host: true,