PWA et Django #Installer une PWA en application native

Ce tutoriel montre comment activer l'installation native de votre Progressive Web App (PWA) construite avec Django. C'est étonnamment simple et très bénéfique pour l'expérience utilisateur.

Activation de l'installation native

Un petit ajout de code invite les utilisateurs à installer votre PWA en tant qu'application native.

<code class="language-javascript">let beforeInstallPromptEvent = null;
let installed = false;

async function installPWA() {
   if (beforeInstallPromptEvent === null || installed) {
       return;
   }

   try {
       beforeInstallPromptEvent.prompt();

       const { outcome } = await beforeInstallPromptEvent.userChoice;
       if (outcome === 'accepted') {
           console.log("App install dialog accepted!");
           beforeInstallPromptEvent = null;
           installed = true;
       }

   } catch(e) {
       console.error(e);
   }
}</code>

Les écouteurs d'événements affinent le processus d'installation :

<code class="language-javascript">window.addEventListener('beforeinstallprompt', (e) => {
   beforeInstallPromptEvent = e;
});

window.addEventListener('appinstalled', () => {
   installed = true;
});</code>

Un bouton « Installer » déclenche l'invite d'installation :

Le navigateur affiche une boîte de dialogue d'installation :

Une fois acceptée, la PWA est enregistrée avec sa propre icône de lanceur :

Fonctionner en tant qu'application autonome

Après l'installation, la PWA se lance dans sa propre fenêtre, en tirant parti du style défini par le manifeste pour une sensation plus native :

N'oubliez pas que le manifeste PWA vous permet de personnaliser les icônes, le comportement, les couleurs, etc. En savoir plus :

• https://www.php.cn/link/076db4058c59c7390c4ceec61646ea33
• https://www.php.cn/link/a6143dafe10eb30e48832f3a092674e0

Sujets futurs

Les prochains articles couvriront :

• Architecture logicielle
• Environnements de programmation
• Système d'exploitation Linux
• Et plus encore !

Suggérez des sujets que vous aimeriez aborder ! J'ai toujours envie d'explorer de nouveaux sujets.

À propos de l'auteur

Je m'appelle Andrés, un développeur full-stack à Palma, affinant constamment mes compétences en codage. Je suis également un auteur fantastique avec quatre romans publiés. N'hésitez pas à vous connecter !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!