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