#service_worker

Building An #Offline Friendly #Image #Upload System — Smashing Magazine
▻https://www.smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system

https://files.smashing.media/articles/building-offline-friendly-image-upload-system/1-upload-system-flow-chart.png

- The user selects an image.
The process begins by letting the user select their image.
– The image is stored locally in #IndexedDB.
Next, the system checks for network connectivity. If network connectivity is available, the system uploads the image directly, avoiding unnecessary local storage usage. However, if the network is not available, the image will be stored in IndexedDB.
– The #service_worker detects when the network is restored.
With the image stored in IndexedDB, the system waits to detect when the network connection is restored to continue with the next step.
– The background sync processes pending uploads.
The moment the connection is restored, the system will try to upload the image again.
– The file is successfully uploaded.
The moment the image is uploaded, the system will remove the local copy stored in IndexedDB.

Comment rendre une PWA installable ?
▻https://developpeur-freelance.io/pwa-installable

Tutoriel pour la gestion de l’installation d’une PWA (service-worker + JavaScript)

#PWA #progressive_web_app #javascript #service_worker

Transformer votre site en PWA | Javascript par Flo | GinkoNote
▻https://www.ginkonote.com/fr/utilisateurs/flo/articles/transformer-votre-site-en-pwa@javascript

Howto pour générer une PWA à partir d’un site HTML + JS avec en particulier la gestion de la mise en cache local

#progressive_web_app #PWA #howto #service_worker #manifest.json

“Stumbling blocks on the way to web performance” Good debunking about some badly-thought “web performance improvments” ideas.

▻https://macwright.org/2019/01/05/performance.html

#image_formats #service_workers #web_caching #web_performance

Votre première PWA | Blog Eleven Labs
▻https://blog.eleven-labs.com/fr/votre-premiere-pwa

Tutoriel pour réaliser une Progressive Web App (avec en particulier utilisation de Gulp pour la configuration du service worker)

#PWA #progressive_web_app #gulp #service_worker

The Building Blocks Of Progressive Web #apps – Smashing Magazine
▻https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps
#progressive_apps #service_workers

Offline content with service workers · MadebyMike
▻https://madebymike.com.au/writing/service-workers

un tuto pour l’utilisation de service worker pour gérer l’enregistrement d’une page pour le offline

#howto #service_worker #progressive_web_app #offline

How we made the RioRun progressive web app | Info | The Guardian
▻https://www.theguardian.com/info/developer-blog/2016/aug/19/how-we-made-the-riorun-progressive-web-app

Un retour d’expérience sur la mise en place d’une « progressive web app » avec :
– les problèmes de service worker : voir ▻https://gist.github.com/Rich-Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9

document.querySelector( '.fetch-content' ).addEventListener( 'click', () => {
window.caches.open( myCache )
.then( cache => cache.addAll( content ) )
.then( () => alert( 'content is now available offline' ) )
.catch( () => alert( 'oh noes! something went wrong' ) );
});

Que sont les Progressive Web Apps ? - Frank Taillandier
▻http://frank.taillandier.me/2016/06/28/que-sont-les-progressive-web-apps

Les Progressive Web Apps apportent les fonctionnalités attendues des applications natives à l’expérience de navigation Web sur un mobile en utilisant des technologies basées sur les standards et en tournant dans un conteneur sécurisé accessible à tous sur le Web.
En somme, les Progressive Web Apps décrivent toute une série de technologies, de concepts d’architecture et d’API Web qui travaillent de concert pour proposer une expérience similaire aux applications natives sur le Web mobile. Voyons ensemble les quelques tenants de base des Progressive Web Apps.

Le concept de « Progressive Web Apps » sent le marketing à plein nez mais l’idée de base est là : faire des applis web utilisables comme applis mobiles (ce qui était un des principe porté par Mozilla phone dans son concept d’OS mobile). Et au passage ça devrait permettre de se débarrasser des Truc Store et de la compilation par OS à chaque version d’une l’appli...
Voir aussi :
▻https://serviceworke.rs pour des exemples de « Service workers »
▻https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-3 et ▻https://w3c.github.io/manifest pour l’utilisation de fichier manifest.json pour installer une web apps

#progressive_web_apps #service_workers #app_shell #appli_mobile #manifest.json

#upup - The #offline First Library
▻https://www.talater.com/upup

UpUp est une bibliothèque #javascript légère, en ajoutant des fonctionnalités offline aux pages web. Grâce à des #service_workers, le navigateur va mettre en cache les données et assets spécifiées par UpUp pour les réafficher en cas de déconnexion et d’appel de la page. Propose un tuto pour la prise en main et une doc pour l’API de la lib.

#webdev #librairie

service-worker samples
▻https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker

Tags : #Service_Worker #offline #cache

Is ServiceWorker ready ?
▻https://jakearchibald.github.io/isserviceworkerready

Tags : #Service_Worker #statut #support #navigateurs #RWD #flexbox

#Service_Worker - first draft published - JakeArchibald.com
▻http://jakearchibald.com/2014/service-worker-first-draft

Tags: Service Worker

Service Workers Explained
▻https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

Tags : #Service_Worker #offline #appcache

#Service_Worker will be #SSL/TLS only
▻https://github.com/slightlyoff/ServiceWorker/issues/199

Tags: SSL #TLS sécurité #cache #webperf Service Worker

#sécurité