Mettre Une Application Sur L'écran D'accueil

Ajouter à l'écran d'accueil

Ajouter à l'écran d'accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d'ajouter facilement et rapidement united nations raccourci à leur écran d'accueil, représentant leur application Spider web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d'en tirer parti.

Pourquoi A2HS?

On pense que A2HS fait partie de la philosophie des applications Web progressives : offrir aux applications Web les mêmes avantages en matière d'expérience utilisateur que les applications natives. Cela fait partie du simple geste d'accéder à une application en appuyant sur son icône sur votre écran d'accueil, puis en l'affichant proprement dans sa propre fenêtre. A2HS rend cela possible.

Quels navigateurs prennent en charge A2HS?

A2HS est pris en accuse par Mobile Chrome / Android Webview depuis la version 31, Opera pour Android depuis la version 32 et Firefox pour Android depuis la version 58 .

Nous avons écrit un exemple de site Web très simple ( voir la démo, et le code source ) qui ne fait pas thou chose, mais qui a été développé avec le lawmaking nécessaire pour pouvoir l'ajouter à united nations écran d'accueil. en tant qu'agent de service enregistré pour lui permettre d'être utilisé en mode hors connectedness. L'exemple montre une série d'images de renard.

Si vous avez Firefox pour Android, utilisez-le pour accéder à notre démonstration à https://mdn.github.io/pwa-examples/a2hs/ . Vous verrez des images de renard, mais plus important encore, vous verrez une icône "accueil" avec une icône plus (+) à l'intérieur: il s'agit de l'icône "Ajouter à 50'écran d'accueil" affichée pour tout site doté de A2HS.

Appuyez sur cette icône cascade afficher une bannière de confirmation. Une pression sur le gros bouton + AJOUTER À L'ÉCRAN D'ACCUEIL termine 50'activity et ajoute 50'application à fifty'écran d'accueil. (Dans Android eight et versions ultérieures, une boîte de dialogue d'autorisation au niveau du système "Ajouter à l'écran d'accueil" s'affiche en premier.)

Si vous avez Mobile Chrome disponible, fifty'expérience est légèrement différente. lors du chargement du site, une bannière d'installation apparaît vous demandant si vous souhaitez ajouter cette application à votre écran d'accueil.

Annotation : Cascade en savoir plus sur les bannières d'installation de Chrome, consultez fifty'commodity Web Installer des bannières Web App .

Si vous choisissez de ne pas 50'ajouter à votre écran d'accueil à ce stade, vous pourrez le faire ultérieurement à l'aide de l'icône Ajouter à l'écran d'accueil dans le menu principal de Chrome.

Quel que soit le navigateur que vous utilisez, lorsque vous choisissez d'ajouter l'application à votre écran d'accueil, celle-ci s'poster avec un titre abrégé, de la même manière que les applications natives.

Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus fifty'interface utilisateur du navigateur.

Que faut-il pour utiliser A2HS?

Pour permettre à votre awarding d'être ajoutée à united nations écran d'accueil, vous devez disposer des éléments suivants:

United nations site en HTTPS - Net est de plus en plus plus sécurisée et de nombreuses technologies modernes (A2HS incluses) ne fonctionneront que dans des contextes sécurisés.
Avoir un fichier "manifest" contenant les champs appropriés, lié à partir de 50'en-tête HTML.
Avoir une icône disponible pour fifty'affichage sur 50'écran d'accueil.
Chrome exige en outre que l'application ait un agent de service enregistré (par exemple, cascade pouvoir fonctionner en fashion hors connexion).

Manifest

Le "manifest" est un fichier écrit au format JSON standard et doit être placé quelque part dans le répertoire de votre application (il est préférable que le fichier.webmanifest soit à la racine du site) avec le nom fichier.webmanifest (nous avons choisi manifest.webmanifest ). Il contient plusieurs champs qui définissent certaines informations sur l'awarding Web et sur son comportement. .

Annotation : Fifty'extension .webmanifest est spécifiée dans la section Enregistrement du blazon de fichier, mais les navigateurs prennent aussi en accuse les manifest avec d'autres extensions appropriées, par exemple .json .

Les champs nécessaires pour A2HS sont les suivants:

background_color : spécifie une couleur d'arrière-plan à utiliser dans certains contextes d'application. Le plus pertinent pour A2HS est l'écran de démarrage qui s'affiche lorsque l'icône de l'awarding sur l'écran d'accueil est activée et qu'elle commence à se charger (elle ne due south'affiche actuellement que lorsque des applications ont été ajoutées à l'écran d'accueil par Chrome).
display : Spécifie comment l'application doit être affichée. Cascade que cela ressemble à une application distincte (et pas seulement à une page Web), vous devez choisir une valeur telle que fullscreen (aucune interface utilisateur n'est affichée) ou standalone (très similaire, mais des éléments d'interface utilisateur au niveau du système tels que la barre d'état. pourrait être visible).
icons : spécifie les icônes à utiliser par le navigateur pour représenter l'application à différents endroits (par exemple sur le sélecteur de tâches ou, plus important encore, sur l'écran d'accueil). Nous due north'en avons inclus qu'un dans notre démo.
name et short_name : Ces champs fournissent un nom d'application à afficher lors de la représentation de 50'awarding à différents endroits. proper name fournit le nom complet de l'application et short_name fournit un nom abrégé à utiliser lorsque fifty'espace disponible est insuffisant pour afficher le nom complet. Nous vous conseillons de fournir les deux si le nom de votre application est long.
start_url : fournit united nations chemin d'accès de l'application. Notez qu'il doit south'agir d'une URL pointant vers l'index du site, par rapport à fifty'URL du "manifest". Sachez également que Chrome en a besoin avant d'afficher la bannière d'installation, tandis que Firefox ne l'exige pas pour afficher l'icône.

Le fichier "manifest" de notre exemple ressemble à ceci:

                                      {                    "background_color"                    :                    "royal"                    ,                    "description"                    :                    "Shows random play tricks pictures. Hey, at least it isn't cats."                    ,                    "brandish"                    :                    "fullscreen"                    ,                    "icons"                    :                    [                    {                    "src"                    :                    "icon/fox-icon.png"                    ,                    "sizes"                    :                    "192x192"                    ,                    "blazon"                    :                    "prototype/png"                    }                    ]                    ,                    "name"                    :                    "Awesome flim-flam pictures"                    ,                    "short_name"                    :                    "Foxes"                    ,                    "start_url"                    :                    "/pwa-examples/a2hs/alphabetize.html"                    }

Icône

Comme indiqué dans le "manifest" ci-dessus, nous incluons une icône de 192 x 192 px. Vous pouvez inclure plus de tailles si vous le souhaitez. Android choisira la taille la plus appropriée pour chaque cas d'utilisation différent. Vous pouvez également décider d'inclure différents types d'icônes afin que les appareils puissent utiliser le meilleur qu'ils puissent (par exemple, Chrome prend déjà en accuse le format WebP).

Notez que le membre de blazon dans l'objet de chaque icône spécifie le type MIME de 50'icône, afin que le navigateur puisse rapidement identifier le type de 50'icône, puis l'ignorer et passer à une autre icône s'il ne le prend pas en accuse.

