HOME > RSS > BLOGS France > Gastero Prod

R S S : Gastero Prod

PageRank : 1 %

VoteRank :
(0 - 0 vote)

tagsTags: , , , , , , , , , ,

Français - French


How much data should my Service Worker put upfront in the offline cache?

12 January[ —]

I love when Web site/apps work even when I’m offline. I’ve made my SVG game esviji work offline thanks to appcache just after attending Jake Archibald conference about why Application Cache is a Douchebag during the 2012 edition of the Paris Web conference. Fortunately, we have now Service Workers (in some browsers), which gives us more control over this kind of cache for offline browsing. But as Uncle Ben says, “With Great Power Comes Great Responsibility”.

Just like with appcache, it is possible with Service Workers to put a full website in the cache when loading the first visited page.

It is very interesting, because you can then go offline and browse the whole site just as if you were online, without even noticing you’re offline. The cache will then be updated when you visit pages of the site while online. Depending on the nature of the content, you will fetch the page from the server when it is requested by the user, so that she gets the up-to-date version1, or you will show the cached version first, and update the cache only for subsequent visits.

All of this is really well explained by Jeremy Keith in a series of posts on his blog, including the recent one about Making Resilient Web Design work offline.

Resilient Web Design is a Web book Jeremy wrote a few weeks ago. I urge you to read this book, it’s really great. Just like most of Jeremy’s creations, anyway.

Here’s an extract of the book’s introduction:

The World Wide Web has been around for long enough now that we can begin to evaluate the twists and turns of its evolution. I wrote this book to highlight some of the approaches to web design that have proven to be resilient. I didn’t do this purely out of historical interest (although I am fascinated by the already rich history of our young industry). In learning from the past, I believe we can better prepare for the future.

So, back to the topic of this post.

Jeremy had the great idea to make this book available offline thanks to a Service Worker, so you can visit it once, even only one page of it, and read the whole book while offline, commuting like me in Paris underground subway for example2.

This is great! There is a lot to come for the Web thanks to such features, assembled in Progressive Web Apps3.

But, it means Jeremy chose to fetch the whole site content and resources in every capable browser4, even if the user only wants to read the introduction, and decide that she doesn’t need to read the rest. I would call her a fool, of course, but it might happen.

According to my browser network panel or WebPagetest, it means almost 16 Mb are downloaded right away when you access one page of the site.

The Resilient Web Design web book audited by WebPagetest

The site is very fast, and all checks are green, but that’s because most of the downloads happen asynchronously, after the visited page has been rendered.

I must confess I did almost the same thing for a while in my game esviji when I started using appcache, because I put almost 2 Mb of audio files in the cache. I decided later that offline users could play without sound, so I removed it from the cache.

For a small site/app that takes 2 or 3 Mb, I can accept to download everything, because the convenience to have all this available while offline can be great. But I think 16 Mb is really to much.

Just to illustrate, it means that one visit to this site will cost a Mauritanian at least 10 % of his daily income, according to Tim Kadlec’s simulation on What Does My Site Cost?.

Cost of visiting this website as a percentage of daily income

Only 0.24 % for Jeremy in UK or 0.28 % for me in France, but we are here because we love the World Wide Web, not Wealthy Westerners’ Web, as presented by Bruce Lawson during 2016 edition of the Paris Web conference.

Because I use it quite a lot these days to check my own Progressive Web Apps, I thought it would be nice if Lighthouse, the Chrome extension that check web pages against a growing list of best practices, included a check on total page weight. It looks like Hubert Sablonnière already had this idea and created an issue, which got support from Paul Irish, so it will come sooner or later.

For my own website, I first thought I would only cache visited pages. But I now cache the homepage, the two about pages, and the last post, regardless of the page on which the user arrives, for a really light total weight of 87 KB additional resources. The offline fallback page lists the pages that are in the cache, so that the user can discover some unknown content even when she’s offline. This is a WIP, so it might break, and it will change over the coming weeks, because I might adjust my strategy.

