Application web · PWA
Carnet, une application de prise de notes hors ligne et sans compte
Carnet est une application web progressive de prise de notes que j'ai conçue et développée. Elle fonctionne entièrement hors ligne et sans compte : les notes sont stockées dans le navigateur et ne quittent jamais l'appareil.
- PWA
- IndexedDB
- JavaScript
- Playwright
L'idée
Prendre une note vite, sur son téléphone ou son ordinateur, sans inscription et sans confier ses notes à un serveur. Carnet s'installe sur l'écran d'accueil et s'ouvre sans réseau.
Côté code, le même principe de sobriété : aucune dépendance, aucun build. Le dossier se déploie tel quel sur n'importe quel hébergement statique en HTTPS. Seules les visites sont comptées, sans cookie ; le contenu des notes n'est jamais envoyé.
- Aucun compte, aucune note envoyée
- Fonctionne sans réseau
- Aucune dépendance, aucun build
- Export et import de toutes les notes
Fonctionnalités clés
Notes et enregistrement automatique
Créer, épingler et supprimer des notes, avec une suppression annulable. L'enregistrement se fait pendant la frappe et l'application demande au navigateur un stockage persistant.
Markdown léger et mode Lecture
Titres, listes, cases à cocher cliquables, citations, couleurs et surlignage. Une barre de mise en forme s'affiche au-dessus du clavier sur mobile.
Recherche et tags
Recherche instantanée dans les titres et les textes, insensible aux accents, avec surlignage. Tout #mot-clé devient un filtre.
Dictée vocale
Le texte dicté est inséré au curseur, en français, quand le navigateur propose la reconnaissance vocale.
Photos et croquis
Images jointes réduites à 1600 px, croquis dessinés au doigt ou à la souris avec stylo, surligneur et gomme.
Corbeille et export
Une note supprimée reste trente jours dans la corbeille. Export JSON, import par fusion où la version la plus récente gagne, et rappel quand le dernier export date de plus de trente jours.
Partage depuis Android
Partager un texte ou un lien vers Carnet propose de créer une note. Un raccourci « Note rapide » ouvre directement l'éditeur.
Confort au quotidien
Mode sombre automatique, disposition mobile à un écran, raccourcis clavier et tri par date ou par titre.
Choix techniques
HTML, CSS et JavaScript sans framework ni dépendance, avec les API du navigateur pour tout le reste.
IndexedDB
Les notes et leurs pièces jointes sont stockées dans le navigateur. L'export JSON inclut les images en base64 et la corbeille.
Service worker
L'application est mise en cache pour fonctionner hors ligne. Une nouvelle version est détectée au retour au premier plan, au retour du réseau et toutes les heures, puis annoncée par un message.
Cible de partage
Le partage Android arrive en POST au service worker, qui dépose le texte dans IndexedDB et redirige vers l'accueil : le contenu partagé n'atteint jamais le serveur.
Tests Playwright
Les scénarios critiques sont rejoués sur Chrome de bureau et un Pixel 5 : persistance, corbeille, recherche, mode Lecture, pièces jointes, export puis import, et mise à jour du service worker.
Déploiement continu
Chaque push lance les tests, puis un déploiement par SSH en deux passes et une vérification de ce que le site publie réellement.
Technologies
- JavaScript
- PWA
- IndexedDB
- Service worker
- Web Share Target
- Playwright
- GitHub Actions
Défis et enseignements
Des mises à jour malgré le cache du CDN
Le CDN garde les fichiers JavaScript et CSS un an. Chaque version porte donc une adresse neuve, et le service worker, toujours relu sur le réseau, s'active aussitôt puis propose de recharger.
Un partage qui ne touche jamais le serveur
Le texte partagé est intercepté par le service worker et n'entre dans aucun cache. Comme n'importe quel site peut ouvrir Carnet avec un texte en paramètre, la page demande confirmation avant de créer la note.
Ne pas perdre de notes
Sans compte ni serveur, la sauvegarde repose sur l'utilisateur : stockage persistant demandé, corbeille de trente jours, rappel d'export et import par fusion.
Pour aller plus loin
- Site en ligne : note.erdus.fr (nouvel onglet)
- Offre associée : Création de site web
- Autres projets : Erdus Games, Cadence
- Tous les projets
Une application web sur mesure ?
Hors ligne, installable, respectueuse des données : parlons de votre projet en trente minutes.
Visio de 30 minutes, sans engagement, pour cadrer votre besoin.