davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
231 Révisions
1 Branche
Aborescence: a6a91a4afc
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'a6a91a4afc'
${ noResults }
larlet-fr-david-cache/cache/f23e53c1e67a3062da9d3380798.../index.html

index.html 26KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Progressive Web Applications (PWA): A primer (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://tech.people-doc.com/progressive-web-applications-primer.html">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Progressive Web Applications (PWA): A primer (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://tech.people-doc.com/progressive-web-applications-primer.html">Source originale du contenu</a></h3>

  463.     <h3>Wanna Feel Old?</h3>

  464. 

  465. <p>Back in the days some developers created static websites, and I meant static as in table layout and pixel-perfect design. This were the good ol’ times… Well not really, and since then the web did move a lot!</p>

  466. 

  467. <p>First, we get rid of those damn table layout, flex a bit to continue by adding some interactivity to website using GIF, <a href="https://www.wikiwand.com/en/Dynamic_HTML">DHTML</a>, and <a href="https://www.wikiwand.com/en/Ajax_(programming)">AJAX</a>. Then, we decided to challenge the screen size <em>statu quo</em> and go to the infinity of handheld devices form-factors.</p>

  468. 

  469. <p>That’s when Responsive Web Design (RWD) emerged has a good idea to avoid duplicating what we did. A side-effect of RWD has been to highlight the multiple way and devices people were using to browse the web, thus benefiting accessibility and those who need it (i.e. everyone).</p>

  470. 

  471. <p>With the development of the smartphone market, web development was taken over by native mobile technologies (Android, IOS, etc). So, it was time to get back to our basic, and work on real tooling to move our ecosystem forward. Hence, the birth of Node/NPM that changed the game, introducing frameworks and libraries to the daily process of web developers (grunt, gulp, webpack, rollup, etc). We were now developing web app more often than website and web developers’ role evolve to become Software Engineer one!</p>

  472. 

  473. <p>With these new powers, came new responsibilities. Now, more than before, we have to ensure our products quality, maintainability, performance and reachability. Indeed, in this age, users access content on various type of devices (desktop, smart- vs. dumb-phone) and uneven connection speed (office, home, commute). Once again, we were caught up with what accessibility has been trying to fix for years.</p>

  474. 

  475. <p>Ok, but that was back in 2015…</p>

  476. 

  477. <h3>What is a Progressive Web App?</h3>

  478. 

  479. <p>Since 2017, web browser are trying to reclaim market shares from the native apps using Progressive Web App (PWA):</p>

  480. 

  481. <blockquote>

  482. <p>A website which looks and behaves exactly like a native mobile app, which means that it can be <strong>added to the home screen</strong> on a smartphone, send <strong>push notifications</strong>, access the <strong>device’s hardware</strong> and - most importantly - <strong>work offline</strong>.

  483. — <a href="https://webagility.com/posts/how-progressive-web-apps-make-the-web-great-again">webagility.com/posts/how-progressive-web-apps-make-the-web-great-again</a>.</p>

  484. </blockquote>

  485. 

  486. <p>If you never used a PWA before, you might want to reconsider your statement after visiting at <a href="about:serviceworkers-internals">about:serviceworkers-internals</a> on Firefox and <a href="chrome://serviceworker-internals/">chrome://serviceworker-internals/</a> on Chrome.</p>

  487. 

  488. <p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_1.png" alt="Examples of th satstuspage of a browser" width="50%" style="position:relative;left:25%"></p>

  489. 

  490. <p>What are those pages, you might ask? They list the service workers, the part of the PWA that manages cache and let the application work even when there is no more connectivity.</p>

  491. 

  492. <p>Understanding PWA will be easier if you are familiar with modern web framework that hook into a page to load the app and navigates other content from it. In PWA parlance they call this the application shell pattern and it aims at making the app <a href="https://developers.google.com/web/updates/2015/11/app-shell#first_load_and_loading_other_pages">load fast, be cached, dynamically display content</a>.</p>

  493. 

  494. <p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_2.jpg" alt="What is the AppShell?" width="50%" style="position:relative;left:25%"></p>

  495. 

  496. <p>In order to get a fast TTI (Time To Interactive), you should design your homepage carefully to hold what should be on screen immediately and inline it (CSS and images mainly) or fake it (use CSS or text placeholder).</p>

  497. 

  498. <p>But first things first, what are the benefits of developing and using PWA?</p>

  499. 

  500. <h3>Business Incentives</h3>

  501. 

  502. <p>The paramount benefit is to make your users happier with an application that will be <a href="https://developers.google.com/web/progressive-web-apps/">faster to install, more reliable to use and provide engaging content</a>. And happier users stay longer, and come back to your app. Behind this claim, are facts and numbers to support it.</p>

  503. 

  504. <p>First, the bounce rate is extremely dependant on how fast your app serves content but above all how fast it becomes interactive so the app can handle user input. This metric is called <a href="https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive">Time to Interactive</a> and if it goes above 3s expect to lose half of your users.</p>

  505. 

  506. <p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_3.png" alt="Time To Interactive" width="50%" style="position:relative;left:25%"></p>

  507. 

  508. <p>Using PWA will reduce network consumption as you reduce the amount of data to transfer to only the data themselves, the application code can be cached and persist even after tab or browser has been closed. If your company pays for its bandwidth, you know how this is important.</p>

  509. 

  510. <p>As you are distributing your app yourself, you mobile app is the same as your web app so this means less code to maintain and less dependencies to 3rd parties such as Play Store and their review processes.</p>

  511. 

  512. <p>Due to being web content with light payload you can reach emerging market at the same cost for you and reduced cost for your users (remember not every country has cheap 100 Go/month like we have in France).</p>

  513. 

  514. <p>Google developers platform has a lot of <a href="https://developers.google.com/web/showcase/">showcases you can explore</a> to see other benefit, categorized by regions or industries.</p>

  515. 

  516. <h3>User benefits</h3>

  517. 

  518. <h4>Lighter</h4>

  519. 

  520. <p>In comparison to native apps, PWA are a lighter as most of the heavy-lifting is done by the browser so you can focus on coding and shipping code related to your business.</p>

  521. 

  522. <p>As the app mostly exchanges data even across browser sessions, your user will consume less from their data plans and they will love you for this as they will be able to consume more of your content.</p>

  523. 

  524. <p>Once again a lighter app means more people can access it, in different context and with different connectivity. Indeed, why would you cut off potential customer from Africa or a remote mountainous areas in France?</p>

  525. 

  526. <h4>Faster to install</h4>

  527. 

  528. <p>Being lighter mean faster to download and install, that means faster access to content and more time on the app.</p>

  529. 

  530. <blockquote>

  531. <p>In a mobile app <strong>every step you make a user perform</strong> before they get value out of your app will <strong>cost you 20% of users</strong>.

  532. — Gabor Csele, a Product Manager in Google</p>

  533. </blockquote>

  534. 

  535. <p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_4.png" alt="From Discovery to Install charts, comparing apps VS PWAs" width="50%" style="position:relative;left:25%"></p>

  536. 

  537. <h4>Familiar Behavior</h4>

  538. 

  539. <p>One goal of PWA is to fill the gap between web experience and native experience using only web technologies. Despite being an active area of development, mobile web browser and OS offer some features to make you feel like your are using a native app. For instance, installing a PWA you will:</p>

  540. 

  541. <ul>

  542. <li>Get your app icon on the homescreen and the app listing,</li>

  543. <li>View your app as another native app while hitting windows listing button</li>

  544. <li>Manage it like native app (removal)</li>

  545. </ul>

  546. 

  547. <h3>Installing</h3>

  548. 

  549. <p>To install a progressive web app it’s better to get yourself a smartphone and open your browser of choice. In Firefox, <a href="https://developer.mozilla.org/en-US/Apps/Progressive/Add_to_home_screen">look for the house icon</a>, it’s official name is <em>Add to Home screen</em> (A2HS), with a plus in the URL bar, on Chrome <a href="https://developers.google.com/web/fundamentals/app-install-banners/">head to the menu and look for Add to Homescreen</a>.</p>

  550. 

  551. <h3>What Can Web Do Today?</h3>

  552. 

  553. <p>You might think that the web can compete with native app API, that’s probably because you forgot about <a href="http://whatwebcando.today">What Can Web Do Today?</a> website:</p>

  554. 

  555. <blockquote>

  556. <p>bluetooth, geolocation, speech recognition and even local notifications and push messages work well in a lot of major and modern browsers...

  557. — <a href="http://progressivewebapps.net/">Progressivewebapps.net</a></p>

  558. </blockquote>

  559. 

  560. <p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_5.png" alt="Screenshot of the website 'What can web do today?'" width="50%" style="position:relative;left:25%"></p>

  561. 

  562. <h3>Conclusion - Going even further</h3>

  563. 

  564. <p>If you are looking for performance on the web, you should be looking at <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts">Web Assembly</a>. It’s coming pretty fast and it’s back by… well, <a href="https://arstechnica.com/information-technology/2015/06/the-web-is-getting-its-bytecode-webassembly/">every major actor of web technologies</a>: Mozilla Foundation, Google, Microsoft, Apple and W3C.</p>

  565. 

  566. <p>We hope this introduction to Progressive Web Applications made you want to

  567. implement it on your own projects. And at least we certainly think you should :)</p>

  568. 

  569. <p>Last but not least: <a href="https://boards.greenhouse.io/peopledoc/jobs/613268#.WoL7SFPOV0s">we're hiring Frontend developers</a> to join the team to work on PWAs and more.</p>

  570. 

  571. <p>— Édouard</p>

  572.   </article>

  573. </section>

  574. 

  575. 

  576. <nav id="jumpto">

  577.   <p>

  578.     <a href="/david/blog/">Accueil du blog</a> |

  579.     <a href="https://tech.people-doc.com/progressive-web-applications-primer.html">Source originale</a> |

  580.     <a href="/david/stream/2019/">Accueil du flux</a>

  581.   </p>

  582. </nav>

  583. 

  584. <footer>

  585.   <div>

  586.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  587.     <p>

  588.       Bonjour/Hi!

  589.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  590.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  591.     </p>

  592.     <p>

  593.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  594.     </p>

  595.     

  596.     <p>

  597.       Voici quelques articles choisis :

  598.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  599.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  600.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  601.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  602.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  603.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  604.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  605.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  606.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  607.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  608.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  609.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  610.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  611.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  612.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  613.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  614.     </p>

  615.     <p>

  616.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  617.     </p>

  618.     <p>

  619.       Je ne traque pas ta navigation mais mon

  620.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  621.       conserve des logs d’accès.

  622.     </p>

  623.   </div>

  624. </footer>

  625. <script type="text/javascript">

  626.   ;(_ => {

  627.     const jumper = document.getElementById('jumper')

  628.     jumper.addEventListener('click', e => {

  629.       e.preventDefault()

  630.       const anchor = e.target.getAttribute('href')

  631.       const targetEl = document.getElementById(anchor.substring(1))

  632.       targetEl.scrollIntoView({behavior: 'smooth'})

  633.     })

  634.   })()

  635. </script>