class: center, middle # Always bet on the web
@kramp
-
huggingface.co
--- class: center, middle ## 🕥 Some History 🕐
timeline
--- class: center, middle ## from [📄](https://www.debian.org/intro/organization) to 1. [🤝](https://en.wikipedia.org/wiki/Space_Shuttle_Columbia_disaster) 2. [✉️](https://gmail.com) 3. [🕺](https://facebook.com) 4. [🚀](https://github.dev/krampstudio/offline-webapp-talk) 5. [🖍️](https://figma.com) --- class: center, middle ## from 💻 to 📱 ![market-share](./img/market-share.png) Mobile vs Desktop Global Market Share --- class: center, middle ## New use cases ## 🛫 🚇 🚣 🛸 🚽 --- class: center, middle ## 📴 no more! --- class: center, middle # Solution ## 🥁 --- class: center, middle ## No 🦄 ### only hard work 👷 --- class: center, middle ### Break early 😠 ![no wifi](./img/disconnected.png) --- class: center,middle ### Going native 🤮 ![please download](./img/appstores.jpg) --- class: center,middle ### Break later 🤯 ![wait and refresh](./img/mobile-offline-mode-refresh.png) --- class: center,middle ### ✨ Offline ✨ --- class: center,middle ## Define your strategy
I don't care
Resilancy
Disconnected
Offline
🙈
😒
😏
🤩
💰
💰💰
💰💳💶💸
📈
📈
--- class: center, middle ## Define your target 🎯 ## 💻, 📱, 🏧, 📺 --- class: center, middle ## Mobile first ? ### PWA 💞 --- class: center, middle ## Wide support ? --- class: center, middle ## Architecture ## 🍝 🥞 🍢 --- class: center, middle ### The state is the 🔑 ![archi](./img/archi.png) --- class: center, middle ## Workflow 📶🔸📴 🔸 📶 🔀 🔸📴 🔸 📶 🔀 --- class: center, middle ## Always bet on the web ## 🎰 --- class: middle ### AppCache Manifest Support ⭐⭐⭐⭐ - 🚨 Deprecated 🚨 ```txt CACHE MANIFEST # v0.1.1 CACHE: /favicon.ico index.html images/logo.png dist/bundle.js NETWORK: * FALLBACK: /api/ /static.html images/large/ images/offline.jpg ``` ```html ``` --- class: middle ### Connectivity Support ⭐⭐⭐⭐ ```js const showStatus = () => console.log( navigator.onLine ? 'online' : 'offline' ); window.addEventListener('online', showStatus); window.addEventListener('offline', showStatus); ``` --- class: middle ### Network info Support 👀 ```js const connection = navigator.connection; connection.addEventListener('change', () => { //ethernet, wifi, cellular, etc. console.log(connection.type); //'slow-2g', '2g', etc. console.log(connection.effectiveType); //in MBps console.log(connection.downlinkMax); }); ``` --- class: middle ### fetch Support ⭐⭐⭐⭐ ```js const res = await fetch(url, { method: 'POST', body: JSON.stringify(data), headers:{ 'Content-Type': 'application/json' } }) ``` --- class: middle ### xhr2 Support ⭐⭐⭐⭐ ```js const req = new XMLHttpRequest(); req.open('PUT', url, true); req.responseType = "blob"; req.addEventListener('load', e => { const res = req.response; //... }); req.addEventListener('progress' = e => console.log(e.loaded / e.total * 100)) req.addEventListener('abort', () => console.log('canceled') ); req.addEventListener('error', err => console.error(err)); req.addEventListener('timeout', () => console.log('timed out') ); req.send(new Blob()); ``` --- class: middle ```js if (response.status === 0) { //Offline ? } ``` --- class: middle ### Web Sockets Support ⭐⭐⭐⭐ ```js const socket = new WebSocket(url); socket.addEventListener('close', e => { if(e.code === 1001){ //Offine ? } }); ``` --- class: middle ### Service Workers Support ⭐⭐⭐⭐ Flexibility 🚀🚀🚀 ![sw worfkflow](./img/sw.png) --- class: middle ### Service Workers Registration lifecycle ![lifecycle](./img/sw-lifecycle.png) --- class: middle ### Service Workers - Cache API ```js self.addEventListener('fetch', event => { event.respondWith( async () => { const cache = await caches.open('CACHE_ID'); const cached = await cache.match(event.request); if(cached){ i return cached; //cache HIT } //cache MISS const response = await fetch(event.request); //fulfill the cache cache.put(event.request, response.clone()); return response; }); }); ``` --- class: middle ### Service Workers - Background sync Support ⭐ - Most waited 🎅 ```js navigator.serviceWorker .register('./service-worker.js') .then(registration => navigator.serviceWorker.ready) .then(registration => { // register sync button.addEventListener('click', () => { registration.sync.register('data-push'); }); }); ``` ```js self.addEventListener('sync', e => { if(e.tag === 'data-push'){ e.waitUntil( push() ); } }); ``` --- class: middle ### WebStorage Support ⭐⭐⭐⭐ ```js window.sessionStorage.setItem('date-format', 'YYYY-MM-DD'); const format = window.sessionStorage.getItem('date-format'); window.sessionStorage.removeItem('date-format'); ``` --- class: middle ### IndexedDB Support ⭐⭐⭐⭐ ```js const request = window.indexedDB.open("user-store", 1); request.onerror = err => console.error(err); request.onupgradeneeded = e => { const store = evt.currentTarget.result. createObjectStore('contacts', { keyPath: 'id', autoIncrement: true }); store.createIndex('id', 'id', { unique: true }); store.createIndex('login', 'login', { unique: false }); store.createIndex('email', 'email', { unique: true }); store.createIndex('firstname', 'firstname', { unique: false }); store.createIndex('lastname', 'lastname', { unique: false }); }; ``` --- class: middle ```js const request = window.indexedDB.open("user-store", 1); request.onerror = err => console.error(err); request.onsuccess = function(evt) { const db = this.result; const transaction = db.transaction(["contacts"], "readwrite"); const objectStore = transaction.objectStore("contacts"); objectStore.add({ id : '12', login : 'mrrobot', email : 'mr.robot@protonmail.com', firstname : 'Elliot', firstname : 'Alderson' }); } ``` --- class: middle ### Quotas Support ⭐⭐ ```js navigator.storage.estimate().then( estimate => { console.log(estimate.usage / estimate.quota).toFixed(2)); }); ``` --- class: center, middle ## Tools - sync ![PouchDB](./img/pouchdb.png) ![Firebase](./img/firebase.png) --- class: center, middle ## Tools - sw ![WorkBox](./img/Workbox-Logo-Grey.svg) --- class: center, middle ## Tools - db
- [localforage](https://localforage.github.io/localForage/) - [minimongo](https://github.com/mWater/minimongo) - ... --- class: center, middle ## 🧠 and for ML --- class: center, middle ### 🌐 Drafts - [webnn](https://webmachinelearning.github.io/webnn/) - [model-loader](https://webmachinelearning.github.io/model-loader/) --- class: center, middle ### 👷 - [onnx-web](https://microsoft.github.io/onnxruntime-web-demo/#/yolo) - [webnn-samples](https://webmachinelearning.github.io/webnn-samples/) --- class: center, middle ## Thanks!
@kramp
-
huggingface.co
---