PWA from the trenches - Web Day Out 2026

layout: true
<div class="my-footer"><p>Web Day Out 2026</p><p>alethgueguen.com</p></div>

---
count: false
class: bkg-beige, bkg-x-50
background-image: url(image/Paul_Klee_crystal_gradation_1500.jpg)
count: false
<style>
  .bkg-beige{
    background-size: 72%;
    background-position-y: -1.4em;
  }
  .bkg-beige h1{
    max-width: fit-content;
    margin: 23%  auto auto;
    padding: 0 1em;
    background-color: #ccbbac;
}
</style>
# PWA From The Trenches

???
In this talk I' show you what I've learned building PWAs
Where PWAs shine and where it is not so obvious
PWA in this context > SW + iDB + manifest

---
class: clients
<style>
  .view {
    width: 60%;
}
  .clients h2{font-family: 'Prodigy Sans';}
  .view h2{
    margin: .5em 0;
    font-size: 1.85em;
  color: var(--logo-indigo);
  }
.clients .tag2.absolute {
  text-align: center;
  top: 31%;
  right: 7.5%;
  /*transform: rotate(-11deg);*/
}
.accolade {
    top: 0%;
    transform: rotate(180deg) scaleY(-0.4) scaleX(.4);
}
h2.natural {
  position: relative;
  top: -2em;
  right: -13em;
  max-width: fit-content;
}
</style>

# Apps I build for my clients
.view.right[
## Professionnal mobile web app
## data entry / view / list & filter
## Must work without network.tag2.absolute[on-device<br>backend for 1<br>+sync].absolute.accolade[![](image/accolade.png)]
]

--
count: false
<img src="image/team_of_1.png" alt="" width="500">

<h2 class="natural tag1">PWA is a natural choice</h2>

???
I am responsible for the whole project from business requirement to architecture decision to code producing to maintenance in prod  
Maintain half a dozen PWAs in production

Made a few choices
Mobile web => less CPU / RAM / ...  
=> Ship the least amount of code needed 
Distribution is a non problem 
No dependecy on app store and waiting for validation
Update is instaneous and you can do it as mny times you want
No control over which device your code will run in