Pour ce qui est de la conception de 50'icône, vous devez suivre les mêmes pratiques que vous suivriez pour n'importe quelle icône Android (voir les directives de formulation d'icône Android ).

Lier le code HTML au "manifest"

Pour terminer la configuration de votre "manifest", vous devez le référencer à partir du code HTML de la page d'accueil de votre awarding:

                  < link rel = " manifest " href = "

Les navigateurs prenant en accuse A2HS sauront où chercher votre manifeste une fois celui-ci en place.

Qu'est-ce que A2HS ne vous donne pas?

N'oubliez pas que lorsque vous ajoutez une application à votre écran d'accueil, cela la rend simplement facilement attainable. Elle ne télécharge pas les ressources et les données de l'application sur votre appareil et ne la rend pas disponible hors connexion, ou quelque chose du genre. Pour que votre application fonctionne en mode hors connexion, vous devez utiliser l' API Service Worker pour gérer le stockage hors connexion et, si nécessaire, le stockage Spider web ou IndexedDB pour stocker ses données.

Dans notre exemple d'application, nous venons d'utiliser un amanuensis de service pour stocker tous les fichiers nécessaires. Le fichier alphabetize.js est inscrit sur le site avec le bloc de code last dans le fichier index.js . Nous mettons ensuite en cache toutes les ressources du site à l'aide de 50' API de cache et les servons à partir du cache plutôt que du réseau à l'aide du code contenu dans le fichier sw.js.

A2HS sur le bureau

Bien que conçu à l'origine pour améliorer 50'expérience utilisateur sur les systèmes d'exploitation mobiles, il existe également une technique cascade rendre les PWA installables sur les plates-formes de agency.

Note : au moment de la rédaction de ce document, les fonctionnalités décrites ci-dessous n'étaient prises en accuse que par les versions les plus récentes de Chrome: par défaut sous Windows et derrière l'indicateur #enable-desktop-pwas sous macOS.

Ajout d'un bouton d'installation

Pour rendre notre PWA installable sur le bureau, nous avons d'abord ajouté united nations bouton à notre document cascade permettre aux utilisateurs de procéder à l'installation. Ce bouton n'est pas automatiquement disponible sur les applications de bureau et l'installation doit être déclenchée par un geste de l'utilisateur:

                                                                                    <push                      class                                              =                        "add-button"                                            >                    Add to home screen                                              </button                      >

Nous lui avons ensuite donné united nations style simple:

                                      .add-push button                    {                    position                    :                    absolute;                    pinnacle                    :                    1px;                    left                    :                    1px;                    }

JavaScript cascade gérer l'installation

Au bas de notre fichier index.js , nous avons ajouté du JavaScript cascade gérer l'installation. Tout d'abord, nous déclarons une variable deferredPrompt (que nous expliquerons plus tard), obtenons une référence à notre bouton d'installation et le configurons cascade display: none:

                                      allow                    deferredPrompt;                    const                    addBtn                    =                    certificate.                    querySelector                    (                    '.add together-push button'                    )                    ;                    addBtn.style.brandish                    =                    'none'                    ;

Nous masquons le bouton initialement car le PWA ne sera pas disponible cascade 50'installation tant qu'il ne respectera pas les critères A2HS. Lorsque cela se produit, les navigateurs prenant en charge déclenchent un événement beforeinstallprompt . Nous pouvons ensuite utiliser un gestionnaire comme celui ci-dessous pour gérer l'installation:

                  window.                    addEventListener                    (                    'beforeinstallprompt'                    ,                    (                    eastward                    )                    =>                    {                    // Prevent Chrome 67 and before from automatically showing the prompt                    e.                    preventDefault                    (                    )                    ;                    // Stash the event so it can exist triggered after.                    deferredPrompt                    =                    e;                    // Update UI to notify the user they tin can add together to home screen                    addBtn.style.display                    =                    'block'                    ;                    addBtn.                    addEventListener                    (                    'click'                    ,                    (                    e                    )                    =>                    {                    // hide our user interface that shows our A2HS button                    addBtn.manner.brandish                    =                    'none'                    ;                    // Bear witness the prompt                    deferredPrompt.                    prompt                    (                    )                    ;                    // Await for the user to respond to the prompt                    deferredPrompt.userChoice.                    then                    (                    (                    choiceResult                    )                    =>                    {                    if                    (choiceResult.outcome                    ===                    'accepted'                    )                    {                    console.                    log                    (                    'User accustomed the A2HS prompt'                    )                    ;                    }                    else                    {                    console.                    log                    (                    'User dismissed the A2HS prompt'                    )                    ;                    }                    deferredPrompt                    =                    goose egg                    ;                    }                    )                    ;                    }                    )                    ;                    }                    )                    ;

Ici il faut:

Appeler Event.preventDefault() cascade empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68).
Stocker l'objet événement dans la variable deferredPrompt afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle.
Configurer le bouton display: block afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer.
Définir un gestionnaire de click pour le bouton.

Le gestionnaire de clics contient les étapes suivantes:

Cacher à nouveau le bouton avec brandish: none - il n'est plus nécessaire une fois l'application installée.
Utilisez la méthode prompt() disponible sur l'objet d'événement beforeinstallprompt (stocké dans deferredPrompt ) pour déclencher 50'affichage de l'invite d'installation.
Répondez à l'interaction de l'utilisateur avec l'invite à l'aide de la propriété userChoice , de nouveau disponible sur l'objet d'événement beforeinstallprompt .
Définissez deferredPrompt sur null auto il n'est plus nécessaire.

Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît.

Si 50'utilisateur sélectionne Installer , l'application est installée (disponible en tant qu'awarding de agency autonome) et le bouton Installer ne s'affiche plus (l'événement onbeforeinstallprompt ne se déclenche plus si l'awarding est déjà installée). Lorsque vous ouvrez fifty'awarding, celle-ci apparaît dans sa propre fenêtre:

Si l'utilisateur sélectionne Annuler , l'état de l'application revient à ce qu'il était avant le clic sur le bouton.

Note : Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.