There is a user setting to “save data” in some browser, which activation adds a new HTTP header we can test in our Service Workers, as shown by Dean Hume in his post Service Workers: Save your User’s Data using the Save-Data Header, but I think most people that are not as tech savvy as us will never notice this setting, so it’s obviously a nice to have, but it’s not enough.

So, it might be nicer to initially cache only the files needed to enhance the performance of the site and provide a clean offline fallback, then add the pages when they are visited, and provide the user with an option to cache the whole site, or part of it, for future offline browsing.

It would be less magical, indeed, but more respectful of users with limited and/or costly data plans.

I don’t know if Jeremy thought about this or not, but I hope there will be some discussions around this in the community, because Service Workers give us a lot of power, that could be abused by people not aware of the damages it can cause, or even on purpose, just because it helps making websites faster. When the average page is already more than 2 Mb, we really have to be careful.

To conclude, it’s kind of amusing to see that Jeremy also provides links to download other versions of the book, including PDF, epub and mobi, and most of these files weight less than 16 Mb.

  1. Be careful, you can still get a not so up-to-date version if the page is taken from the traditional browser cache. Yes, “it’s complicated” sometimes, as shown in this awesome post written by Yoav Weiss. ⬆︎

  2. Well, that’s pure fiction, because I have an iPhone, and Apple didn’t work yet on supporting Service Workers in iOS. Just like Scott Jehl, “As an iOS user, the lack of Service Worker support in Safari is almost enough for me to switch to Android. Almost.”. ⬆︎

  3. You can read more about Progressive Web Apps in french on my company’s blog: Les Progressive Web Apps pour booster l’UX de vos services. ⬆︎

  4. As of today, these include only Firefox, Chrome and Opera. ⬆︎

Cloudinary fait la promotion de mon plugin Jekyll

August 2016[ —]

Je vous en avais parlé lors de ma migration vers Jekyll 3, je me suis lancé dans le développement d’un plugin Jekyll pour utiliser le service Cloudinary pour mes images responsives.

Cloudinary a semble-t-il bien aimé cette initiative, puisque Eric Portis (@etportis), qui les a rejoint il y a quelque temps, m’a invité à écrire un billet pour leur blog à propos de ce développement : « How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a plugin ».

Le billet a aussi été traduit en français par Frank Taillandier pour le site Jekyll FR : « Gérer les images responsive dans Jekyll avec le plugin Cloudinary ».

N’hésitez-pas à partager l’info, retweeter, etc. !

Et si ça vous tente, n’hésitez pas à créer un compte sur Cloudinary1, c’est gratuit pour les besoins raisonnables comme ceux de ce blog, qui a tout de même déjà plus de 750 images.

Vous pouvez aussi « upvoter » sur Hacker News, pour donner un peu de visibilité au plugin.

  1. Si vous utilisez ce lien pour vous inscrire, cela me donnera un petit bonus de quota pour mon compte, un bon moyen de me remercier et encourager ! ;-) ⬆︎

Faciliteur ou facilitateur ?

August 2016[ —]

Comme je l’indique dans la page à propos de ce site, « je me qualifie moi-même aujourd’hui de faciliteur de Web, ayant à cœur de faire profiter les autres de mes connaissances ». Mais ne devrais-je pas plutôt dire « facilitateur » ?

Le Larousse ne connaît pas « faciliteur », et sa définition de « facilitateur » indique ceci :

Qui est chargé de faciliter le déroulement d’une action, d’un processus

Wiktionary a d’ailleurs le même type de définition :

Personne chargée de faire en sorte que les choses se passent mieux.

« Faciliteur » y est bien cité comme synonyme, mais sa page indique qu’il est rarement utilisé.

C’est donc bien « facilitateur » qu’il faut plutôt utiliser.

Pas loin, la page Wikipedia « facilitateur » est plus riche, mais se focalise sur une définition précise d’un métier, plutôt que simplement l’adjectif substantivé :

