A presentation at SnowCamp 2023 in in France by Patrick Brosset
Développer des applications bureau sans code natif Patrick Brosset - SnowCamp 2023
Patrick Brosset Twitter: @patrickbrosset Mastodon: @patrickbrosset@mas.to Web: https://patrickbrosset.com Demos: https://github.com/microsoftEdge/demos
Des applications de bureau?
En quoi sont-elles différentes et nécessaires? • Elles sont installées • Elles marchent, même sans le réseau • Elles savent ouvrir des fichiers locaux • Elles ont leurs propres fenêtres • Elles sont intégrées a l’OS
SwiftUI, WinUI3, C, C+, Java, Electron, React Native, … 🤯💵⌚
Et le web alors?
Démystifions les PWAs “PWA, c’est vieux non?” “C’est pas juste un truc Google par hasard?” “Mais c’est que pour les mobiles!”
Affaire classée?
JAWA JAWA THE HUTT
Just A Web App
Mais pourquoi?? • Site web + manifest + SW = Application. Vraiment? • Manque de connaissances et de confiance • Petites differences
Les bonnes pratiques
Installation
Installation
App stores
App stores
Icônes Soyez reconnaissable! Connaissez les différents formats.
Icônes learn.microsoft.com/microsoftedge/progressive-web-appschromium/how-to/icon-theme-color
Icônes www.pwabuilder.com/imageGenerator
Icônes web.dev/maskable-icon/
Fenêtre • Utiliser un mode de display: standalone • Customiser la barre de titre • Gérer les instances multiples
{ “display”: “standalone“ }
{ “display_override”: [“window-controls-overlay“] }
Fenêtre(s) { “launch_handler”: { “client_mode”: “navigate-existing” } }
Intégration à l’OS • Raccourcis • Partage de données entre applis • Badges • Gestion de fichiers • Gestion de liens et protocols • Widgets
Intégration OS: Raccourcis
Intégration OS: Raccourcis
Intégration OS: Partage navigator.share(data);
Intégration OS: Partage { “share_target”: { action, method, params } }
Intégration OS: Badges navigator.setAppBadge(2); navigator.clearAppBadge();
Intégration OS: Fichiers { “file_handlers”: [ { action, accept } ] }
Intégration OS: Liens et protocols scope_extensions, protocol_handlers
Intégration OS: Widgets
Hors ligne Fetch et Cache 💪🏽
Hors ligne 4 niveaux de support: 1. Mise en cache des resources statiques 2. Redirection vers une page offline dediée 3. Possibilité d’utiliser les actions communes 4. Scénarios avancés: téléchargement de données
Stockage de données • local/session storage • IndexedDB • Cache • File System Access • 5MB pour local/session. • 60% de l’espace disque pour le reste. • Ca persiste vraiment! • Et si il n’y a plus d’espace?
Fonctionalitées avancées • Web Bluetooth • Web USB • Web NFC • Clipboard API • Contact Picker • Canvas, WebGL • WebAudio • WebAuthn • Payment Request • WebAssembly 🐡
Fonctionalitées avancées
Look & feel d’une app Quelques pistes: • Evitez les headers et footers gigantesques. • Simplifiez la UI, enlevez du contenu. • Utilisez une font système. • Utilisez des boutons, pas des liens. • Gérez les thèmes clair et sombre de l’OS. • Adaptez votre UI suivant la taille de l’écran. • Créez une UI qui répond immédiatement.
Et vous? Quels sont vos besoins? Twitter: @patrickbrosset Mastodon: @patrickbrosset@mas.to Web: https://patrickbrosset.com Demos: https://github.com/microsoftEdge/demos
2023 Merci à nos sponsors
Pourquoi développer des applications natives pour systèmes d’exploitation bureau est couteux et complexe? Ne pourrait-on pas simplement utiliser les technologies du web pour créer des applications de bureau qui rivalisent avec les applications traditionnelles?
Dans cette session, nous verrons comment les PWAs sont en train de révolutionner la manière de développer et de distribuer des applications extrêmement poussées, y compris sur des systèmes d’exploitation bureau.
Au programme: des demos, du code, et des explications techniques pour apprendre comment créer des expériences utilisateurs dignes de véritables applications de bureau. Vous ressortirez de cette session motives et impatients d’utiliser les dernières fonctionnalités du web pour créer votre propre appli.
for free. You
can too.