---
class: center, middle,bkg-vertical-left
background-image: url(../_images_bateau/panneau_solaire.jpeg)
<style>
.mon-lab {background: hsl(253deg 38% 15% / 80%); top: 11%; left: 13%; color: #b3c2cc; border-radius: .25em; }
mon-lab h1 {margin: 0; padding: .25em;}
.pv100w {top: 3%; right: 7%; font-size: 120%; text-align: left}
.pas-partout{top: 30%; right: 9%; font-size: 120%;}
.carte-manche {bottom: 7%; }
.carte-manche img {width: 100%; }
.marche-pas {top: -1em; position: relative; left: 10%; }
.marche-pas img {width: 76%; }
.pv-arrow {top: 2%; transform: rotate(-3deg) scale(.7); right: 23%; }
.pv-arrow img{filter: hue-rotate(-20deg);}
.w-max-content{width: max-content;}
</style>

.mon-lab.absolute[
# My R&D Lab
]
.absolute.pv100w[solar panel 100W<br>priority to instruments<br>nav / pilote / weather / AIS]
.absolute.pv-arrow[![](image/red-arrow.png) ]
.absolute.pas-partout[Network = not everywhere]
.absolute.carte-manche[![](../_images_bateau/carte-manche.png) ]

???
It gets all the constraints you need  
limited energy  
out of 10 miles off the coast no 4G/ no internet except for this [Iridium][x bits/sec uplink/ y bs downlink]  
Primary use of energy: [table à carte + frigo]

---
class: bkg-action-pg, relative
background-image: url(image/action_page.png)
<style>
  .bkg-action-pg h1 {margin-bottom: 0;}
  .ml47{margin-left: 47%}
  .ml47 p{line-height: 2}
    .bkg-action-pg{
    background-size: 42%;
    background-position-x: 5%;
    background-position-y: 20%;
  }
  .bkg-action-pg ol {font-size: 1.45em;}
  .bkg-action-pg li{margin-bottom: .75em;}
  .cache{top: 63%; left: 27%; text-align: center;}
.bkg-action-pg img {
    width: 48%;
    position: relative;
    top: -3.5em;
    transform: rotate(5deg);
}  .bkg-action-pg .i {
    font-style: italic;
    font-size: smaller;
    background: var(--grey0);
}
  .its-mpa {
    font-size: 2em;
    left: .5em;
    top: -1.25em;
    color: hsl(114.1deg 69.84% 29.76%);
}
</style>
.absolute.tag2.cache[cache<br>storage]  
.ml47[
# General principles
.no-ul[
1. one action  = one page  
.i[serve page from Cache storage] 
2. no state: persist data in indexedDB   
propagate parameter through URL query
4. Delegate event:  
listen on the top level element  
3. Mutate the DOM, do not re-render
]]

???
page as a high level component

---
class: no-margin-h, cache
<style>
.cache.hljs-monokai-sublime code {
    position: relative;
    left: -2em;
    font-size: 1.25em;
    background: var(--indigo-togrey-light100);
}
.cache.hljs-monokai-sublime .hljs-name,
.cache.hljs-monokai-sublime .hljs-attr{
  color: #ffcfe0;
}
  .no-ul ul{margin: 0;padding: 0; list-style-type: none;}
  .list-doc ul{list-style-image: url(image/doc.svg)}
  .list-doc.second li:nth-child(2n){margin-bottom: 1em;}
.list-doc.second li:nth-child(3){position: relative; z-index: 0; }
.list-doc.second li:nth-child(4){position: relative; }
  .cache .container{top: 4em;margin-left: 2em; text-align: left;}
  .cache-wrapper {
      position: relative;
      padding-left: 2em;
      width: fit-content;
      white-space: nowrap;
      background: var(--grey0);
      border-radius: 1em;
      box-shadow: 0 0 1px 1px var(--indigo-togrey-light50);
  }
   .response{width: 22em;}
  .response ul{list-style-type: none; padding-left: 3em}
  .response li {margin-bottom: 2.5em; }
.legend.tag2 {
    top: -.75em;
    left: 9em;
    padding: .25em .5em .45em;
    border-radius: .75em;
    line-height: 1;
}
.arrow-html {
    top: -4.75em;
    transform: rotate(92deg) scaleY(-1) scale(.7) scaleX(.8);
    left: 0em;
}.html-first {
    top: -2.75em;
    left: -3em;
}
.branch {
    top: -33%;
    left: -13.5em;
    transform: scale(.62);
}.href {
  top: 5em;
    left: 5.5em;
}.pagenav {
    top: 17em;
    left: -1.75em;
    font-size: smaller;
    background: #d00daf;
    color: inherit;
}
  .cached-response{margin-left: .5em; font-size: smaller;}
  .cached-response::after {content: "cached response"; }
  .file {/*width: 10em; */right: -2em; z-index: 1; }
  .file::before {content: "⇦"; color: var(--yellow2); }
  .bkg-top{background-position-y: top;
    background-size: 50%;}
</style>

# Serve a local page from service Worker
.absolute.href[
```html
<a href=  >
```
.absolute.tag1.pagenav[page navigation]]
.dflex.container.relative[.response.relative[
- /home .absolute.file[.cached-response.tag2[]]
- /report .absolute.file[.cached-response.tag2[]]
- /list .absolute.file[.cached-response.tag2[]]
].cache-wrapper.dflex[.absolute.arrow-html[![](image/arrow_angle_down_grey.png)].absolute.tag1.html-first[HTML first].absolute.legend.tag2[Cache storage].absolute.branch[![](image/href_branch.png)].list-doc.second[
- home.html
- homeController.js
- report-form.html
- newReportController.js
- list.html
- listController.js
].flex-1.list-doc[
- style.css
- lib1.js
- lib2.js
- font.ttf
- image.png
]]]

---
class: stitch
<style>
.stitch .h1 p{
    margin-bottom: 0;
    margin-top: .5em;
    font-size: 2em;
}
.stitch .cache-wrapper{width: 8em;}
.stitch .cache-wrapper ul{list-style-type: none;}
.stitch .cache-wrapper ul li:not(:first-child) {
    left: 138%;
    position: relative;
    margin-bottom: 1.25em;
}
.stitch .legend {
    top: 2.25em;
    left: 1.25em;
    font-family: 'COMPAGNON';
    font-weight: 600;
}
.stitch .server {
    transform: scale(.5);
    top: 12em;
    left: -1.5em;
}.stitch .proms{width: 22em;}
.stitch .acc {
    right: 0;
    transform: rotate(182deg) scaley(-1) scale(.5);
    top: -43%;
}.stitch .responses{top: 11vh;}
.stitch .responses>.code{position: relative;padding: 0 .5em;}
.stitch .responses>.code p {font-size: 1.5em; }
.stitch .responses>.code:nth-child(2){top: 3em;}
.stitch .responses>.code:nth-child(3){top: 7em; left: 8em;}
.stitch.hljs-monokai-sublime .hljs{background: transparent;}
.bkg-l {
    top: -3em;
    left: 5.75em;
    transform: scale(.61);
}.bkg-r {
    right: 7em;
    transform: scale(.6);
    top: 1.5em;
}
</style>

.pre.h1[
When content may not be in cache:   
                     stitch it to cached body header and footer]
.dflex.relative[.cache-wrapper[
- .absolute.legend[Cache<br>Storage]
- .relative.tag2[cached body head]
- .relative.tag2[request document]
- .relative.tag2[cached body footer]
].absolute.server[![](image/server.png)]
.relative.proms[.absolute.acc[![](image/accolade.png)]
].relative.responses[.code[
Promise.all].code[
```js
[html, html, html]
```]
.code[
Response]].absolute.bkg-l[![](image/stitch_arrows_left.png)].absolute.bkg-r[![](image/stitch_arrows_right.png)]]

---
name: manifest
class: bkg-vertical-right, slide-padding-2
background-image: url(../_images_bateau/scilly-2023-2.jpg)
<style>
  #slide-manifest h1+p{font-size: 1.4em}
  #slide-manifest h3 {margin: 0;}
  #slide-manifest p {
    margin-top: 0.75em;
    margin-bottom: .5em;
}
.imp {
    margin-top: 0.75em;
    margin-bottom: .75em;
    width: fit-content;
    box-shadow: 1px 1px 2px 1px var(--indigo-togrey-light50);
    padding: 5px .5em;
    border-radius: 5px;
}#slide-manifest .imp p {
    margin: 0;
    line-height: 1.6;
}.menu {
    padding: 3px;
    background: var(--grey0);
    font-family: 'Ubuntu Mono';
    color: #3f3f3fcc;
}</style>

