Développer pour le mode hors-ligne avec le web natif

layout: true
<div class="my-footer"><p>JUG Février 2025</p><p>alethgueguen.com</p></div>
---
class: middle, center, cover
background-image: url(../_images_bateau/mouillage_rocher.jpeg)
.glazed[
# Développer pour le mode hors-ligne avec le web natif
]

---
class: middle

<div class="dflex my-brand-wrapper flexcol">
  <div class="dflex">
    <img src="../_images_pro/symbol_color_bgtransparent_screen.png">
    <span class="my-brand">Aleth Gueguen conseil IT</span>
  </div>
  <div class="dflex">
    <div class="mlm mrb">
      <h2>
        Consultante indépendante depuis 2006
      </h2>
      <p class="my-brand-subtitle">Je développe des logiciels sur mesure pour les PME</p>
    </div>
    <img src="../_images_pro/portrait_665×665.jpg" style="width: 23%; border-radius: 50%; ">
  </div>
</div>
---
class: middle, center
# Qui fait des app mobiles pro ?
--

# Qui fait des app mobiles pro qui fonctionnent en mode hors-ligne ?
---
class: its-web
<style>
.its-web h2 {display: inline-block; margin: 0; padding: .25em; border-radius: .25em; background: #31DDAD; }
.absolute.screenshot {width: 18%; right: 8%; top: 8%; }
.absolute.html-css {width: 33%; top: 4%; right: 23%; transform: rotate(10deg); }
h2#c-est-du-mobile {margin-top: 2.5em; }
.contraintes {padding-left: 13%; }
.contraintes .absolute.imply {top: 68%; left: 7%; }
.maitrise{display: inline-block; position: relative; padding-left: 2em; padding-top: 1em; }
.maitrise img {position: absolute; width: 2em; left: -0.15em; top: .5em; }
</style>

# Le Web mobile
--

## C'est du web

.its-web[.absolute.screenshot[![](../_images_screenshot/application-mobile_we-contact-accueil.png)].absolute.html-css[![](images/html_css_js.png)]]

## C'est du mobile

.noop[.contraintes[.absolute.imply[![](images/imply.png)] très fortes contraintes] .maitrise[![](images/zero.png) maitrise sur le terminal dans lequel s'éxécute l'app ] ]

---
class: center

# Web mobile
.dflex[
.text-left.dflex.flexcol[
Limité en ressources  
machines peu puissantes  
pb de perf

Autonomie batterie
]
.flex-1.max90[![](images/infrequently_single_core_scores.png)  
.small[infrequently.org/2024/01/performance-inequality-gap-2024/#mobile]
]]

???
 dès qu'il y a bcp de code JS  
Il faut parser et exécuter

---
class: middle, center

# Accès réseau

## La 5G partout, tout le temps ça n'éxiste pas

---
class: center, middle,bkg-vertical-left
background-image: url(../_images_bateau/bateau+PV.jpg)
<style type="text/css">
      .mon-lab {color: #413556; top: 11%; left: 28%; }
      .pv100w {top: 16%; right: 10%; font-size: 120%; }
        .pas-partout{top: 30%; right: 9%; font-size: 120%;}
      .pv-arrow {top: -2%; transform: rotate(34deg) scale(.7); right: 12%; }
      .carte-manche {bottom: 7%; }
      .carte-manche img {width: 100%; }
      .marche-pas {top: -1em; position: relative; left: 10%; }
      .marche-pas img {width: 76%; }

</style>

.mon-lab.absolute[
# Mon lab R&D
]
.absolute.pv100w[Paneau solaire 100W]
.absolute.pv-arrow[![](images/red-arrow.png) ]
.absolute.pas-partout[Réseau = pas partout]
.absolute.carte-manche[![](images/carte-manche.png) ]

---

class: middle, center

--
.absolute.ami[
## HTML est ton ami]

## Déclaratif    
--

Décrit le métier   
--
/  UX inclus  
--

“The UX of HTML”
.mauto.w87[

> a well considered user experience starts with well considere HTML

vasilis.nl/nerd/the-ux-of-html/
]

???
Le navigateur est un logiciel énorme (mm si en mobile il n'ya pas les devtools) mais incroyablement bien optimisé pour principalement afficher du HTML

---
class: img72
 <style>
.img72  img{width: 72%}
.absolute.nav {top: 25%; left: 53%; transform: rotate(-6deg); background: hsl(44, 92%, 63%); padding: 3px; border-radius: 3px; }
.absolute.arrow.resized {transform: rotate(168deg); right: 20%; top: 68%; }
.absolute.mille {bottom: 13%; right: 2%; font-size: 2em; color: #5497ae; }
</style>
![](images/doc_html.png)
.absolute.nav[⬅️ Navigateur optimisé pour parser et afficher du HTML]
.absolute.arrow.resized[![](images/arrow_down.png)]
.absolute.mille[1000 × < tr >]

---
class: middle, center, audity
<style>
  .audity img{width: 60%}
  .absolute.inputs {right: -8%; }
</style>

# HTML first = Performances

![](../_images_screenshot/audity_entry_framed.png)
.absolute.inputs[![](images/inputs-250.png)]

???
Foudroyant ex Audity
perf était déterminant/mandatory

---
class: middle, center
![](images/service_workers.png)

# Ce qui a tout changé

???

Rappel comment ça fonctionne ?

---
class: center
<style>
  .dom{top:  13%; left: 3%; z-index: 10;}
  .dom img{max-width: 93%;}
  .SW{top:  22%; left: 12%;;}
  .SW img{max-width: 93%;}
  .internet{top:  19%; left: 29%;z-index: 20;}
  .internet img{max-width: 93%;}
  .cache{top: 62%; left: 63%;z-index: 19;}
  .cache img{max-width: 93%;}
  .arrow-cache{top: 16%; left: 43%;z-index: 19;}
  .arrow-cache img{max-width: 93%;}
  .no-cache{top:  12%; left: 38%;}
  .no-cache img{max-width: 89%;}

</style>

.absolute.dom[![](images/DOM.png) ]

--
.absolute.SW[![](images/SW.png) ]

--
.absolute.cache[![](images/cache.png) ]

--
.absolute.internet[![](images/internet.png) ]

--
.absolute.arrow-cache[![](images/arrow-cache.png) ]

--
.absolute.no-cache[![](images/no-cache.png) ]

---
class: cover
background-image: url(../_images_bateau/dock_santander.jpg)

## Un service Worker intercepte les requêtes HTTP

--
DONC ...

???
Une fois qu'on a compris ce que ça fait, comment ça fonctionne,

---

---
<style>
.absolute.bye-state {width: 25%; top: -1em; left: 48%; }
.state {
    position: relative;
    right: -9em;
    background: hsl(265, 57%, 67%);
    padding: .25em;
    border-radius: .25em;
    color: hsl(42, 87%, 55%);
}
.recharge .imply {top: .5em;}
</style>

.mtvb.recharge[
### Si on change/recharge une nouvelle page par action .context[on réinitialise le contexte .imply[![](images/imply.png)] bye bye memory leaks ] ]

--
.mtb.relative[
.noop[### Si on peut changer de page pour chaque action .absolute.bye-state[![](images/bye-bye.png)] .state[maintenir l’état]]]

???
Le state est représenté par le HTML

---
class: center

![](images/CRUD+sync.png)
.absolute.arrow[⬇️]
.absolute.idb[IndexedDB → github.com/jakearchibald/idb]

???
“IndexedDB with usability”

---
class: bkg-marche
background-image: url(../_images_bateau/scilly-2023.jpg)
<style>
.font-big{font-size: 120%}
.text-left.smaller.sw {font-style: italic; padding: .5em; background: #956cce91; border-radius: .25rem; color: #664d88; }
</style>
.noop[![](images/sync.png) ]
.text-left.font-big[
1. Export CSV  
2. local → distant (one way) (json, binary)  
3. Résolution conflit manuelle 
2. optimistic locking 
3. json-p  
4. DexieCloud
4. intent based → Replicache, Kinto  
5. CRDT / OT    
]

.text-left.smaller.sw[SW Background-sync (pas toujours fiable)]

???
SW background-sync, pas trop fiable

---
<style type="text/css">
  .dflex.fluid > p{margin: 0; flex: 1;}
  .check-list{margin-top: 3em;}
  .check-list ul{display: flex; flex-direction: column; gap: 1em;}
</style>
.dflex.fluid[
![](images/sync.png)

<img src="images/scilly-2023-1.png" alt="" style="width: 76%;"> ]
.check-list[
- check existence sur le serveur avant sync
- Envoi de tous les fichiers dans le même cycle → Promise.allSettled 
- formdata.append('aPhoto', File, 'my-photo.jpg') SW/iOS 🚫
]

<img src="images/arrow_bent.png" alt="" style="position: absolute;top: 20%;left: 15%;rotate: 14deg;transform: scale(80%);">
---
<style>
.dble-arrow {font-size: 3rem; top: -1.5rem; padding: 0 2rem; }
</style>
<img src="images/CRUD.png" alt="" style="width: 31%;">
<span class="relative dble-arrow">↠</span>
<img src="images/autosave.png" alt="" style="width: 39%;">

## JS : langage événementiel

<img src="images/input_change_button_click.png" alt="" style="width: 66%;margin-left: 15%;margin-top: -2rem;">
---
class: center

# data- attribute pour gérer les events

---
class: center, phare
background-image: url(../_images_bateau/combo-mini-phare-ilot.jpg)

# Light DOM custom element
.m0[
.small[meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom] ]
.dflex[
.text-left[
```html
<import-photo display-elt="photos-display">
  <label class="dropimage photo">
    <input type="file" name="photos" accept="image/*" multiple>
  </label>
</import-photo>

```
] .text-left[
```js
export default class importPhoto extends HTMLElement {

connectedCallback() {

this.displayElt = 
      document.getElementById(
        this.getAttribute('display-elt'))

this.fileInput = 
      document.querySelector(
        'input[name=photos'])

this.addEventListener('change', this)

}

handleEvent(event) {
    // do stuff
  }
}
```
]
]

---

#  ES Module <span class="dble-arrow">↠</span> Controller js

.dflex[
.text-left[
```js
//public/js/pages/myPage.js
// 1. imports
import * as iDBStorage from './libs/iDBStorage.js'
import importPhoto from './components/importPhoto.js'
// 2. cache DOM refs
const elts = {
    myEl: _d.qs('[data-someting]'),
    // ...
}
// 3. const, let + ‘theThing’
    // ...
// 4. Initialize web components
customElements.define('import-photo', importPhoto)

```
]
.text-left[
```js
// 5. Templates function
function entryRowTmpl(row) {
  return `
    <tr>
        <td>${row.col1}</td>
        <td>${row.col2}</td>
        <td>${row.col3}</td>
        <td class="entry-actions">
            <button data-click="showActionsMenu">Menu</button>
        </td>
    </tr> `
}
// 6. eventHandlers
// 7. eventListener
// 8. init()
function init() {
  // get theThing from iDBStorage
  // doStuff
}
// 10. local utility functions

```
]
]

???
// const, let y compris theThing
---

class: middle, center, bkg-bateau, color-white
background-image: url(../_images_bateau/bateau-en-marche.jpg)

# Ça marche

## Ça va vite

### No framework => Les bugs sont les tiens :D
---

???
Différence de traitement entre Android et iOS

---
.right[
# exemple de Manifest]
.dflex[
.w50.smaller.mt-b[ 
```json
{
  "name": "My PWA",
  "background_color": "#ECEFF1",
  "display": "standalone",
  "short_name": "My PWA",
  "start_url": "/",
  "theme_color": "#37474F",
  "icons": [{
    "src": "images/splash.jpg",
    "sizes": "512x512",
    "type": "image/jpg"
  }, {
    "purpose": "maskable",
    "src": "images/splash.jpg",
    "sizes": "512x512",
    "type": "image/jpg"
  }, {
    "src": "images/icon.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "scope": "/",
  "share_target": {
    "action": "/_share-target",
    "enctype": "multipart/form-data",
    "method": "POST",
    "params": {
      "files": [{"name": "media", "accept": [
        "audio/*", "image/*", "video/*"]
      }]
    }
  },
  "file_handlers": [
      {
        "action": "/",
        "accept": {"text/*": [".txt"]}
      }
    ]
}

```
]
.w50.right[
## Installation intégrée pour Android  
## Manuelle pour iOS

.mtb[### Android uniquement :
.mls.smaller.right[
App comme cible de partage

Support : Chrome , Samsung, Edge  
]]
]]

???
Pas forcé que l'app soit "installée" pour qu'elle marche  
pas besoin d'avoir un manifest  
sauf pour déclarer l’app comme cible de partage
---
<h2 class="mt0">Quelques enseignements tirés de mes projets</h2>

--
.smaller[
Les utilisateurs sont très souvent hors ligne ]

--
.smaller[
_Tout_ le monde est inquiet pour sa batterie]

--
.smaller[
Le cas d'usage universel :  
.smaller.mls[attacher des photos, de l'audio, des docs (indexedDB)] ]

--
.smaller[
Bien réflechir à l’interface.   
.smaller.mls[Les boutons sont toujours trop petit]]

--
.smaller[
Synchro : ça peut être relativement simple   
.smaller.mls[Bien gérer les cas où le serveur ne répond pas]]

--
.smaller[
Appli business : on maitrise la flotte de devices]

--
.smaller[
iOS est devenu le vilain du web]

???
hors ligne pour plein de raison

BDD du Web : indexedDB.  
   on peut y stocker des gros fichiers  
   bien penser à l'orga des stores et des index

Grosse réflexion sur l'interface. 
Les gens font des tas de trucs compliqués. Il ont besoin de se servir de l'app poour une action ponctuelle. Faut vraiment pas que ça soit compliqué
Auto save 1 must

On peut faire de la synchro basique sans mettre en œuvre des technos de ouf
Mais faut gérer les cas où le serveur répond pas

Testé en conditions pas simple : chantiers de canalisation (=boue)  
En mer; Pas de réseau pendant 2 à jours voir plus. Upload en 4G lente, ça prend du temps. bcp

Dans le cas business app, on a la maitrise sur la flotte de device

SW top pour MPA

---
class: center, middle, bkg-cover, color-white
background-image: url(../_images_bateau/rubber-duck.jpg)

.mtvb[
#Questions ?]

---
class: middle, bkg-cover
background-image: url(../_images_bateau/scilly-2023.jpg)
<style>
.contact-p{line-height: 1.5; font-size: 65%;margin-left: 2rem; color: #554552;}
.glazed{padding: .5em; background: rgba(255, 255, 255, 0.5); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); border-radius: 0.1em; }
.glazed.form.mauto {width: 67%; margin-top: -3rem; text-align: center; }
.glazed.w25.mauto{width: 32%;margin-top: 10em;}
</style>

.glazed.form.mauto[
.contact-p[Être accompagné]
]
.glazed.w25.mauto[
.contact-p[Contact]
.contact-p[Aleth Gueguen  
conseil@alethgueguen.com  
+33 (0)675 90 86 06    
]
]