100 lines
4.0 KiB
Markdown
100 lines
4.0 KiB
Markdown
---
|
||
title: Faire une PWA avec VueJS
|
||
tags: docker vuejs buefy
|
||
date: 2020-03-07
|
||
yearonly: false
|
||
url: 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](https://realfavicongenerator.net/) 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. |