# manifest

It’s the glue to integrate the PWA to the OS

### Important for Android  
.imp.bkg-gradient-mauve[
If you rely on installed app   
menu MUST say .menu[Install app]   
NOT .menu[Add to home screen]
]

### Debug 
dev tool > Application > Manifest  
& test in real Android device

---
class: bkg-vertical-0, install
background-image: url(../_images_bateau/arbre_tordu.jpg)
<style>
  .install h1{font-size: 2.55em}
  .ml38{margin-left: 38%}
  .install li{margin-bottom: 1em} 
  .install li li {margin-bottom: auto;} 
</style>
.ml38[
# Installation… its’ complicated

- Android makes us depend on an heuristics we do not control
  - not a problem for business app:  
  we own the device fleet
]

???
This is a blocker in consumer apps
May be the install component will solve this. But unless it is available in iOS, this is not going to work 
---
count: false
class: bkg-vertical-0, install
background-image: url(../_images_bateau/arbre_tordu.jpg)
.ml38[
# Installation… its’ complicated

- Android makes us depend on an heuristics we do not control
  - not a problem for business app:  
  we own the device fleet
 - iOS call it “home screen app”. 
]
---
count: false
class: bkg-vertical-0, install
background-image: url(../_images_bateau/arbre_tordu.jpg)
.ml38[
# Installation… its’ complicated

- Android makes us depend on an heuristics we do not control
  - not a problem for business app:  
  we own the device fleet
 - iOS call it “home screen app”. 
 - For consumer app 
  - first page: install page with instructions
  - parse UserAgent on server  
  and send install page specific for the device
]
---
class: middle, center,bkg-gradient-mauve, geoloc
<style>
  span.btw.absolute {
    top: 10%;
    left: 5%;
    transform: rotate(-15deg);
    padding: .5em;
    border-radius: .75em;
    background: var(--yellow2);
    color: hsl(282deg 8.11% 34.37%);
    font-family: Compagnon;
    font-weight: 600;
}
.link-bkg {
    position: relative;
    top: 5em;
    right: -8em;
    font-size: .75em;
}
.link-bkg a {
    color: var(--grey0);
}
.geoloc h2{line-height: 2}
</style>
.btw.absolute[Did you know?]
## On iOS 26 geolocation is not available<br>in home screen app if permission was not given<br>BEFORE adding to home screen

