{"id":7545,"date":"2020-10-25T14:06:06","date_gmt":"2020-10-25T13:06:06","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7545"},"modified":"2020-10-26T18:42:22","modified_gmt":"2020-10-26T17:42:22","slug":"pwa-ajouter-raccourcis-application-longtouch","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/pwa-ajouter-raccourcis-application-longtouch","title":{"rendered":"PWA – Ajouter des raccourcis d’application"},"content":{"rendered":"

Il vous est certainement d\u00e9j\u00e0 arriv\u00e9 d’utiliser ces raccourcis disponibles au \u00ab\u00a0force touch<\/em><\/span>\u00a0\u00bb ou \u00ab\u00a0long touch<\/em><\/span>\u00a0\u00bb sur vos ic\u00f4nes d’application mobile ? C’est une mani\u00e8re d’acc\u00e9der \u00e0 des raccourcis \u00e0 l’int\u00e9rieur de votre application afin d’acc\u00e9der rapidement \u00e0 une section, ou entamer directement une action plus pr\u00e9cise. Il est d\u00e9sormais possible de le faire pour vos\u00a0Progressive Web App<\/em><\/span> (PWA).<\/p>\n

<\/p>\n

Attention !<\/strong> \u00c0 l’heure d’\u00e9criture de ces lignes, cette fonctionnalit\u00e9 n’est pas encore fonctionnelle sur tous les navigateurs. Seule la version 86+ de Chrome Android, et Edge semble embarquer cette fonctionnalit\u00e9.<\/p>\n

\u00c0 quoi ressemblent les PWA Shortcuts<\/em><\/span> ?<\/h2>\n

Les PWA Shortcuts<\/em><\/span>, ou raccourcis d’application web progressive, sont un bon moyen de permettre un acc\u00e8s rapide \u00e0 quelques fonctions bien d\u00e9finies de votre Progressive Web App<\/em><\/span>.
\nJ’ai travaill\u00e9 dessus encore r\u00e9cemment pour un petit site web d’un plugin WordPress de boutons de partage<\/a> afin d’effectuer quelques tests. J’y ai impl\u00e9ment\u00e9 2 raccourcis dont voici l’aspect en image et vid\u00e9o.<\/p>\n

\"\" \"\"<\/p>\n

Voici deux vid\u00e9os des PWA Shortcuts<\/em><\/span> en action, l’une lorsque vous actionnez un des raccourcis, l’autre qui vous montre que des\u00a0PWA Shortcuts<\/em><\/span> fonctionnent comme les versions natives des applications : vous pouvez les mettre en page d’accueil de votre t\u00e9l\u00e9phone, et elles peuvent m\u00eame poss\u00e9der leurs propres ic\u00f4nes.<\/p>\n

https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/10\/pwa-open-shortcut.mp4<\/a><\/video><\/div>\n
https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/10\/pwa-shortcuts-on-home.mp4<\/a><\/video><\/div>\n

Comment cr\u00e9er un\u00a0PWA Shortcut<\/em><\/span> ?<\/h2>\n

La cr\u00e9ation d’un raccourci pour une Progressive Web App se fait via le manifest.json (ou site.webmanifest) qui d\u00e9clare d\u00e9j\u00e0 plusieurs \u00e9l\u00e9ments essentiels pour votre application web, comme par exemple : le nom de l’application, sa couleur de th\u00e8mes, des screenshots, la notion de start_url<\/code>, etc.<\/p>\n

Webmanifest pour cr\u00e9er un raccourci PWA<\/h3>\n

Dans cette liste, il faut donc ajouter la notion de shortcuts<\/em><\/span>, si vous en ressentez le besoin pour vos utilisateur\u00b7rice\u00b7s, bien entendu.<\/p>\n

{    "name": "Nobs - Share Buttons",    "short_name": "Nobs",    "icons": [        {            "src": "\/android-chrome-192x192.png",            "sizes": "192x192",            "type": "image\/png"        },        {            "src": "\/android-chrome-384x384.png",            "sizes": "384x384",            "type": "image\/png"        }    ],    "theme_color": "#067FA5",    "background_color": "#ffffff",    "display": "standalone",    "start_url": "https:\/\/sharebuttons.social\/",    "url" : "https:\/\/sharebuttons.social",    "lang": "English",    "screenshots" : [        {            "src": "\/assets\/img\/screenshot-1.jpg",            "sizes": "1280x800",            "type": "image\/jpg"        },        {            "src": "\/assets\/img\/screenshot-2.jpg",            "sizes": "1280x800",            "type": "image\/jpg"        }    ],    "categories" : [        "navigation",        "lifestyle",        "personalization",        "productivity",        "social",        "utilities"    ],    "shortcuts": [        {            "name": "Features",             "description": "A list of plugin features.",            "url": "\/features.html",            "icons": [                {                    "src": "\/assets\/img\/picto-feat.png",                    "type": "image\/png",                    "purpose": "any"                }            ]        },        {            "name": "Pricing",             "description": "The plugin offers",            "url": "\/free-plugin.html",            "icons": [                {                    "src": "\/assets\/img\/picto-price.png",                    "type": "image\/png",                    "purpose": "any"                }            ]        }    ] }<\/code><\/pre> 
 Nobs - Social Share Buttons .webmanifest file<\/span> <\/div> <\/div>\n
Comme vous pouvez le voir sur les lignes de code surlign\u00e9es dans ce fichier extrait du site dont je vous parlais en d\u00e9but d’article, il s’agit d’un tableau au format JSON vous permettant de lister les raccourcis que vous souhaitez d\u00e9clarer. Vous y retrouvez, pour chaque item<\/a> :<\/p>\n