Date de création de cette note : 2024-11-18.

Quel est l'objectif de ce projet ?

Je souhaite apprendre à créer une app smartphone avec Capacitor.

Idéalement, suivre la documentation "Using Capacitor in a Web Project" pour transformer l'app PWA créée dans Projet 16 - Créer un POC d'application PWA en application smartphone.

Capacitor fully supports traditional web and Progressive Web Apps. In fact, using Capacitor makes it easy to ship a PWA version of your iOS and Android app store apps with minimal work.

-- from

Todo :

• [x] Setup un projet Capacitor
• [x] Documenter comment configurer l'icône de l'application (voir 2024-12-27_1123)
• [x] Documenter comment configurer l'image de splash-screen (voir 2024-12-27_1123)
• [x] Étudier @capacitor/app-launcher
• [x] Setup une webview dans l'app, via @capacitor/inappbrowser
• [x] Documenter la configuration de Deep Linking with Universal and App Links
• [ ] Jouer du contenu audio en background (peut-être basé sur capacitor-native-audio)
• [ ] Étudier @capacitor/local-notifications
• [ ] Étudier @capacitor/push-notifications
  • [ ] Tester l'envoi de notifications avec Firebase Cloud Messaging
  • [ ] Tester l'envoi de notifications avec OneSignal
  • [ ] Tester l'envoi de notifications avec Gotify
• [ ] Étudier @capacitor/status-bar
  • [ ] Modifier la couleur de fond de la "status-bar"
• [x] Essayer d'utiliser l'offre Apple Mac mini M1 de Scaleway pour builder l'app pour iOS
• [ ] À la fin, rédiger une note de comparaison de Capacitor versus PWABuilder.
• [ ] Déployer une version de l'app sur Google Play Store en privé, pour tester
• [ ] Déployer une version de l'app sur iOS App Store en privé, pour tester

Repository de ce projet :

• https://github.com/stephane-klein/poc-capacitor

Date de création de cette note : 2024-11-18.

Quel est l'objectif de ce projet ?

Je souhaite apprendre à créer des applications web de type Progressive Web Apps (PWA).

J'ai déjà une certaine culture dans ce domaine, mais je n'ai jamais créé d'application de ce type.

Voici les éléments que je souhaite apprendre / tester dans ce POC :

• [ ] Accélérer le chargement d'une app web qui a déjà été visitée (configurer correctement la gestion du cache)
• [ ] Rendre l'app web installable
  • [ ] Define your app icons
  • [ ] Display a badge on the app icon
  • [ ] Essayer de publier l'app sur (basé sur PWABuilder)
    • [ ] Google Play Store
    • [ ] iOS App Store
• [ ] Implémenter l'envoie de notification via un worker
• [ ] L'application doit être accessible même offline.

Si possible, j'aimerais implémenter ce POC avec SvelteKit.

Idéalement, j'aimerais intégrer le travail de "Projet GH-339 - Implémenter un POC de Automerge" dans un PWA.

Ressources :

• https://svelte.dev/docs/kit/service-workers
• https://vite-pwa-org.netlify.app/frameworks/sveltekit.html
• https://web.dev/learn/pwa/workbox

Article Wikipedia : https://en.wikipedia.org/wiki/Server-side_scripting

Définition de SvelteKit : https://kit.svelte.dev/docs/glossary#ssr

Article Wikipedia : https://en.wikipedia.org/wiki/Static_site_generator

Définition de SvelteKit : https://kit.svelte.dev/docs/glossary#ssg

Article Wikipedia : https://en.wikipedia.org/wiki/Single-page_application

Définition de SvelteKit : https://kit.svelte.dev/docs/glossary#spa

Les données de fixtures sont des ensembles de données statiques ou préconfigurées utilisées pour des environnements de développement et de test d'une application web. Leur objectif est de fournir un contexte fonctionnel réaliste pour tester les fonctionnalités, sans dépendre de données dynamiques ou de production.

Voir aussi : données de démo.

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

https://github.com/nodejs/corepack

https://htmx.org/

https://whatpwacando.today/

Voici une définition : https://kit.svelte.dev/docs/glossary#hydration

Svelte components store some state and update the DOM when the state is updated. When fetching data during SSR, by default SvelteKit will store this data and transmit it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without having to call the same API endpoints again. Svelte will then check that the DOM is in the expected state and attach event listeners in a process called hydration. Once the components are fully hydrated, they can react to changes to their properties just like any newly created Svelte component.

source

TinaCMS est un Headless CMS open source basé sur Git et écrit en TypeScript.

Site officiel : https://tina.io

Dépôt GitHub : https://github.com/tinacms/tinacms

Dépôt GitHub : https://github.com/tailwindlabs/tailwindcss

Documentation officielle de ReactJS sur le "props drilling" : https://react.dev/learn/passing-data-deeply-with-context

Dépôt GitHub : https://github.com/pmndrs/zustand

Documentation : https://zustand.docs.pmnd.rs/getting-started/introduction

Librairie créée par Daishi Kato.

Dépôt GitHub : https://github.com/pmndrs/valtio

Librairie créée par Daishi Kato.

Site officiel : https://recoiljs.org

Dépôt GitHub : https://github.com/facebookexperimental/Recoil

D'après l'entête de son dépôt GitHub, cette librairie semble dépréciée.

Voir aussi Jotai.