--
##  iOS user must re-auth<br>when app is added to home screen
---
<style>
  .install-screen h3:nth-child(1){margin-top: 2em; margin-bottom: 3em;}
  .install-screen h3:nth-child(3){margin-bottom: 2em;}
  .install-screen img{height: 568px;}
  .flex-0-5{flex: .5;}
.install-screen .absolute{filter: hue-rotate(221deg);}
  .install-screen .perm {
    top: -10%;
    left: 10%;
    transform: scale(.25) rotate(130deg) scaleX(-1);
}
  .install-screen .auth {
    top: 10%;
    left: 10%;
    transform: scale(.25) rotate(144deg) scaleX(-1);
}
.install-screen .a2h {
    top: 30%;
    left: 10%;
    transform: scale(.25) rotate(158deg) scaleX(-1);
}
</style>
.dflex.install-screen[.flex-0-5[![](../_images_screenshot/navjournal_install_iOS_instructions_framed.png)
]
.flex-1[
# An install page for iOS
.mlm[
### Request permissions
.absolute.perm[![](image/arrow_roud_pink.png)]
### Copy token to authenticate when installed
.absolute.auth[![](image/arrow_roud_pink.png)]
### Instructions for adding to home screen
.absolute.a2h[![](image/arrow_roud_pink.png)]
]]]
---
class: pwa-inst
<style>
  .pwa-inst h1{
    font-size: 2.7em; margin-bottom: 2em; text-align: center;
        background-image: linear-gradient(to bottom, hsl(200 86% 42% / 1), hsl(185 100% 36% / 1)); color: hsl(73 35% 92% / 1);}
  .pwa-inst li{margin-bottom: 1.2em;} 
}
</style>

# PWA being “installed” is important for:

- iOS user, when producing content while offline   
 MUST be installed otherwise risk storage wiped after 7 days

--
 -  Sharing content between other apps and your PWA

---
name: share-screenshot
class: no-margin-h
<style>
    #slide-share-screenshot .relative{left: 13%}
    .screen{    
    position: relative;
    display: inline-block;
      width: 12em;
  }.screen.sec{top: 3em;left: -1em}
  .screen.third{top: -3.5em; left: 19em;}
  .start {
    display: inline-block;
    width: 180px;
    top: 2.5em;
    left: -3.75em;
    transform: rotate(176deg) scale(.7);
}.here {
    width: max-content;
    top: 8.5em;
    left: -5em;
}
</style>

# share_target API (Android only)
how about sending photos, doc, tracks,… to your PWA?
.relative[
.screen[![](../_images_screenshot/navionics_trace_framed_720.png)].screen.sec[![](../_images_screenshot/navionics_share_framed_720.png)].screen.third[![](../_images_screenshot/navjournal_import_track_en_framed_720.png)].start.absolute[![](image/arrow_roud_pink.png)].here.tag2.absolute[share ☝︎]]
---
name: multi-share
class: no-margin-h
<style>
  #slide-multi-share .relative{width: 100%;}
  e.mono {font-family: 'Ubuntu Mono'; font-weight: 300;
}
.post-url {
    top: -9%;
    left: -37%;
    transform: rotate(8deg);
}
.post-url+.tag2 {
    top: -2%;
    left: 27%;
}
.from-gallery {
    top: 2%;
    left: -27%;
    transform: rotate(15deg);
}.from-gallery+.tag2 {
    top: 12%;
    left: 36%;
}
.from-gpx {
    top: 31%;
    left: -46%;
    transform: rotate(-41deg) scale(.75);
}.from-gpx+.tag2 {
    top: 30%;
    left: 36%;
}
.inspect.absolute {
    top: 10%;
    left: 44%;
    transform: scale(.45);
}
.inspect.absolute+span {
    top: 71%;
    left: 2%;
    font-size: 1.5em;
    line-height: 1.25;
    white-space: pre;
}
</style>

