Développement web avec Vue.js

Introduction au développement mobile orienté web

Application à Vue.js #PWA #Hybride

Mickaël BARON - Version 02-2023

baron.mickael@gmail.com ou baron@ensma.fr

mickaelbaron

mickael-baron.fr

Licence d'utilisation

Creative Commons

Contrat Paternité

Partage des Conditions Initiales à l'Identique

2.0 France

creativecommons.org/licenses/by-sa/4.0

Qui suis-je ?

mickael-baron.fr

mickaelbaron

Ingénieur de Recherche ☀️

Recherche dans l'équipe Ingénierie des Données et des moDèles (IDD)
Valorisation des plateformes logicielles
« Coach technique » auprès des usagés

lias-laboratory

www.lias-lab.fr

Ancien Responsable 🌑 (2011-2021)

@Developpez

java.developpez.com

Rubriques : Java, Java Web, Android, Eclipse, Spring et Netbeans
Rédacteurs de tutoriels
Chiffres

4 M de visiteurs
12 M pages vues/mois
7500 membres
2000 forums

Objectif du cours (30 min)

Développer une application mobile ?

Application web
Progressive Web App (PWA)
Native
Hybride

Développer une application mobile avec Vue.js ?

PWA
NativeScript (Hybride native)

Disclaimer 🧎🏻‍♂️

Pas le temps ⏳ de tout traiter

~~Le test~~
~~Le déploiement~~
~~Les performances~~

Expérimentation via des exercices

Prérequis

Développement web avec Vue.js
Notions élémentaires JavaScript

Hétérogénéïté des OS pour smartphones

Solutions pour développement d'applications mobiles

App. mobile basée sur une app web

Accessible sur un navigateur web
Pas d'adaptation du code
Fonctionne sur toutes les plateformes (Android et iOS) et les types de matériel
Utilisation de CSS pour s'adapter à la taille de l'écran mobile (Responsive Design)

Progressive Web App

Initiée en 2015
Basée sur des spécifications du W3C
Peu d'adaptation du code
Fonctionnalités fournies

Créer raccourci sur l'écran d'accueil
Recevoir des notifications push
Gérer le stockage de données
Gérer le mode hors-ligne

Progressive Web App

Annuaire : appsco.pe

L'Equipe

Twitter Lite

Solution Native

Poussée par Google et Apple
Installation d'un SDK pour développer

Android avec Android Studio
iOS avec XCode (seulement macOS)

Code différent selon la plateforme
Utilisation des composants natifs
Nécessite un Store pour déployer

Solution Hybride

Code dans un conteneur natif
Code identique à iOS et Android
Nécessite l'installation d'un SDK
Utilisation de plugins pour accéder aux API natives (caméra, micro...)
Deux familles de solutions

Hybride avec WebView
Hybride native

Hybride avec et sans WebView

Hybride avec WebView

WebView = composant natif pour afficher du contenu web
Code exécuté comme une page HTML
Possibilité d'utiliser n'importe quel framework web

Hybride Native

Transformation de la partie UI en code natif
Utilisation de bridges asynchrones

JavaScriptCore
V8

Nécessite d'utiliser une bibliothèque spécifique

Bilan des différentes solutions

	Web	PWA	Hybride WebView	Hybride Native	Native
Déploiement	URL	URL	Store	Store	Store
Installation	Non	Oui	Oui	Oui	Oui
Hors-Ligne	Non	Oui	Oui	Oui	Oui
Notification	Non	Oui	Oui	Oui	Oui
Accès API Natives	Non	Limité	Complet	Complet	Complet
Composant	HTML	HTML	HTML	Natif	Natif
Performance	-	-	+	++	+++

Définir vos besoins ?

	Web	PWA	Hybride	Native
Développer uniquement du code web	X	X	X
Développer en Java, Kotlin ou Swift				X
Ne pas installer SDK Android ou iOS	X	X
Avoir un code identique sur Android ou iOS	X	X	X
Utiliser des APIs natives (caméra...)		X	X	X
Ne pas déployer dans un store	X	X	X	Android
Développer un site web classique	X
Développer des jeux-vidéos AAA				X
Développer un site web marchand		X	X	X
Développer une station sol pour Drone			X	X
À compléter...

Progressive Web App en détail

PWA en détail : spécifications W3C

Basée sur des spécifications existantes du W3C

Manifest : www.w3.org/TR/appmanifest
Service workers : www.w3.org/TR/service-workers
Web Assembly : www.w3.org/wasm
Push API : www.w3.org/TR/push-api/
Stockage

Web Storage : html.spec.whatwg.org
Indexed DB API : www.w3.org/TR/IndexedDB

PWA / Manifest : intérêt

Un fichier contenant des méta-données pour

identifier (nom, description...)
installer

sur mobile (raccourci écran d'accueil)
sur ordinateur (Dock, Menu Démarrer)

utiliser

en mode plein écran
splash screen
sans interface du navigateur web

PWA / Manifest : contenu

{
				"name": "PWA Sample",
				"short_name": "PWAS",
				"start_url": "/",
				"display": "standalone",
				"background_color": "#ffffff",
				"lang": "en",
				"scope": "/",
				"theme_color": "#ffffff",
				"icons": [
					{
						"src": "pwa-192x192.png",
						"sizes": "192x192",
						"type": "image/png"
					},
					...
				]
			}

Clés disponibles ➡️ Manifest

PWA / Manifest : usage

Bonnes pratiques 👍

Nommage : manifest.webmanifest
Emplacement : à la racine du projet

Déclaration dans le fichier index.html

<html>
			  <head>
				<meta charset="UTF-8" />
				...
				<title>PWA Sample</title>
				<link rel="manifest" href="/manifest.webmanifest" />
			  </head>
			  <body>
				...
			  </body>
			</html>