Développer des applications bureau sans code natif

Slide 1

Développer des applications bureau sans code natif Patrick Brosset - SnowCamp 2023

Slide 2

Patrick Brosset Twitter: @patrickbrosset Mastodon: @patrickbrosset@mas.to Web: https://patrickbrosset.com Demos: https://github.com/microsoftEdge/demos

Slide 3

Des applications de bureau?

Slide 4

Slide 5

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

Slide 6

SwiftUI, WinUI3, C, C+, Java, Electron, React Native, … 🤯💵⌚

Slide 7

Et le web alors?

Slide 8

Slide 9

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!”

Slide 10

Affaire classée?

Slide 11

JAWA JAWA THE HUTT

Slide 12

Just A Web App

Slide 13

Mais pourquoi?? • Site web + manifest + SW = Application. Vraiment? • Manque de connaissances et de confiance • Petites differences

Slide 14

Les bonnes pratiques

Slide 15

Installation

Slide 16

Installation

Slide 17

App stores

Slide 18

App stores

Slide 19

Icônes Soyez reconnaissable! Connaissez les différents formats.

Slide 20

Icônes learn.microsoft.com/microsoftedge/progressive-web-appschromium/how-to/icon-theme-color

Slide 21

Icônes www.pwabuilder.com/imageGenerator

Slide 22

Icônes web.dev/maskable-icon/

Slide 23

Fenêtre • Utiliser un mode de display: standalone • Customiser la barre de titre • Gérer les instances multiples

Slide 24

{ “display”: “standalone“ }

Slide 25

{ “display_override”: [“window-controls-overlay“] }

Slide 26

Fenêtre(s) { “launch_handler”: { “client_mode”: “navigate-existing” } }

Slide 27

Intégration à l’OS • Raccourcis • Partage de données entre applis • Badges • Gestion de fichiers • Gestion de liens et protocols • Widgets

Slide 28

Intégration OS: Raccourcis

Slide 29

Intégration OS: Raccourcis

Slide 30

Intégration OS: Partage navigator.share(data);

Slide 31

Intégration OS: Partage { “share_target”: { action, method, params } }

Slide 32

Intégration OS: Badges navigator.setAppBadge(2); navigator.clearAppBadge();

Slide 33

Intégration OS: Fichiers { “file_handlers”: [ { action, accept } ] }

Slide 34

Intégration OS: Liens et protocols scope_extensions, protocol_handlers

Slide 35

Intégration OS: Widgets

Slide 36

Hors ligne Fetch et Cache 💪🏽

Slide 37

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

Slide 38

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?

Slide 39

Fonctionalitées avancées • Web Bluetooth • Web USB • Web NFC • Clipboard API • Contact Picker • Canvas, WebGL • WebAudio • WebAuthn • Payment Request • WebAssembly 🐡

Slide 40

Fonctionalitées avancées

Slide 41

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.

Slide 42

Et vous? Quels sont vos besoins? Twitter: @patrickbrosset Mastodon: @patrickbrosset@mas.to Web: https://patrickbrosset.com Demos: https://github.com/microsoftEdge/demos

Slide 43

2023 Merci à nos sponsors