{"id":519,"date":"2019-01-28T10:55:34","date_gmt":"2019-01-28T09:55:34","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=519"},"modified":"2019-01-28T11:25:34","modified_gmt":"2019-01-28T10:25:34","slug":"pwa-quelques-astuces-pour-que-votre-application-pwa-ressemble-a-une-application-native","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/pwa-quelques-astuces-pour-que-votre-application-pwa-ressemble-a-une-application-native\/","title":{"rendered":"PWA : Quelques astuces pour que votre application PWA ressemble \u00e0 une application native ?"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Le 30 mars 2018, apr\u00e8s une longue attente, la release d’iOS 11.3 sortait officiellement, avec le support des fonctionnalit\u00e9s PWA port\u00e9es sur les iphones et ipad.
M\u00eame si cette annonce tr\u00e8s attendue \u00e9tait une tr\u00e8s bonne nouvelle, en y regardant de plus pr\u00e8s on s’est vite rendu compte que le support PWA \u00e9tait encore tr\u00e8s loin d’\u00eatre parfait (voir article Quelles contraintes sur iOS ?<\/a> )
La liste de bugs et de fonctionnalit\u00e9s manquantes est longue comme le bras, mais ne perdez pas espoir !
Les d\u00e9veloppements sont en cours chez Apple et les correctifs devraient arriver un jour (mais quand?…).
En attendant cette mise \u00e0 jour, il existe quand m\u00eame quelques solutions afin d’optimiser les PWA sur la plateforme d’Apple, histoire de rendre un peu plus “Progressive” nos applications et les rendre plus “natives” pour nos les utilisateurs.<\/p>\n\n\n\n\n\n\n\n

Ic\u00f4ne de l’application<\/h4>\n\n\n\n

Contrainte connue<\/span> : http:\/\/lalloue.fr\/blog\/pwa-quelles-contraintes-sur-ios\/#web-app-manifest<\/a>
Contournement<\/span> :
Les ic\u00f4nes renseign\u00e9s dans le web app manifest en sont pas pris en charge sur iOS et cela donne un aspect vraiment pas terrible quand vous ajoutez votre application sur l’\u00e9cran d’acceuil de votre t\u00e9l\u00e9phone.
Une solution simple pour contourner ce point est de renseigner les ic\u00f4nes dans le meta tag “apple-touch-icon” <\/em>. 
Au passage, n’oubliez pas que la transparence n’est pas g\u00e9r\u00e9e non plus sur iOS.<\/p>\n\n\n\n

<!-- A placer dans la section 'head' -->\n<link rel=\"apple-touch-icon\" href=\"touch-icon-iphone.png\">\n<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"touch-icon-ipad.png\">\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"touch-icon-iphone-retina.png\">\n<link rel=\"apple-touch-icon\" sizes=\"167x167\" href=\"touch-icon-ipad-retina.png\"><\/code><\/pre>\n\n\n\n
Splashscreen<\/h4>\n\n\n\n
Contrainte connue<\/span> : http:\/\/lalloue.fr\/blog\/pwa-quelles-contraintes-sur-ios\/#splashscreen<\/a>
Contournement<\/span> : 
iOS ne supporte pas le splashscreen renseign\u00e9 dans le fichier manifest. R\u00e9sultat : au lancement l’utilisateur pourra admirer un magnifique \u00e9cran blanc \u00e0 la place de la page de chargement.
Heureusement, le site apple developer<\/a> propose un moyen de contourner cette limitation.
Apple supporte un meta tag personnalis\u00e9 permettant de personnaliser le splashscreen de sa web app : “apple-touch-startup-image”<\/em>. Vous n’avez donc qu’\u00e0 g\u00e9n\u00e9rer vos images dans les bonnes tailles list\u00e9es ci-dessous :<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Et quand vos images sont pr\u00eates, vous n’avez plus qu’a ajouter les liens dans la section “head” de votre web app :<\/p>\n\n\n\n
<!-- A placer dans la section 'head' -->\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" \/>\n<link href=\"\/apple_splash_2048.png\" sizes=\"2048x2732\" rel=\"apple-touch-startup-image\" \/>\n<link href=\"\/apple_splash_1668.png\" sizes=\"1668x2224\" rel=\"apple-touch-startup-image\" \/>\n<link href=\"\/apple_splash_1536.png\" sizes=\"1536x2048\" rel=\"apple-touch-startup-image\" \/>\n<link href=\"\/apple_splash_1125.png\" sizes=\"1125x2436\" rel=\"apple-touch-startup-image\" \/>\n<link href=\"\/apple_splash_1242.png\" sizes=\"1242x2208\" rel=\"apple-touch-startup-image\" \/>\n<link href=\"\/apple_splash_750.png\" sizes=\"750x1334\" rel=\"apple-touch-startup-image\" \/>\n<link href=\"\/apple_splash_640.png\" sizes=\"640x1136\" rel=\"apple-touch-startup-image\" \/><\/code><\/pre>\n\n\n\n
 Add to Home screen Prompt <\/h4>\n\n\n\n
Contrainte connue<\/span> : http:\/\/lalloue.fr\/blog\/pwa-quelles-contraintes-sur-ios\/#home-screen-prompt<\/a>
Contournement<\/span> : 
Sur Android, le syst\u00e8me propose une popup native proposant d’installer l’application sur la page d\u2019accueil si l’application est d\u00e9clar\u00e9e en tant que PWA.
Malheureusement, cette fonctionnalit\u00e9 n’est pas disponible sur iOS.
Il faut alors cliquer sur “partager”, puis, “add to home screen”, puis ajouter l’application … 3 clics pour ajouter son application sur son \u00e9cran d\u2019accueil !
Exemple avec l’application twitter :<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Mais heureusement, il existe un moyen d’am\u00e9liorer l’exp\u00e9rience utilisateur dans le cas d’une PWA.
Le plus dur est d’afficher cette popup seulement sur Safari, et pas en standalone mode (quand l’application est d\u00e9j\u00e0 ajout\u00e9e \u00e0 l’\u00e9cran d\u2019accueil).
Voici le code \u00e0 impl\u00e9menter (en Javascript):<\/p>\n\n\n\n
\/\/ D\u00e9tecter si l'appareil execute iOS\nconst isIos = () => {\n  const userAgent = window.navigator.userAgent.toLowerCase();\n  return \/iphone|ipad|ipod\/.test( userAgent );\n}\n\/\/ Detecter si l'application est en mode \"standalone\"\nconst isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);\n\n\/\/ V\u00e9rifier si l'on affiche la popup de notification\nif (isIos() && !isInStandaloneMode()) {\n  this.setState({ showInstallMessage: true });\n}<\/code><\/pre>\n\n\n\n
Et avec Ionic \/ Angular :<\/p>\n\n\n\n
\/\/ home.page.ts\n\nimport { Component } from '@angular\/core';\nimport { Platform } from '@ionic\/angular';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n\n  public isInstallMessageShown: boolean = false;\n\n  constructor(public platform: Platform) { \n    if (platform.is(\"ios\") && !pwaHelper.isInStandaloneMode()) {\n      this.isInstallMessageShown = true;\n    }\n  }\n}\n\n\/\/ pwaHelper.ts\n\nexport default class pwaHelper {\n    static isInStandaloneMode = () => ('standalone' in window.navigator) && ((window.navigator as any).standalone);\n}<\/code><\/pre>\n\n\n\n
Vous n’avez plus qu’a afficher votre popup et la personnaliser avec votre css.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
A penser : sur iPad, le bouton partager est situ\u00e9 en haut de l’\u00e9cran, \u00e0 c\u00f4t\u00e9 de la barre d’adresse, donc il faut l\u00e9g\u00e8rement modifier le css dans ce cas-ci.<\/p>\n\n\n\n
 Conservation de l’\u00e9tat entre les sessions <\/h4>\n\n\n\n
Contrainte connue<\/span> : http:\/\/lalloue.fr\/blog\/pwa-quelles-contraintes-sur-ios\/#state<\/a>
Contournement<\/span> : Stocker l’\u00e9tat et les informations de session de votre application (current page, user filled data, scroll start if possible) dans une base de donn\u00e9es IndexDB ou directement dans le local storage, et quand l’application se lance, lire ces donn\u00e9es pour restaurer l’\u00e9tat manuellement. Cela devrait fonctionner dans la majorit\u00e9 des cas.
Si vous d\u00e9velopper en React avec Redux, les packages suivants peuvent vous aider :
– redux-persist<\/a>
– react-router-redux<\/a>
Pour vue.js, les packages similaires existent :  
– vuex-persist<\/a>
– vuex-router-sync<\/a> 
<\/p>\n\n\n\n
<\/h4>\n","protected":false},"excerpt":{"rendered":"
Le 30 mars 2018, apr\u00e8s une longue attente, la release d’iOS 11.3 sortait officiellement, avec le support des fonctionnalit\u00e9s PWA port\u00e9es sur les iphones et ipad.M\u00eame si cette annonce tr\u00e8s attendue \u00e9tait une tr\u00e8s bonne nouvelle, en y regardant de plus pr\u00e8s on s’est vite rendu compte que le support PWA \u00e9tait encore tr\u00e8s loin … <\/p>\n
Continuer la lecture  \u00ab\u00a0PWA : Quelques astuces pour que votre application PWA ressemble \u00e0 une application native  ?\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[51,48],"tags":[55,61,54,57,53],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/519"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=519"}],"version-history":[{"count":14,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/519\/revisions"}],"predecessor-version":[{"id":569,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/519\/revisions\/569"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=519"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}