Métier encore méconnu, le facilitateur aide un groupe à comprendre ses objectifs communs et l’accompagne pour s’organiser et atteindre ces objectifs. Il emploie le plus souvent des outils et méthodes d’intelligence collective pour faciliter les réunions. Le facilitateur peut être utile dans diverses situations telles que de face à face, au sein d’un réseau professionnel par exemple de type socio-sanitaire, en groupe ou dans une pratique en ligne.

Mais surtout, la fin de l’article indique ceci :

Le mot « facilitateur » est calqué de l’anglais facilitator. « Faciliteur » est son pendant en français de bon aloi.

C’est donc plutôt « faciliteur » qu’il faut utiliser ?

Sauf que la page Wikipedia « faciliteur » est vide, supprimée en 2006 par Grondin parce que « néologisme confidentiel et non recyclable sur wiktionnaire »… :-/

Je note que Wikipedia n’est pas fan du « français de bon aloi »…

Donc on revient à « facilitateur » ?

Heureusement, la page Wiktionary contient aussi un lien vers un épisode de l’émission « Merci professeur ! » de TV5Monde1, dans lequel Bernard Cerquiglini indique bien que « facilitateur » est un anglicisme, et qu’il est préférable de « respecter les règles traditionnelles de la morphologie », et donc substantiver « faciliter » en « faciliteur » !

La vie des langues est décidément captivante, mais l’essentiel, c’est que je peux garder ma présentation intacte, tant pis pour le Larousse et Wikipedia !

  1. Émission captivante, au passage, et très courte, donc je vous invite à parcourir les nombreux épisodes. ⬆︎

A bridge not so far

August 2016[ —]

Voilà le Manhattan Bridge, impressionnante vue depuis la rue Washington du quartier DUMBO de Brooklyn.

A bridge not so far

En me décalant un peu, j’aurais même pu apercevoir l’Empire State Building entre les pieds, mais je préfère ce cadrage décalé, pas trop symétrique.

J’ai adoré mon voyage à New York l’an dernier, et j’en ai ramené quelques photos bien sympathiques, que je vais continuer à diffuser petit à petit.

Soignez votre lisibilité avec des textes de largeur maîtrisée

August 2016[ —]

Afin d’assurer une présentation optimale du texte pour la lisibilité, il est nécessaire de définir un nombre optimal de caractères par ligne quelle que soit la taille du texte.

Allez, j’ose m’auto-citer… ;-)

[…] assurer une présentation optimale du texte, notamment en conservant un nombre optimal de caractères par ligne — de 55 à 65, à affiner selon les langues concernées — quelle que soit la taille du texte. Pour cela, une largeur de 30em est une valeur courante, à ajuster évidemment selon la nature de la police de caractères

En fait, les sources varient de 50 à 75 caractères par ligne :

Pour finir, un petit outil de simulation pour voir l’impact de la langue et de la police de caractères sur le nombre de caractères par ligne selon la largeur du bloc en em : http://nerd.vasilis.nl/code/measure-help/


August 2016[ —]

Je n’ai pas trop l’habitude de faire des photos de natures mortes, mais quand j’ai vu ces vieux livres dans une des installations du Festival International des Jardins de Chaumont-sur-Loire1, j’ai su qu’il y avait matière à faire une belle photo.


Voici pour l’accompagner une belle citation de Carlos Ruiz Zafón extraite de “The Shadow of the Wind” :

Every book, every volume you see here, has a soul. The soul of the person who wrote it and of those who read it and lived and dreamed with it. Every time a book changes hands, every time someone runs his eyes down its pages, its spirit grows and strengthens.

PS: “Ripe” en anglais signifie « mûr » en français.

  1. Je vous recommande vivement d’y aller au moins une fois, d’ailleurs, ça vaut le détour. ⬆︎

mirPod.com is the best way to tune in to the Web.

Search, discover, enjoy, news, english podcast, radios, webtv, videos. You can find content from the World & USA & UK. Make your own content and share it with your friends.

HOME add podcastADD PODCAST FORUM By Jordi Mir & mirPod since April 2005....