4.0 KiB
title, description, date, yearonly, url
| title | description | date | yearonly | url |
|---|---|---|---|---|
| Faire une PWA avec VueJS | docker vuejs buefy | 2020-03-07 | false | pwavuejs.html |
Récemment, j’ai voulu reprendre des applications mobiles que j’avais créés avec Flutter il y a quelques mois. À ma grande surprise, aucune ne marchait. Google était passé par là et avait changé l’API d’Android une fois de plus. Le plus simple pour récupérer mon code c’était de recréer des nouveaux projets, malheureusement la plupart des plugins aussi étaient devenus obsolète.
Alors plutôt que de tout refaire, je me suis penché sur une alternative pour créer des applications cross-platform : les applications web progressives. Alias PWA.
Une PWA, basiquement c’est un site web capable de plus ou moins fonctionner sans serveur. Tout le rendu est sur le client, on embarque un maximum dans le client. Cependant il y a des règles à respecter, par exemple : https obligatoire.
Alors comment on fait ? En soit, on peut écrire l’application en HTML/CSS/Javascript natif. Mais le code devient vite brouillon, difficile à maintenir. Si les pages sont un minimum dynamiques, on retrouve avec du HTML dans les scripts. C’est pourquoi il existe des frameworks Javascript.
VueJS
Il existe plusieurs frameworks, notamment Angular, React et VueJS. VueJS est, pour moi, le plus abordable. La structure de ses fichiers ‘.vue’ est simple, on comprend vite l’intérêt de faire des composants. Alors allons-y.
Installation
Premièrement, on a besoin de ‘npm’. On commence par installer VueJS :
npm install -g @vue/cli
Puis on crée le projet. Le preset 'SimplePWA' ferra l'affaire :
vue create todo_app
Optionnel mais Buefy est une bibliothèque qui facilite grandement la création d'interfaces responsives.
cd todo_app
npm install buefy
La to-do list
On va écrire une application rapide : une to-do liste.
Dans 'src/main.js' :
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
vue.config.productionTip = false
Vue.use(Buefy)
new Vue({
render: h => h(App)
}).$mount('#app')
Dans 'src/App.vue', on a trois grandes parties: Le template qui décrivent les éléments de la page, le script qui contient la logique applicative de la page et le css.
Dans 'src/App.vue' :
Missing code here
Configuration vers PWA
Pour configurer la partie PWA, il y a deux principaux fichiers : vue.config.js et registerServiceWorker.js. Le premier n'existe pas pour le moment, c'est a nous de le créé.
vue.config.js, placé a la racine du projet:
module.exports = {
pwa: {
name: 'Todo',
themeColor: '#2c3e50',
msTileColor: '#2c3e50',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxOptions: {
skipWaiting: true
}
}
}
registerServiceWorker.js contient plusieurs callback permetant d'adapter le comportement de l'application a son environnement. Une immédiate est 'updated()', pour mettre a jour l'application locale lorsque la source change.
updated () {
console.log('New content is available; please refresh.')
window.location.reload(true)
},
Enfin pour avoir une PWA valide, il faut des généré une séries d'icone pour notre application. Il existe bon nombre de sites et petits logiciels qui permettent de générer tout ça automatiquement. De mon coté, je fais un mix de RealFavIconGenerator et d'ajustements a la main.
Outils
Un bon outil pour vérifié la validité de l'application en tant que PWA, c'est Google Lighthouse. Sous forme d'une extension Chromium, il fournit pas mal d'informations utile pour notre PWA mais aussi pour n'importe quel autre site.
Aussi il existe une extension très utile au développement de Vue: Vue.js devtools sous forme d'extension Firefox ou Chromium.