# Your PWA can be a “share target” for multiple apps
.dflex[
```json
// /manifest.json
{
  // ...
  "share_target": {
    "action": "/app/share-target",
    "enctype": "multipart/form-data",
    "method": "POST",
    "params": {
      "files": [{
        "name": "photos",
        "accept": [
          "image/*", ".jpg", ".jpeg", ".png", ".gif"
        ]
      }, {
        "name": "track",
        "accept": [
        "application/gpx+xml", 
        "application/octet-stream",  
        "text/xml","application/xml", ".gpx"]
      }]
    }
  }}
```
<div class="relative">
<span class="post-url absolute">
  <img src="image/arrow_up_pink.png" alt="">
</span>
  <span class="tag2 absolute"><e class="mono">Post URL</e> intercepted by SW</span>
<span class="from-gallery absolute">
  <img src="image/arrow_down_green.png" alt="">
</span>
  <span class="tag2 absolute">share from photo gallery</span>
<span class="from-gpx absolute"><img src="image/arrow_up_yellow.png" alt=""></span>
  <span class="tag2 absolute">export <e class="mono">GPX</e> from geo app</span>
<span class="inspect absolute"><img src="image/arrow_down_grey.png" alt=""></span>
  <span class="absolute">
To discover file type from external app 
                                  sharing mechanism
> devtool > network 
> inspect response</span>
</div>
]

---
class: multi-share-schema
<style>
.multi-share-schema .dflex {
    margin-top: 1em;
}
.multi-share-schema .tag2{width: fit-content;}
.multi-share-schema .code{line-height: 1.3; border-radius: .25em;}
.multi-share-schema .dflex div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1em;
}
.share * {
    position: relative;
}
.share .to-sw {
    position: absolute;
    transform: rotate(125deg) scaleY(-1) scale(.8);
    top: -10%;
    left: -1%;
}.share svg{top: 3.5em;
    left: .5em;
}.share .tag2{z-index: 1;
} .multi-share-schema .SW {
    width: 38%;
    top: -15%;
    left: 3em;
    background: var(--grey0);
    border-radius: 50%;
}.multi-share-schema svg{fill: var(--logo-indigo)}
.sw-container{padding: 2em .5em 1em;
    padding-bottom: 2.5em;
}
.sw-container .tag2 {
    position: relative;
    right: -14em;
    z-index: 2;
}
.multi-share-schema .arrows {
    position: relative;
    top: 18.75em;
}
 .page {
    position: absolute;
    width: 53%;
    top: -8%;
    background: var(--grey0);
    border-radius: 50%;
} .msg {
    position: relative;
    z-index: 2;
    padding: 0 3px;
    width: max-content;
    font-size: 22px;
    box-shadow: 0 0 2px 1px hsl(60deg 36% 46% / 70%);
    border-radius: 3px;
    background: hsl(49 79% 70% / 1);
} .msg:nth-child(2){
  position: relative;
  top: 2.5em;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-send" viewBox="0 0 16 16">
  <defs>
    <path id=send d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
  </defs>
</svg>

<div class="dflex relative">
  <div class="share ">
    <span class="tag2">/app/share-target</span>
    <span class="to-sw"><img src="image/arrow_up_pink.png" style="
    filter: hue-rotate(-42deg) saturate(0.5);
"></span>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16" style="
    padding: 5px;
    box-shadow: 0 0 3px 2px var(--logo-indigo);
    border-radius: 20%;">
      <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5"/>
    </svg>
  </div>
  <div class="flex-1 sw-container cache-wrapper dflex flexcol">
    <span class="absolute SW"><img src="image/SW.png" alt=""></span>
    <span class="code pre">request.formdata.has(photos) ?</span>
    <span class="tag2">/app/photosPage</span>
    <span class="code pre">request.formdata.has(track) ?</span>
    <span class="tag2">/app/importTrack</span>
    <span class="code pre">// Keep SW alive
event.waitUntil </span>
    <span class="code pre">request.formdata.has(photos) ?</span>
    <span class="code pre" style=" margin-top: 1.5em; "> request.formdata.has(track) ?</span>
    <span class="">Process XML</span>
  </div>
  <div class="flex-1 arrows">
    <span class="msg mono">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-send" viewBox="0 0 16 16">
        <use href=#send />
      </svg>
      <span>{photos: photos}</span>
    </span>
    <span class="msg mono">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-send" viewBox="0 0 16 16">
        <use href=#send />
      </svg>
      <span>{trkpts: trkpts}</span>
    </span>
    
  </div>
  <div class="flex-1 cache-wrapper relative">
    <span class="page">
      <img src="image/page-1.png"></span>
<span class="absolute" style="
    top: 6.5em;
    left: 4em;
    font-style: italic;
    padding: .25em;
    box-shadow: 0 0 5px hsl(144.6deg 72.45% 32.05%);
    border-radius: 1em;
    background: var(--indigo-togrey-light100);
    color: hsl(0deg 0% 100%);
    text-align: center;
">wait while SW<br>is doing its thing<br>…</span>
    </div>
</div>

---
class: middle, center
<style>
  .absolute.tag1.killer {
    right: 3em;
    top: 3em;
    transform: rotate(16deg);
}
</style>
# share_target API support
.absolute.tag1.killer[killer feature] 
![](image/share_target_support.png)

---
class: bkg-contain, bkg-vertical-x106, no-margin-h
background-image: url(../_images_bateau/oiseaux_rocher_cropped.jpg)
<style>
.bkg-vertical-x106 {
    background-position-x: 102%;
    background-size: 43%;
    background-position-y: -9%;
}  .mr42{margin-right: 42%}
</style>
# Persist data in indexedDB 
.mr42[

Can store a lot and keep it for a very long time

one year -> verified on Android

[github.com/jakearchibald/idb](https://github.com/jakearchibald/idb)   
as a helper around indexedDB API

Can store any Js object

Case of binary:  
Blob type is not supported by iOS   
⮞ convert to TypedArray (UInt8Array)  
]

???
Thanks from the bottom of my heart Jake for this library
---
name: persist
class: no-margin-h, bkg-contain-lower
background-image: url(image/cache_then_sw-3.png)
<style>
  #slide-persist h2{position: relative; margin-top: -.75em}
  #slide-persist pre{max-width: fit-content; text-align: left;}
  #slide-persist .remark-code {font-size: 20px; }
  #slide-persist code, .code{background: hsl(282deg 14.51% 20.76% / 80%);
    border-radius: .5em;}
#slide-persist .input {
    top: -0.25em;
    left: 3.85%;
} .code {
    width: fit-content;
    padding: 0 5px;
    font-family: 'Ubuntu Mono';
    color: var(--grey0);
}.code p {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
}#slide-persist .code {
    position:relative;
    line-height: 1.3;
}#slide-persist .cache {
    top: 6em;
    left: 32%;
    padding: 1em 1em;
    font-size: 2em;
    line-height: 1.25;
    text-align: center;
    background: hsl(282deg 4% 49% / 80%);
    color: hsl(54 87% 71% / 1);
}
#slide-persist .img-el {
    top: -.5em;
    left: 61%;
}
#slide-persist .img-src {
    top: 9em;
    left: 58%;
}
#slide-persist .request {
    top: 5.5em;
    left: 64%;
    font-size: 25px;
    font-family: 'Ubuntu Mono';
    font-weight: 300;
    padding-left: 1.5em;
    background: hsl(282deg 4% 49% / 80%);
    color: hsl(54 87% 71% / 1);
}
#slide-persist .insert {
    top: 17em;
    left: 54%;
    font-size: 25px;
    font-family: 'Ubuntu Mono';
    font-weight: 300;
}
.res-req{top: 4.6em}
.res-req pre:first-child{margin-bottom: .25em}
.res-req pre:last-child{margin-top: 0}
#slide-persist .res-req code {
    background: hsl(304 4% 37% / 1);
}
</style>

