marmelab · fzaninotto · Feb 12, 2026 · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -30,15 +30,15 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       # Override language selection by uncommenting this and choosing your languages
       # with:
       #   languages: go, javascript, csharp, python, cpp, java
 
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -52,4 +52,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3
diff --git a/Makefile b/Makefile
@@ -39,6 +39,18 @@ run-crm: ## run the crm example
 build-crm: ## build the crm example
 	@yarn build-crm
 
+run-offline: ## run the offline example (dev mode)
+	@yarn run-offline
+
+build-offline: ## build the offline example
+	@yarn build-offline
+
+preview-offline: ## preview the offline example
+	@yarn preview-offline
+
+serve-offline: ## serve the offline example (force reinstall service worker)
+	@yarn serve-offline
+
 build-ra-core:
 	@echo "Transpiling ra-core files...";
 	@cd ./packages/ra-core && yarn build

diff --git a/examples/ra-offline/.gitignore b/examples/ra-offline/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/ra-offline/README.md b/examples/ra-offline/README.md
@@ -0,0 +1,26 @@
+# ra-offline
+
+## Installation
+
+Install the application dependencies by running:
+
+```sh
+npm install
+```
+
+## Development
+
+Start the application in development mode by running:
+
+```sh
+npm run dev
+```
+
+## Production
+
+Build the application in production mode by running:
+
+```sh
+npm run build
+```
+
diff --git a/examples/ra-offline/dev-dist/registerSW.js b/examples/ra-offline/dev-dist/registerSW.js
@@ -0,0 +1,5 @@
+if ("serviceWorker" in navigator)
+  navigator.serviceWorker.register("/dev-sw.js?dev-sw", {
+    scope: "/",
+    type: "module",
+  });
diff --git a/examples/ra-offline/eslint.config.mjs b/examples/ra-offline/eslint.config.mjs
@@ -0,0 +1,44 @@
+import js from "@eslint/js";
+import { defineConfig, globalIgnores } from "eslint/config";
+import tseslint from "typescript-eslint";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import globals from "globals";
+
+export default defineConfig([
+  globalIgnores(["**/node_modules", "**/dist"]),
+  {
+    name: "eslint-js-recommended-rules",
+    plugins: {
+      js,
+    },
+    extends: ["js/recommended"],
+  },
+  tseslint.configs.recommended.map((conf) => ({
+    ...conf,
+    files: ["**/*.ts", "**/*.tsx"],
+  })),
+  eslintPluginPrettierRecommended,
+  {
+    name: "react",
+    ...react.configs.flat.recommended,
+  },
+  reactHooks.configs["recommended-latest"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+]);
diff --git a/examples/ra-offline/index.html b/examples/ra-offline/index.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>My Awesome App</title>
+    <meta name="description" content="My Awesome App description" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180" />
+    <link rel="mask-icon" href="/maskable-icon-512x512.png" color="#FFFFFF" />
+    <meta name="theme-color" content="#ffffff" />
+    <title>ra-offline</title>
+    <style>
+      .loader-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #fafafa;
+      }
+
+      /* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */
+
+      .loader,
+      .loader:before,
+      .loader:after {
+        border-radius: 50%;
+      }
+
+      .loader {
+        color: #283593;
+        font-size: 11px;
+        text-indent: -99999em;
+        margin: 55px auto;
+        position: relative;
+        width: 10em;
+        height: 10em;
+        box-shadow: inset 0 0 0 1em;
+        -webkit-transform: translateZ(0);
+        -ms-transform: translateZ(0);
+        transform: translateZ(0);
+      }
+
+      .loader:before,
+      .loader:after {
+        position: absolute;
+        content: "";
+      }
+
+      .loader:before {
+        width: 5.2em;
+        height: 10.2em;
+        background: #fafafa;
+        border-radius: 10.2em 0 0 10.2em;
+        top: -0.1em;
+        left: -0.1em;
+        -webkit-transform-origin: 5.2em 5.1em;
+        transform-origin: 5.2em 5.1em;
+        -webkit-animation: load2 2s infinite ease 1.5s;
+        animation: load2 2s infinite ease 1.5s;
+      }
+
+      .loader:after {
+        width: 5.2em;
+        height: 10.2em;
+        background: #fafafa;
+        border-radius: 0 10.2em 10.2em 0;
+        top: -0.1em;
+        left: 5.1em;
+        -webkit-transform-origin: 0px 5.1em;
+        transform-origin: 0px 5.1em;
+        -webkit-animation: load2 2s infinite ease;
+        animation: load2 2s infinite ease;
+      }
+
+      @-webkit-keyframes load2 {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes load2 {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root">
+      <div class="loader-container">
+        <div class="loader">Loading...</div>
+      </div>
+    </div>
+  </body>
+  <script type="module" src="/src/index.tsx"></script>
+</html>
diff --git a/examples/ra-offline/package.json b/examples/ra-offline/package.json
@@ -0,0 +1,50 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "serve": "REINSTALL=true PORT=4433 serve dist",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
+    "format": "prettier --write ./src"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/material": "^7.0.1",
+    "@tanstack/query-async-storage-persister": "^5.90.22",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-query-persist-client": "^5.90.22",
+    "ra-core": "^5.14.1",
+    "ra-data-json-server": "^5.14.1",
+    "ra-ui-materialui": "^5.14.1",
+    "react": "^19.0.0",
+    "react-admin": "^5.14.1",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.1.3",
+    "react-router-dom": "^7.1.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.23.0",
+    "@types/node": "^20.10.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.5",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.0.0",
+    "https-localhost": "^4.7.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.1.6",
+    "typescript-eslint": "^8.28.0",
+    "vite": "^6.2.6",
+    "vite-plugin-pwa": "^1.2.0"
+  },
+  "name": "ra-offline"
+}
diff --git a/examples/ra-offline/prettier.config.js b/examples/ra-offline/prettier.config.js
@@ -0,0 +1 @@
+export default {};
diff --git a/examples/ra-offline/public/apple-touch-icon-180x180.png b/examples/ra-offline/public/apple-touch-icon-180x180.png
diff --git a/examples/ra-offline/public/favicon.ico b/examples/ra-offline/public/favicon.ico
diff --git a/examples/ra-offline/public/logo.png b/examples/ra-offline/public/logo.png
diff --git a/examples/ra-offline/public/maskable-icon-512x512.png b/examples/ra-offline/public/maskable-icon-512x512.png
diff --git a/examples/ra-offline/public/pwa-192x192.png b/examples/ra-offline/public/pwa-192x192.png
diff --git a/examples/ra-offline/public/pwa-512x512.png b/examples/ra-offline/public/pwa-512x512.png
diff --git a/examples/ra-offline/public/pwa-64x64.png b/examples/ra-offline/public/pwa-64x64.png
diff --git a/examples/ra-offline/public/robots.txt b/examples/ra-offline/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/examples/ra-offline/src/App.tsx b/examples/ra-offline/src/App.tsx
@@ -0,0 +1,49 @@
+import { Admin, Resource, addOfflineSupportToQueryClient } from "react-admin";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
+import jsonDataProvider from "ra-data-json-server";
+import { QueryClient } from "@tanstack/react-query";
+import { Layout } from "./Layout";
+import { PostList } from "./PostList";
+import { PostEdit } from "./PostEdit";
+
+const dataProvider = jsonDataProvider("https://jsonplaceholder.typicode.com");
+
+const baseQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+      networkMode: "offlineFirst",
+    },
+  },
+});
+
+export const queryClient = addOfflineSupportToQueryClient({
+  queryClient: baseQueryClient,
+  dataProvider,
+  resources: ["posts", "comments", "users"],
+});
+
+const localStoragePersister = createAsyncStoragePersister({
+  storage: window.localStorage,
+});
+
+export const App = () => (
+  <PersistQueryClientProvider
+    client={queryClient}
+    persistOptions={{ persister: localStoragePersister }}
+    onSuccess={() => {
+      // resume mutations after initial restore from localStorage is successful
+      queryClient.resumePausedMutations();
+    }}
+  >
+    <Admin
+      layout={Layout}
+      dataProvider={dataProvider}
+      queryClient={queryClient}
+      disableTelemetry
+    >
+      <Resource name="posts" list={PostList} edit={PostEdit} />
+    </Admin>
+  </PersistQueryClientProvider>
+);
diff --git a/examples/ra-offline/src/Layout.tsx b/examples/ra-offline/src/Layout.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { Layout as RALayout, CheckForApplicationUpdate } from "react-admin";
+
+export const Layout = ({ children }: { children: ReactNode }) => (
+  <RALayout>
+    {children}
+    <CheckForApplicationUpdate />
+  </RALayout>
+);
diff --git a/examples/ra-offline/src/PostEdit.tsx b/examples/ra-offline/src/PostEdit.tsx
@@ -0,0 +1,12 @@
+import { Edit, ReferenceInput, SimpleForm, TextInput } from "react-admin";
+
+export const PostEdit = () => (
+  <Edit redirectOnError={false}>
+    <SimpleForm>
+      <ReferenceInput source="userId" reference="users" />
+      <TextInput source="id" />
+      <TextInput source="title" />
+      <TextInput source="body" />
+    </SimpleForm>
+  </Edit>
+);