Aller au contenu principal

Support Hors-Ligne

AISCouncil est une Progressive Web App (PWA) qui fonctionne hors-ligne après la première visite. L'application entière est un fichier HTML unique sans dépendances externes, elle peut donc être complètement mise en cache par le service worker du navigateur.

Progressive Web App (PWA)

L'application enregistre un service worker (sw.js) qui met en cache toutes les ressources statiques au premier chargement. Lors des visites ultérieures, l'application se charge instantanément depuis le cache — même sans connexion internet.

Installer comme Application

Chrome / Edge (Bureau) :

  1. Visitez aiscouncil.net
  2. Cliquez sur l'icône d'installation dans la barre d'adresse (ou allez dans Menu > "Install AISCouncil")
  3. L'application s'ouvre dans sa propre fenêtre, avec sa propre entrée dans la barre des tâches

Chrome / Edge (Android) :

  1. Visitez aiscouncil.net
  2. Tapotez le menu du navigateur (trois points)
  3. Sélectionnez "Add to Home screen" ou "Install app"

Safari (iOS / macOS) :

  1. Visitez aiscouncil.net
  2. Tapotez le bouton Partager
  3. Sélectionnez "Add to Home Screen"
astuce

Quand installée comme PWA, l'application s'exécute en mode standalone — pas de chrome de navigateur, expérience plein écran, et elle apparaît comme une application native dans votre sélecteur de tâches.

Stratégie de Cache du Service Worker

Le service worker utilise une stratégie stale-while-revalidate :

  1. Première visite : Toutes les ressources pré-mises en cache sont téléchargées et stockées dans le cache
  2. Visites ultérieures : La version en cache est servie immédiatement (zéro latence réseau), pendant que le service worker récupère une version mise à jour en arrière-plan
  3. Prochaine visite après mise à jour : La version mise à jour est servie depuis le cache

Cela signifie que vous obtenez toujours des temps de chargement instantanés, et les mises à jour arrivent silencieusement en arrière-plan.

Ce Qui Est Mis en Cache

Le service worker pré-met en cache ces fichiers à l'installation :

FichierObjectif
/Shell HTML (redirige vers /index.html)
/index.htmlL'application complète (~tout JS, CSS et HTML en ligne)
/icon.svgIcône vectorielle de l'application
/icon-192.pngIcône PNG 192x192 (écran d'accueil Android)
/icon-512.pngIcône PNG 512x512 (écrans de démarrage, masquable)
/favicon.icoFavicon d'onglet de navigateur
/manifest.webmanifestManifeste PWA (nom, icônes, couleur de thème)

De plus, toute requête GET de même origine que l'application fait sera mise en cache à la première récupération et servie depuis le cache lors des requêtes ultérieures (stale-while-revalidate).

Ce Qui N'Est PAS Mis en Cache

RessourcePourquoi
Appels API LLMIls vont directement aux APIs des fournisseurs (Anthropic, OpenAI, etc.) et nécessitent une connexion internet
Mises à jour du registreLes récupérations du registre de modèles depuis GitHub nécessitent le réseau, mais l'application revient aux données en cache/groupées
Ressources cross-originSeules les requêtes de même origine sont mises en cache par le service worker
Requêtes POST/PUT/DELETESeules les requêtes GET sont mises en cache
Appels proxy APILes requêtes vers /v1/* sont explicitement exclues de la mise en cache

Capacités Hors-Ligne

Hors-ligne, vous pouvez :

  • Parcourir les chats existants — tout l'historique de chat est stocké localement dans IndexedDB
  • Gérer les profils — créer, éditer et supprimer des profils de bots
  • Voir et changer les paramètres — tous les paramètres sont dans localStorage
  • Exporter des données — télécharger votre fichier JSON de sauvegarde
  • Basculer entre les bots — toutes les configs de bots sont stockées localement
  • Lire les conversations précédentes — historique complet des messages disponible

Hors-ligne, vous ne pouvez pas :

  • Envoyer de nouveaux messages — nécessite un appel API au fournisseur LLM
  • Rafraîchir le registre de modèles — nécessite une récupération depuis GitHub
  • Vous connecter — OAuth nécessite une connectivité réseau
  • Installer des mini-programmes — nécessite de récupérer le manifeste et le HTML d'entrée
info

Les utilisateurs d'Ollama avec une instance locale peuvent toujours discuter hors-ligne, puisque Ollama s'exécute sur localhost et ne nécessite pas d'accès internet.

Versionnage du Cache

Le service worker utilise un nom de cache versionné :

const CACHE = "ais-v1.0.0";

Quand la chaîne de version change (sur une mise à jour majeure), le nouveau service worker :

  1. Crée un nouveau cache avec le nouveau nom
  2. Pré-met en cache toutes les ressources dans le nouveau cache
  3. Supprime tous les anciens caches à l'activation
  4. Réclame tous les clients ouverts

Cela garantit que le code en cache périmé est nettoyé après les mises à jour majeures.

Mettre à Jour l'Application

Les mises à jour se font automatiquement :

  1. Quand vous visitez la page, le navigateur vérifie si sw.js a changé
  2. Si oui, le nouveau service worker est installé en arrière-plan
  3. Au prochain chargement de page (ou après fermeture de tous les onglets et réouverture), le nouveau service worker s'active
  4. La nouvelle version est maintenant servie depuis le cache
Forcer la Mise à Jour

Pour forcer une mise à jour immédiate : ouvrez DevTools > Application > Service Workers, cliquez "Update" sur le service worker enregistré, puis rechargez la page. Alternativement, maintenez Shift et cliquez sur le bouton de rechargement du navigateur pour contourner le cache.

Manifeste Web App

Le fichier manifest.webmanifest définit comment l'application apparaît lorsqu'elle est installée :

{
"name": "AISCouncil",
"short_name": "AISCouncil",
"description": "Discutez avec Claude, GPT ou Grok — pas de serveur, pas de configuration.",
"start_url": "/",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#7c3aed",
"categories": ["productivity", "utilities"],
"icons": [
{ "src": "icon.svg", "sizes": "any", "type": "image/svg+xml" },
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
ChampValeurObjectif
displaystandaloneS'exécute sans UI navigateur (barre d'adresse, onglets)
orientationanyFonctionne en portrait et paysage
theme_color#7c3aedAccent violet pour la barre de statut et la barre de titre
background_color#000000Arrière-plan de l'écran de démarrage pendant le chargement de l'application

Dépannage

L'application affiche une ancienne version :

  • Ouvrez DevTools > Application > Service Workers
  • Cliquez "Unregister" sur l'ancien service worker
  • Rechargez la page

L'application ne fonctionne pas hors-ligne :

  • Assurez-vous que le service worker est enregistré (DevTools > Application > Service Workers)
  • Assurez-vous d'avoir visité la page au moins une fois en ligne
  • Vérifiez que le cache existe (DevTools > Application > Cache Storage)
  • Certains navigateurs en mode privé/incognito désactivent les service workers

Le prompt d'installation n'apparaît pas :

  • La page doit être servie via HTTPS (ou localhost)
  • Le service worker doit être enregistré et actif
  • Le manifeste doit être valide et lié dans le <head> HTML
  • Vous devez avoir visité la page au moins deux fois avec un certain temps entre les visites (heuristique du navigateur)