# A better way to persist binary data 
## and display stored images
.relative[.input.absolute[
```html
<input type=file name=photo>
```].relative.res-req[
```js
const file = evt.target.files[0],  
res = Response(file, {
  headers: {'Content-Type': file.type} })
```
```js
req = Request(/cache/photoName, {
  headers: {'Accept': file.type } })
```].cache.tag2.absolute[Cache<br>Storage].request.tag2.absolute[request /cache/photoname].img-el.absolute[
```js
const photo = document .createElement('img')
photo.src = /cache/photoname
  ```].insert.tag2.absolute[insert photo element]]

???
Set a Response with the file as content  
Set a Url to identify the file  
Set a Request with the url and   
a {Accept: file.type} header  
Put the Request, Response in the cache
Nice discovery  
Don’t need to set a reader and do all the onSuccess callback dance
---
class: middle, center, bkg-gradient-grey

# Uploading binaries through a Service Worker
## 1. Check if file exists on server before upload
## 2. For long running tasks, keep a heartbeat<br>to prevent SW from being killed

---
class: sync-bin-schema
<style>
  .sync-bin-schema.remark-slide-content{
    background-color: hsl(129.59deg 7.27% 71.29%)}
  .sync-bin-schema{padding: 0;}
.sync-bin-schema .bkg {
    height: 32em;
    background-image: url(image/file_sync_lines2.png);
    background-size: 83%;
    background-position-y: 88%;
    background-position-x: 58%;
    background-repeat: no-repeat;
    z-index: 10;
}  .sync-bin-schema .pre{
    position: absolute;
    font-size: 22px;
    font-family: 'Ubuntu Mono';
    font-weight: 300;
    background: hsl(221deg 46.27% 87.08%);
</style>

<div><img src="image/i_db.png" class="absolute" style="
    width: 6.75em;
    top: 6.5em;
    left: 59.5%;
    background: var(--yellow0);
    padding: 3px 0 2px 0;
    border-radius: 55% 43% 52% 35% / 50% 31% 24% 23%;
  box-shadow: inset 0 0 6px hsl(131.25deg 9.58% 54.01%);"></div>
<div class="cache-wrapper" style="position: absolute; height: 26em;width: 13em;top: 4em;left: 16em; background: var(--yellow0);box-shadow: 0 0 4px 1px hsl(131.25deg 7.4% 50.84%);">
    <span class="absolute SW" style="
    width: 5em;
    top: -2em;
    left: 4em;
    background: var(--yellow0);
    border-radius: 50%;
    ">
    <img src="image/SW.png" alt=""></span>
  </div>
<div class="cache-wrapper" style="position: absolute;width: 9em;height: 17em;top: 4em;right: 2em; background: var(--yellow0);box-shadow: 0 0 4px 1px hsl(131.25deg 7.4% 50.84%);">
    <span class="page" style="display: inline-block;width: 5.5em;left: 3em;top: -2em; background: var(--yellow0);">
      <img src="image/page-1.png"></span>
    </div>
<span class="cache-wrapper" style="
    position: absolute;
    top: 48%;
    left: 32.5em;
    padding: 1.5em;
    box-shadow: 0 0 4px 1px hsl(131.25deg 7.4% 50.84%);;
    background: var(--yellow0);
">Cache<br>Storage</span>
<img src="image/server.png" class="absolute" style="
    width: 5em;
    top: 38%;
    left: 8.5em;
    background: var(--yellow0);
    box-shadow: 0 0 4px 1px hsl(131.25deg 7.4% 50.84%);;
    border-radius: 5px;
    ">
<div class="relative bkg">
<e class="absolute" style="left: 62.5%;top: 9em;color: hsl(200 60% 35% / 1);">indexedDB</e>
  <e class="msg" style="left: 59%;top: 1em;">sync</e>
  <e class="pre" style="top: 18%;left: 45%;">file to sync?</e>
  <e class="pre" style="top: 31%;left: 19%;">file exists?</e>
  <e class="pre" style="top: 44.25%;left: 28%;">200?</e>
  <e class="pre" style="top: 35%;left: 53%;">update</e>
  <e class="msg" style="top: 39.5%;left: 65.5%;">synced</e>
  <e class="pre" style="top: 55.25%;left: 41.5%;">request file</e>
  <e class="pre" style="top: 61%;left: 33%;">PUT blob</e>
  <e class="pre" style="top: 68.5%;left: 20%;">response OK?</e>
  <e class="pre" style="top: 49%;left: 67%;">update</e>
  <e class="msg" style="top: 68%;left: 60%;">synced</e>
  <e class="msg" style="top: 80%;left: 47%;">stop</e>
  <e class="msg" style="top: 95%;left: 42%;">done</e>
  <e class="pre" style="top: 54%;left: 86%;">Update UI</e>
</div>

---
class: syncing
<style>
  .syncing img{
    position: absolute; 
        top: -7.5em;
transform: scale(.5) rotate(-89deg);}
  .syncing h1{margin: 0}
  .syncing h1+p{margin-bottom: .8em;}
.syncing li{margin-bottom: 1em; font-size: 1.3em; position: relative;}
.syncing li li{margin-bottom: auto; font-size: inherit;}
.syncing li:nth-child(1) img {left: 9em; }
.syncing li:nth-child(2) img{left: 14em;}
.syncing li:nth-child(3) img {left: 18.25em; }
.syncing li:nth-child(4) img{left: 14em; top: -5em}
.sol {position: relative; left: 9em; }
.syncing li:nth-child(4) .sol {
    left: 21em;
    position: absolute;
    top: 2em;
}/*.text-left.smaller.sw {font-style: italic; padding: .5em; background: #956cce91; border-radius: .25rem; color: #664d88; }*/
</style>
# Syncing data stored locally
Choose your sync strategy depending on use case
1. Want Excel/CSV ![](image/arrow_down_grey.png) .sol.tag1[Export]
--

2. One way upload to remote ![](image/arrow_down_grey.png) .sol.tag1[POST to remote and forget]  
--

3. Back-office may occasionnally update ![](image/arrow_down_grey.png) .sol.tag1[Update w/ optimistic locking]   
--

4. Remote and local may update at any given time and be aware of new version :  ![](image/arrow_down_grey.png) .sol.tag1[Database sync engine]
  5. CouchDB/PouchDB
  6. DexieCloud

???
syncing is not specific to PWA but if your work is local, your machine will need to upload/sync to a remote server.  
Most of the time :)

