From e17c84882f763ceb34a046200de50ffed0f4b776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Wed, 3 Aug 2022 17:00:50 +0200
Subject: [PATCH] Reduce pwa consumption

---
 site/.gitignore                               |  4 +-
 site/scripts/utils.js                         |  1 +
 site/source/App.tsx                           | 62 ++++++++++++-------
 site/source/api/commune.ts                    | 10 ++-
 site/source/components/layout/NewsBanner.tsx  | 29 +++++++--
 site/source/hooks/useFetchData.ts             | 37 +++++++++++
 site/source/pages/Nouveautes/Nouveautes.tsx   | 27 +++-----
 site/source/pages/Offline.tsx                 | 20 ++++++
 .../pages/Stats/DemandesUtilisateurs.tsx      |  9 ++-
 site/source/pages/Stats/Stats.tsx             | 31 ++++++----
 site/source/pages/integration/index.tsx       |  7 ++-
 .../{ => public}/data/versement-mobilité.json |  0
 site/source/sw.ts                             | 29 +++++++--
 site/tsconfig.json                            |  3 +-
 site/vite-pwa-options.ts                      | 48 ++++++++++++++
 site/vite.config.ts                           | 58 +++++------------
 16 files changed, 260 insertions(+), 115 deletions(-)
 create mode 100644 site/source/hooks/useFetchData.ts
 create mode 100644 site/source/pages/Offline.tsx
 rename site/source/{ => public}/data/versement-mobilité.json (100%)
 create mode 100644 site/vite-pwa-options.ts

diff --git a/site/.gitignore b/site/.gitignore
index 4cc84f862..92d79a677 100644
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -1,6 +1,6 @@
 .env
-source/data/*
-!source/data/versement-mobilité.json
+source/public/data/*
+!source/public/data/versement-mobilité.json
 cypress/videos
 cypress/screenshots
 cypress/downloads
diff --git a/site/scripts/utils.js b/site/scripts/utils.js
index ac327fcaa..6838f2a38 100644
--- a/site/scripts/utils.js
+++ b/site/scripts/utils.js
@@ -7,6 +7,7 @@ const dataDir = join(
 	'..',
 	'..',
 	'source',
+	'public',
 	'data'
 )
 
diff --git a/site/source/App.tsx b/site/source/App.tsx
index 8bf3f866b..7587bf1ba 100644
--- a/site/source/App.tsx
+++ b/site/source/App.tsx
@@ -15,8 +15,10 @@ import {
 	configSituationSelector,
 	situationSelector,
 } from '@/selectors/simulationSelectors'
+import { ErrorBoundary } from '@sentry/react'
+import { FallbackRender } from '@sentry/react/types/errorboundary'
 import rules from 'modele-social'
-import { StrictMode, useContext, useMemo } from 'react'
+import { ComponentProps, StrictMode, useContext, useMemo } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -34,6 +36,7 @@ import Iframes from './pages/Iframes'
 import Integration from './pages/integration/index'
 import Landing from './pages/Landing/Landing'
 import Nouveautés from './pages/Nouveautes/Nouveautes'
+import Offline from './pages/Offline'
 import Simulateurs from './pages/Simulateurs'
 import Stats from './pages/Stats/LazyStats'
 import Provider, { ProviderProps } from './Provider'
@@ -106,6 +109,14 @@ const Router = () => {
 	)
 }
 
+const CatchOffline = ({ error }: ComponentProps<FallbackRender>) => {
+	if (error.message.includes('Failed to fetch dynamically imported module')) {
+		return <Offline />
+	} else {
+		throw error
+	}
+}
+
 const App = () => {
 	const { t } = useTranslation()
 	const sitePaths = useContext(SitePathsContext)
@@ -119,32 +130,35 @@ const App = () => {
 			/>
 
 			<Container>
-				{/* Passing location down to prevent update blocking */}
-				<Switch>
-					<Route path={sitePaths.créer.index} component={Créer} />
-					<Route path={sitePaths.gérer.index} component={Gérer} />
-					<Route path={sitePaths.simulateurs.index} component={Simulateurs} />
-					<Route
-						path={sitePaths.documentation.index}
-						component={Documentation}
-					/>
-					<Route path={sitePaths.développeur.index} component={Integration} />
-					<Route path={sitePaths.nouveautés} component={Nouveautés} />
-					<CompatRoute path={sitePaths.stats} component={Stats} />
-					<Route path={sitePaths.budget} component={Budget} />
-					<Route path={sitePaths.accessibilité} component={Accessibilité} />
+				<ErrorBoundary fallback={CatchOffline}>
+					{/* Passing location down to prevent update blocking */}
+					<Switch>
+						<Route path={sitePaths.créer.index} component={Créer} />
+						<Route path={sitePaths.gérer.index} component={Gérer} />
+						<Route path={sitePaths.simulateurs.index} component={Simulateurs} />
+						<Route
+							path={sitePaths.documentation.index}
+							component={Documentation}
+						/>
+						<Route path={sitePaths.développeur.index} component={Integration} />
+						<Route path={sitePaths.nouveautés} component={Nouveautés} />
+						<CompatRoute path={sitePaths.stats} component={Stats} />
+						<Route path={sitePaths.budget} component={Budget} />
+						<Route path={sitePaths.accessibilité} component={Accessibilité} />
 
