Skip to main content

​
Offline mode

PlanningSup is a Progressive Web App (PWA), which means you can install it on your device and use it offline. This is powered by a Service Worker that caches your calendar data and app assets.

​
Benefits of offline mode

No internet requiredView your cached calendar even in areas with poor connectivity

Instant loadingThe app loads from cache instead of the network

Native app experienceInstalled PWAs appear in your app drawer and taskbar

Automatic updatesNew versions install in the background when you’re online

​
Installing the PWA

​
On mobile (Android / iOS)

1

Open PlanningSup

Visit planningsup.app in Chrome or Edge
2

Tap the install prompt

A banner appears at the bottom: “Add PlanningSup to Home screen”
3

Confirm installation

Tap “Install” or “Add”
4

Launch the app

Find the PlanningSup icon in your app drawer
If the banner doesn’t appear, tap the menu (⋮) → “Add to Home screen” or “Install app”.

​
On desktop (Windows / macOS / Linux)

1

Open PlanningSup

Visit planningsup.app in Chrome or Edge
2

Click the install icon

Look for the install icon (⊕ or computer) in the address bar
3

Confirm installation

Click “Install” in the popup
4

Launch the app

PlanningSup opens in a standalone window without browser chrome
You can also go to Menu → Install PlanningSup or Apps → Install this site as an app.

​
How offline mode works

PlanningSup uses a Service Worker to cache:
  1. App shell: HTML, CSS, JavaScript, fonts, and images
  2. Calendar data: Events fetched from the API (stored in IndexedDB)
  3. User preferences: Settings, colors, and filters (stored in localStorage)

​
Service Worker registration

// apps/web/src/composables/usePwa.ts
import { useRegisterSW } from 'virtual:pwa-register/vue'

const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
  immediate: true,
  onRegisteredSW(swUrl, r) {
    // Check for updates every hour
    setInterval(async () => {
      if ('onLine' in navigator && !navigator.onLine) return
      const resp = await fetch(swUrl, { cache: 'no-store' })
      if (resp?.status === 200) await r.update()
    }, 60 * 60 * 1000) // 1 hour
  },
})
The Service Worker is configured in apps/web/vite.config.ts using vite-plugin-pwa.

​
Offline-first data strategy

When you load a planning, PlanningSup follows this strategy:
1

Check for cached data

If events are in IndexedDB (from a previous fetch), display them immediately
2

Fetch from network in background

PlanningSup tries to fetch fresh data from the API
3

Update the UI if newer data is available

If the network fetch succeeds and returns newer events, the calendar updates
4

Fall back to cache if offline

If the network request fails (e.g., no internet), the cached data remains visible
// apps/web/src/composables/usePlanningData.ts
// Phase 1: Fast database-only fetch (parallel)
if (shouldHydrateFromDb) {
  const dbResults = await Promise.allSettled(
    needsDbHydrationIds.map(fullId =>
      client.api.plannings({ fullId }).get({
        query: { events: 'true', onlyDb: 'true' },
      }),
    ),
  )
  // Update UI immediately with DB data
}

// Phase 2: Network fetch (parallel, update UI as each completes)
for (const fullId of fullIds) {
  client.api.plannings({ fullId }).get({
    query: { events: 'true' },
  }).then(res => handleNetworkResult(fullId, res))
}
See apps/web/src/composables/usePlanningData.ts:181-357 for the full implementation.

​
Offline indicator

When you’re offline, PlanningSup displays a toast notification:
Hors connexion — Vous consultez des données mises en cache.
This appears automatically when:
  • The browser detects no network connection
  • A network request fails
The indicator disappears when connectivity is restored.

​
Update notifications

When a new version of PlanningSup is available, you’ll see a toast:
Nouvelle version disponible — Cliquez pour mettre à jour.
Click the toast to reload the app with the latest code. 
// apps/web/src/composables/usePwa.ts
watch(needRefresh, (value) => {
  if (value) console.info('[PWA] Nouvelle version disponible (rechargement requis)')
})
Updates install in the background and don’t interrupt your current session. The new version activates when you reload the page or close the app.

​
Clearing offline data

If you need to reset your offline cache:
1

Open browser settings

Go to Settings → Privacy → Site data (or similar)
2

Find planningsup.app

Search for “planningsup” in the list of sites
3

Clear site data

Delete cookies, cache, and IndexedDB data
4

Reload the app

Refresh the page to fetch fresh data
Alternatively, uninstall the PWA and reinstall it to start fresh.

​
Limitations of offline mode

Offline mode has some limitations:
  • No real-time updates: Cached events may be outdated if your schedule changes
  • Limited to cached plannings: Only plannings you’ve viewed while online are cached
  • Sign-in required for sync: Offline changes to settings do not sync until you’re online again

​
Checking offline status

PlanningSup uses the navigator.onLine API to detect connectivity: 
import { useOnline } from '@vueuse/core'

const isOnline = useOnline()

watch(isOnline, (online) => {
  if (!online) {
    // Show offline toast
  } else {
    // Hide offline toast and refresh data
  }
})
The useOnline() composable from VueUse listens to online and offline events on the window object.

​
Next steps

Sync preferences

Learn how to sync settings across devices

Browser extension

Install the Chrome extension for quick access

Build docs developers (and LLMs) love

Get started for freeTalk to us