- The simplest is : not syncing > just export to well known format csv/Excel/txt/ zip  
- optimistic locking is a good option for field data uploading to backend  
- if you need more fine grained sync CouchDB/PouchDB is a good candidate  
- dexie cloud seems interesting : good library for front iDB
A lot of discussion happening at the moment w/ CRDT being the creme de la creme. BUT not suited for every cases.

???
Share file (from Web Share API)  
could not make it work with a generated zip file

---
name: seamful
background-image: url(../_images_bateau/grenouille_cropped.jpeg)
<style>
  #slide-seamful{
        background-size: 45%;
    background-position-x: 0%;
    background-position-y: -.5em;
  }
</style>

.ml47[
# Let the user know the state of their data
.tag2[Synced ?] 
.tag2[Not synced ?] 
.tag2[Failed ?]

## Make it seamful
Provide a button to trigger a sync
]
---
exclude: true
name: idb-mig
class: bkg-vertical-0-155
background-image: url(../_images_bateau/cygne_suited.jpg)
<style>
  #slide-idb-mig h1,#slide-idb-mig h3{text-align: right;}
  #slide-idb-mig .absolute {
    top: 26.5%;
    right: 44%;
    transform: rotate(90deg) scalex(.8);
}
</style>

.ml47[
# indexedDB migration
### better than checking version
.absolute[![](image/arrow_angle-1.png)]
### check presence of store and/or index

.code.mbs[
  Does object ‘report’ exists?  
  If not, create it  
]
.code[
  Does index ‘reportStatus’ exists?  
  If not, create it
]]