-					<Route
-						exact
-						path="/dev/integration-test"
-						component={IntegrationTest}
-					/>
-					<Route exact path="/dev/personas" component={Personas} />
+						<Route
+							exact
+							path="/dev/integration-test"
+							component={IntegrationTest}
+						/>
+						<Route exact path="/dev/personas" component={Personas} />
 
-					<Route component={Route404} />
-				</Switch>
-				<Spacing xxl />
+						<Route component={Route404} />
+					</Switch>
+					<Spacing xxl />
+				</ErrorBoundary>
 			</Container>
+
 			{!isEmbedded && <Footer />}
 		</StyledLayout>
 	)
diff --git a/site/source/api/commune.ts b/site/source/api/commune.ts
index b096d3587..23fd4b8bd 100644
--- a/site/source/api/commune.ts
+++ b/site/source/api/commune.ts
@@ -96,7 +96,15 @@ async function tauxVersementTransport(
 		codeCommune = '132' + commune.codePostal.slice(-2)
 	}
 	// 2. On récupère le versement transport associé
-	const json = (await import('@/data/versement-mobilité.json')).default
+	const response = await fetch('/data/versement-mobilité.json')
+	if (!response.ok) {
+		// eslint-disable-next-line no-console
+		console.error(response)
+
+		return 0
+	}
+	const json =
+		(await response.json()) as typeof import('@/public/data/versement-mobilité.json')
 
 	return json[codeCommune as keyof typeof json] ?? 0
 }
diff --git a/site/source/components/layout/NewsBanner.tsx b/site/source/components/layout/NewsBanner.tsx
index 2c4637042..518085989 100644
--- a/site/source/components/layout/NewsBanner.tsx
+++ b/site/source/components/layout/NewsBanner.tsx
@@ -1,23 +1,32 @@
-import { Appear } from '@/components/ui/animate'
 import Emoji from '@/components/utils/Emoji'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
-import lastRelease from '@/data/last-release.json'
 import { Banner, HideButton, InnerBanner } from '@/design-system/banner'
 import { Link } from '@/design-system/typography/link'
+import { useFetchData } from '@/hooks/useFetchData'
 import { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getItem, setItem } from '../../storage/safeLocalStorage'
 
 const localStorageKey = 'last-viewed-release'
 
