⚡️(service-worker) manage document versioning

- Cache correctly the document version to work
in offline mode.
- Restoring a version is possible even if offline.
- Better sync triggering.

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx

@@ -65,7 +65,7 @@ const VersionListState = ({
       {error && (
         <Box
           $justify="center"
-          $margin={{ vertical: 'big', horizontal: 'auto' }}
+          $margin={{ vertical: 'small', horizontal: 'small' }}
         >
           <TextErrors
             causes={error.cause}

src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts

@@ -15,7 +15,13 @@ interface OptionsMutate {
   type: 'update' | 'delete' | 'create';
 }
 
-type Options = (OptionsReadonly | OptionsMutate) & { syncManager: SyncManager };
+interface OptionsSync {
+  type: 'synch';
+}
+
+type Options = (OptionsReadonly | OptionsMutate | OptionsSync) & {
+  syncManager: SyncManager;
+};
 
 export class ApiPlugin implements WorkboxPlugin {
   private readonly options: Options;

src/frontend/apps/impress/src/features/service-worker/service-worker-api.ts

@@ -28,7 +28,8 @@ export const isApiUrl = (href: string) => {
  */
 registerRoute(
   ({ url }) =>
-    isApiUrl(url.href) && url.href.match(/.*\/documents\/\?(page|ordering)=.*/),
+    isApiUrl(url.href) &&
+    url.href.match(/.*\/documents\/\?(page|ordering)=.*/g),
   new NetworkOnly({
     plugins: [
       new ApiPlugin({
@@ -42,7 +43,8 @@ registerRoute(
 );
 
 registerRoute(
-  ({ url }) => isApiUrl(url.href) && url.href.match(/.*\/documents\/.*\//),
+  ({ url }) =>
+    isApiUrl(url.href) && url.href.match(/.*\/documents\/([a-z0-9\-]+)\/$/g),
   new NetworkOnly({
     plugins: [
       new ApiPlugin({
@@ -56,7 +58,8 @@ registerRoute(
 );
 
 registerRoute(
-  ({ url }) => isApiUrl(url.href) && url.href.match(/.*\/documents\/.*\//),
+  ({ url }) =>
+    isApiUrl(url.href) && url.href.match(/.*\/documents\/([a-z0-9\-]+)\/$/g),
   new NetworkOnly({
     plugins: [
       new ApiPlugin({
@@ -69,7 +72,7 @@ registerRoute(
 );
 
 registerRoute(
-  ({ url }) => isApiUrl(url.href) && url.href.match(/.*\/documents\//),
+  ({ url }) => isApiUrl(url.href) && url.href.match(/.*\/documents\/$/g),
   new NetworkOnly({
     plugins: [
       new ApiPlugin({
@@ -82,7 +85,8 @@ registerRoute(
 );
 
 registerRoute(
-  ({ url }) => isApiUrl(url.href) && url.href.match(/.*\/documents\/.*\//),
+  ({ url }) =>
+    isApiUrl(url.href) && url.href.match(/.*\/documents\/([a-z0-9\-]+)\/$/g),
   new NetworkOnly({
     plugins: [
       new ApiPlugin({
@@ -103,6 +107,10 @@ registerRoute(
       new ExpirationPlugin({
         maxAgeSeconds: 24 * 60 * 60 * DAYS_EXP,
       }),
+      new ApiPlugin({
+        type: 'synch',
+        syncManager,
+      }),
     ],
   }),
   'GET',

src/frontend/apps/impress/src/features/service-worker/service-worker.ts

@@ -87,6 +87,7 @@ self.addEventListener('activate', function (event) {
 const FALLBACK = {
   offline: '/offline/',
   docs: '/docs/[id]/',
+  versions: '/docs/[id]/versions/[versionId]/',
   images: '/assets/img-not-found.svg',
 };
 const precacheResources = [
@@ -99,6 +100,7 @@ const precacheResources = [
   FALLBACK.offline,
   FALLBACK.images,
   FALLBACK.docs,
+  FALLBACK.versions,
 ];
 
 const precacheStrategy = getStrategy({
@@ -117,8 +119,14 @@ setCatchHandler(async ({ request, url, event }) => {
       return ApiPlugin.getApiCatchHandler();
 
     case request.destination === 'document':
-      if (url.pathname.match(/^\/docs\/.*\//)) {
+      if (url.pathname.match(/^\/docs\/([a-z0-9\-]+)\/$/g)) {
         return precacheStrategy.handle({ event, request: FALLBACK.docs });
+      } else if (
+        url.pathname.match(
+          /^\/docs\/([a-z0-9\-]+)\/versions\/([a-z0-9\-]+)\/$/g,
+        )
+      ) {
+        return precacheStrategy.handle({ event, request: FALLBACK.versions });
       }
 
       return precacheStrategy.handle({ event, request: FALLBACK.offline });