---
exclude: true
name: pwa-name
class: middle, bkg-contain, bkg-top--46
background-image: url(../_images_bateau/rochers_remous_cropped_h.jpg)
<style>
#slide-pwa-name h1 {
  margin-top: 3em;
  max-width: fit-content;
  padding: .25em;
  border-radius: .15em;
  background-color: hsl(23deg 16% 78% / 80%);
}
</style>

# PWA name lacks adoption
  - Blocker to sell to client
  - Nobody understands what a “progressive web app” is
  - What I say :  
  “it’s the modern way to ship mobile app. Just install from the browser.  
  No need for store”
  - “Installable Browser App” would have been more meaningful

---
name: conclusion
class: conclusion
background-image: url(../_images_bateau/bateau-en-marche.jpg)
<style>
  .conclusion {
    background-size: 48%;
    background-position-x: 102%;
    background-position-y: -53%;
}
  .conclusion h1 {font-size: 50px; margin-top: 1.5em}
  .conclusion li{margin-bottom: 1em}
</style>

# PWA & locally served MPA

- Performance Is Baked In
--

- Easier To Reason About Compared   
To A Spa W/ Framework
--

- Fast Release Cycle,   
No Dependance On Store
--

- You Only Need A Browser!
---
exclude: true
class: whatpwa, bkg-gradient-blue-1

.dflex[.w50.dflex.flexcol[
# whatpwacando.today
https://whatpwacando.today
].noop[![](image/whatpwacando_today.png)] ]

???
some API are not implemented in iOS  
Depending on your use case, makes it questionnable to adopt PWA for consumer app
---
name: end
count: false
class: bottom, right
background-image: url(../_images_bateau/mouillage-cropped.jpg)
<style>
  #slide-end {
    color: hsl(282deg 13.67% 27.84%);
    font-size: .8em;
}
div#slide-end h1 {
    /*font-family: 'Compagnon';*/
    position: relative;
    top: -.5em;
    text-align: center;
    font-size: 8em;
    font-weight: 900;
    color: white;
    text-shadow: 0px 1px 10px #463d41, 2px 1px 4px #ac8673;
}
</style>

# Thank you!

“Uncut” version with code: [slides](https://alethgueguen.com/slides/2026_WebDayOut/pwa_from_the_trenches_uncut.html)