-export const hideNewsBanner = () => {
-	setItem(localStorageKey, lastRelease.name)
+type LastRelease = typeof import('@/public/data/last-release.json')
+
+export const useHideNewsBanner = () => {
+	const { data: lastReleaseData } = useFetchData<LastRelease>(
+		'/data/last-release.json'
+	)
+
+	useEffect(() => {
+		if (lastReleaseData) {
+			setItem(localStorageKey, lastReleaseData.name)
+		}
+	}, [lastReleaseData])
 }
 
 export const determinant = (word: string) =>
 	/^[aeiouy]/i.exec(word) ? 'd’' : 'de '
 
-export default function NewsBanner() {
+function NewsBanner({ lastRelease }: { lastRelease: LastRelease }) {
 	const sitePaths = useContext(SitePathsContext)
 	const { t } = useTranslation()
 	const lastViewedRelease = getItem(localStorageKey)
@@ -58,3 +67,13 @@ export default function NewsBanner() {
 		</Banner>
 	)
 }
+
+export default function NewsBannerWrapper() {
+	const { data: lastReleaseData } = useFetchData<LastRelease>(
+		'/data/last-release.json'
+	)
+
+	return lastReleaseData === null ? null : (
+		<NewsBanner lastRelease={lastReleaseData} />
+	)
+}
diff --git a/site/source/hooks/useFetchData.ts b/site/source/hooks/useFetchData.ts
new file mode 100644
index 000000000..7e480936c
--- /dev/null
+++ b/site/source/hooks/useFetchData.ts
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+export const useFetchData = <T>(url: string) => {
+	const [data, setData] = useState<null | T>(null)
+	const [loading, setLoading] = useState<boolean>(true)
+
+	useEffect(() => {
+		const controller = new AbortController()
+
+		const fetchData = async () => {
+			setLoading(true)
+			try {
+				const response = await fetch(url, {
+					signal: controller.signal,
+				})
+
+				if (response.ok) {
+					const resData = (await response.json()) as T
+					setData(resData)
+				}
+				setLoading(false)
+			} catch (err) {
+				if (err instanceof Error && err.name !== 'AbortError') {
+					throw err
+				}
+			}
+		}
+
+		void fetchData()
+
+		return () => {
+			controller.abort()
+		}
+	}, [url])
+
+	return { data, loading }
+}
diff --git a/site/source/pages/Nouveautes/Nouveautes.tsx b/site/source/pages/Nouveautes/Nouveautes.tsx
index 02ac5138b..29e7d0c85 100644
--- a/site/source/pages/Nouveautes/Nouveautes.tsx
+++ b/site/source/pages/Nouveautes/Nouveautes.tsx
@@ -1,4 +1,4 @@
-import { determinant, hideNewsBanner } from '@/components/layout/NewsBanner'
+import { determinant, useHideNewsBanner } from '@/components/layout/NewsBanner'
 import MoreInfosOnUs from '@/components/MoreInfosOnUs'
 import Emoji from '@/components/utils/Emoji'
 import { MarkdownWithAnchorLinks } from '@/components/utils/markdown'
@@ -10,7 +10,8 @@ import { Container, Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
 import { GenericButtonOrLinkProps, Link } from '@/design-system/typography/link'
 import { Body } from '@/design-system/typography/paragraphs'
-import { useContext, useEffect, useMemo, useState } from 'react'
+import { useFetchData } from '@/hooks/useFetchData'
+import { useContext, useMemo } from 'react'
 import { Navigate, useMatch, useNavigate } from 'react-router-dom-v5-compat'
 import styled from 'styled-components'
 import { TrackPage } from '../../ATInternetTracking'
@@ -22,31 +23,21 @@ type ReleasesData = Array<{
 	description: string
 }>
 
+type Releases = typeof import('@/public/data/releases.json')
+
 export default function Nouveautés() {
-	// The release.json file may be big, we don't want to include it in the main
-	// bundle, that's why we only fetch it on this page.
-	const [data, setData] = useState<ReleasesData>([])
-	useEffect(() => {
-		import('@/data/releases.json')
-			.then(({ default: data }) => {
-				setData(data)
-			})
-			.catch((err) =>
-				// eslint-disable-next-line no-console
-				console.error(err)
-			)
-	}, [])
+	const { data } = useFetchData<Releases>('/data/releases.json')
 	const navigate = useNavigate()
 	const sitePaths = useContext(SitePathsContext)
 	const slug = useMatch(`${sitePaths.nouveautés}/:slug`)?.params?.slug
-	useEffect(hideNewsBanner, [])
+	useHideNewsBanner()
 
 	const releasesWithId = useMemo(
-		() => data && data.map((v, id) => ({ ...v, id })),
+		() => (data && data.map((v, id) => ({ ...v, id }))) ?? [],
 		[data]
 	)
 
-	if (data.length === 0) {
+	if (!data?.length) {
 		return null
 	}
 
diff --git a/site/source/pages/Offline.tsx b/site/source/pages/Offline.tsx
new file mode 100644
index 000000000..018ac5aa4
--- /dev/null
+++ b/site/source/pages/Offline.tsx
@@ -0,0 +1,20 @@
+import { Message } from '@/design-system'
+import { Grid } from '@/design-system/layout'
+import { Intro, Body } from '@/design-system/typography/paragraphs'
+
+export default function Offline() {
+	return (
+		<Grid container css={{ justifyContent: 'center', margin: '10rem 0' }}>
+			<Grid item md={8} sm={12}>
+				<Message type="info" css={{ margin: '1rem 0' }}>
+					<Intro>Vous êtes actuellement hors ligne.</Intro>
+					<Body>
+						Cette page n'a pas encore été téléchargée et n'est donc pas
+						disponible sans internet, pour y accéder vérifiez votre connexion
+						puis rechargez la page.
+					</Body>
+				</Message>
+			</Grid>
+		</Grid>
+	)
+}
diff --git a/site/source/pages/Stats/DemandesUtilisateurs.tsx b/site/source/pages/Stats/DemandesUtilisateurs.tsx
index 9530ff744..e034ae5de 100644
--- a/site/source/pages/Stats/DemandesUtilisateurs.tsx
+++ b/site/source/pages/Stats/DemandesUtilisateurs.tsx
@@ -2,11 +2,14 @@ import { H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
+import { useFetchData } from '@/hooks/useFetchData'
 import { useState } from 'react'
 import styled from 'styled-components'
-import stats from '@/data/stats.json'
+import { StatsStruct } from './types'
 
 export default function DemandeUtilisateurs() {
+	const { data: stats } = useFetchData<StatsStruct>('/data/stats.json')
+
 	return (
 		<section>
 			<H2 id="demandes-utilisateurs">Demandes utilisateurs</H2>
@@ -22,10 +25,10 @@ export default function DemandeUtilisateurs() {
 			</Body>
 
 			<H3>En attente d'implémentation</H3>
-			<Pagination items={stats.retoursUtilisateurs.open} />
+			<Pagination items={stats?.retoursUtilisateurs.open ?? []} />
 
 			<H3>Réalisées</H3>
-			<Pagination items={stats.retoursUtilisateurs.closed} />
+			<Pagination items={stats?.retoursUtilisateurs.closed ?? []} />
 		</section>
 	)
 }
diff --git a/site/source/pages/Stats/Stats.tsx b/site/source/pages/Stats/Stats.tsx
index 424f9eee5..13b9e9ba4 100644
--- a/site/source/pages/Stats/Stats.tsx
+++ b/site/source/pages/Stats/Stats.tsx
@@ -2,11 +2,12 @@ import PagesChart from '@/components/charts/PagesCharts'
 import InfoBulle from '@/components/ui/InfoBulle'
 import Emoji from '@/components/utils/Emoji'
 import { useScrollToHash } from '@/components/utils/markdown'
-import statsJson from '@/data/stats.json'
 import { Radio, ToggleGroup } from '@/design-system/field'
 import { Item, Select } from '@/design-system/field/Select'
 import { Grid, Spacing } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
+import { Body, Intro } from '@/design-system/typography/paragraphs'
+import { useFetchData } from '@/hooks/useFetchData'
 import { formatValue } from 'publicodes'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Trans } from 'react-i18next'
@@ -24,16 +25,9 @@ import SatisfactionChart from './SatisfactionChart'
 import { Page, PageChapter2, PageSatisfaction, StatsStruct } from './types'
 import { formatDay, formatMonth } from './utils'
 
-const stats = statsJson as unknown as StatsStruct
-
 type Period = 'mois' | 'jours'
 type Chapter2 = PageChapter2 | 'PAM'
 
-const chapters2: Chapter2[] = [
-	...new Set(stats.visitesMois?.pages.map((p) => p.page_chapter2)),
-	'PAM',
-]
-
 type Pageish = Page | PageSatisfaction
 
 const isPAM = (name: string | undefined) =>
@@ -116,7 +110,11 @@ interface BrushStartEndIndex {
 	endIndex?: number
 }
 
-const StatsDetail = () => {
+interface StatsDetailProps {
+	stats: StatsStruct
+}
+
+const StatsDetail = ({ stats }: StatsDetailProps) => {
 	const defaultPeriod = 'mois'
 	const [searchParams, setSearchParams] = useSearchParams()
 	useScrollToHash()
@@ -185,6 +183,11 @@ const StatsDetail = () => {
 		[slicedVisits]
 	)
 
+	const chapters2: Chapter2[] = [
+		...new Set(stats.visitesMois?.pages.map((p) => p.page_chapter2)),
+		'PAM',
+	]
+
 	return (
 		<>
 			<H2>Statistiques détaillées</H2>
@@ -306,17 +309,21 @@ const Indicators = styled.div`
 `
 
 export default function Stats() {
-	const statsAvailable = stats.visitesMois !== undefined
+	const { data: stats, loading } = useFetchData<StatsStruct>('/data/stats.json')
+
+	const statsAvailable = stats?.visitesMois != null
 
 	return (
 		<>
 			{statsAvailable ? (
 				<>
-					<StatsDetail />
+					<StatsDetail stats={stats} />
 					<GlobalStats stats={stats} />
 				</>
+			) : loading ? (
+				<Intro>Chargement des statistiques...</Intro>
 			) : (
-				<p>Statistiques indisponibles.</p>
+				<Body>Statistiques indisponibles.</Body>
 			)}
 
 			<DemandeUtilisateurs />
diff --git a/site/source/pages/integration/index.tsx b/site/source/pages/integration/index.tsx
index 1be6dc85d..b7cc680a0 100644
--- a/site/source/pages/integration/index.tsx
+++ b/site/source/pages/integration/index.tsx
@@ -1,12 +1,12 @@
 import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
-import jobOffers from '@/data/job-offers.json'
 import { Banner, InnerBanner } from '@/design-system/banner'
 import { Link } from '@/design-system/typography/link'
+import { useFetchData } from '@/hooks/useFetchData'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
-import { Routes, Route, useLocation } from 'react-router-dom-v5-compat'
+import { Route, Routes, useLocation } from 'react-router-dom-v5-compat'
 import { TrackChapter } from '../../ATInternetTracking'
 import API from './API'
 import Iframe from './Iframe'
@@ -23,7 +23,8 @@ type JobOffer = {
 export default function Integration() {
 	const sitePaths = useContext(SitePathsContext)
 	const { pathname } = useLocation()
-	const openJobOffer = (jobOffers as Array<JobOffer>)[0]
+	const { data: jobOffers } = useFetchData<JobOffer[]>('/data/job-offers.json')
+	const openJobOffer = jobOffers?.[0]
 
 	return (
 		<TrackChapter chapter1="integration">
diff --git a/site/source/data/versement-mobilité.json b/site/source/public/data/versement-mobilité.json
similarity index 100%
rename from site/source/data/versement-mobilité.json
rename to site/source/public/data/versement-mobilité.json
diff --git a/site/source/sw.ts b/site/source/sw.ts
index 4fdf304b0..3e4855bc7 100644
--- a/site/source/sw.ts
+++ b/site/source/sw.ts
@@ -36,6 +36,24 @@ const HOUR = 60 * 60
 const DAY = HOUR * 24
 const YEAR = DAY * 365
 
+const networkFirstJS = new Route(
+	({ sameOrigin, url }) => {
+		return sameOrigin && /assets\/.*\.js$/.test(url.pathname)
+	},
+	new NetworkFirst({
+		cacheName: 'js-cache',
+		plugins: [
+			new ExpirationPlugin({
+				maxAgeSeconds: 30 * DAY,
+				maxEntries: 40,
+			}),
+		],
+		fetchOptions: {},
+	})
+)
+
+registerRoute(networkFirstJS)
+
 const staleWhileRevalidate = new Route(
 	({ request, sameOrigin, url }) => {
 		return (
@@ -77,11 +95,12 @@ registerRoute(networkFirstPolyfill)
 const networkFirstAPI = new Route(
 	({ sameOrigin, url }) => {
 		return (
-			!sameOrigin &&
-			[
-				'api.recherche-entreprises.fabrique.social.gouv.fr',
-				'geo.api.gouv.fr',
-			].includes(url.hostname)
+			(!sameOrigin &&
+				[
+					'api.recherche-entreprises.fabrique.social.gouv.fr',
+					'geo.api.gouv.fr',
+				].includes(url.hostname)) ||
+			(sameOrigin && /data\/.*\.json$/.test(url.pathname))
 		)
 	},
 	new NetworkFirst({
diff --git a/site/tsconfig.json b/site/tsconfig.json
index 95f294985..7828c9a4c 100644
--- a/site/tsconfig.json
+++ b/site/tsconfig.json
@@ -29,6 +29,7 @@
 		"test/**/*.ts",
 		"vite.config.ts",
 		"vite-iframe-script.config.ts",
-		"prerender.ts"
+		"prerender.ts",
+		"vite-pwa-options.ts"
 	]
 }
diff --git a/site/vite-pwa-options.ts b/site/vite-pwa-options.ts
new file mode 100644
index 000000000..dab575d4a
--- /dev/null
+++ b/site/vite-pwa-options.ts
@@ -0,0 +1,48 @@
+import { Options } from 'vite-plugin-pwa'
+
+export const pwaOptions: Partial<Options> = {
+	registerType: 'prompt',
+	strategies: 'injectManifest',
+	srcDir: 'source',
+	filename: 'sw.ts',
+	injectManifest: {
+		maximumFileSizeToCacheInBytes: 3000000,
+		manifestTransforms: [
+			(entries) => {
+				const manifest = entries.filter(
+					(entry) => !/assets\/.*(-legacy|lazy_)/.test(entry.url)
+				)
+
+				return { manifest }
+			},
+		],
+	},
+	includeAssets: [
+		'logo-*.png',
+		'fonts/*.{woff,woff2}',
+		'références-images/*.{jpg,png,svg}',
+	],
+	manifest: {
+		start_url: '/',
+		name: 'Mon entreprise',
+		short_name: 'Mon entreprise',
+		description: "L'assistant officiel du créateur d'entreprise",
+		lang: 'fr',
+		orientation: 'portrait-primary',
+		display: 'minimal-ui',
+		theme_color: '#2975d1',
+		background_color: '#ffffff',
+		icons: [
+			{
+				src: '/favicon/android-chrome-192x192-shadow.png?v=2.0',
+				sizes: '192x192',
+				type: 'image/png',
+			},
+			{
+				src: '/favicon/android-chrome-512x512-shadow.png?v=2.0',
+				sizes: '512x512',
+				type: 'image/png',
+			},
+		],
+	},
+}
diff --git a/site/vite.config.ts b/site/vite.config.ts
index fc723a98e..a6ebc84b7 100644
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -11,6 +11,7 @@ import { defineConfig, loadEnv, Plugin } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import shimReactPdf from 'vite-plugin-shim-react-pdf'
 import { runScriptOnFileChange } from './scripts/runScriptOnFileChange'
+import { pwaOptions } from './vite-pwa-options'
 
 const env = (mode: string) => loadEnv(mode, process.cwd(), '')
 
@@ -21,7 +22,18 @@ export default defineConfig(({ command, mode }) => ({
 	},
 	publicDir: 'source/public',
 	build: {
-		sourcemap: true,
+		sourcemap: !true,
+		rollupOptions: {
+			output: {
+				chunkFileNames: (chunkInfo) => {
+					if (chunkInfo.isDynamicEntry) {
+						return 'assets/lazy_[name].[hash].js'
+					}
+
+					return 'assets/[name].[hash].js'
+				},
+			},
+		},
 	},
 	plugins: [
 		{
@@ -54,7 +66,7 @@ export default defineConfig(({ command, mode }) => ({
 						"mon-entreprise.urssaf.fr : L'assistant officiel du créateur d'entreprise",
 					description:
 						'Du statut juridique à la première embauche, en passant par la simulation des cotisations, vous trouverez ici toutes les ressources pour démarrer votre activité.',
-					shareImage: 'https://mon-entreprise.urssaf.fr/logo-share.png',
+					shareImage: '/logo-share.png',
 				},
 				infrance: {
 					lang: 'en',
@@ -63,48 +75,11 @@ export default defineConfig(({ command, mode }) => ({
 						'My company in France: A step-by-step guide to start a business in France',
 					description:
 						'Find the type of company that suits you and follow the steps to register your company. Discover the French social security system by simulating your hiring costs. Discover the procedures to hire in France and learn the basics of French labour law.',
-					shareImage:
-						'https://mon-entreprise.urssaf.fr/logo-mycompany-share.png',
+					shareImage: '/logo-mycompany-share.png',
 				},
 			},
 		}),
-		VitePWA({
-			registerType: 'prompt',
-			strategies: 'injectManifest',
-			srcDir: 'source',
-			filename: 'sw.ts',
-			injectManifest: {
-				maximumFileSizeToCacheInBytes: 3000000,
-			},
-			includeAssets: [
-				'logo-*.png',
-				'fonts/*.{woff,woff2}',
-				'références-images/*.{jpg,png,svg}',
-			],
-			manifest: {
-				start_url: '/',
-				name: 'Mon entreprise',
-				short_name: 'Mon entreprise',
-				description: "L'assistant officiel du créateur d'entreprise",
-				lang: 'fr',
-				orientation: 'portrait-primary',
-				display: 'minimal-ui',
-				theme_color: '#2975d1',
-				background_color: '#ffffff',
-				icons: [
-					{
-						src: '/favicon/android-chrome-192x192-shadow.png?v=2.0',
-						sizes: '192x192',
-						type: 'image/png',
-					},
-					{
-						src: '/favicon/android-chrome-512x512-shadow.png?v=2.0',
-						sizes: '512x512',
-						type: 'image/png',
-					},
-				],
-			},
-		}),
+		VitePWA(pwaOptions),
 		legacy({
 			targets: ['defaults', 'not IE 11'],
 		}),
@@ -227,6 +202,7 @@ function multipleSPA(options: MultipleSPAOptions): Plugin {
 				config.build = {
 					...config.build,
 					rollupOptions: {
+						...config.build?.rollupOptions,
 						input: Object.fromEntries(
 							Object.keys(options.sites).map((name) => [
 								name,