Remark construire des PWA à l’aide de Laravel: un information étape par étape pour UX amélioré

Les functions Net progressives (PWAS) aident à faire fonctionner les websites Net comme les functions mobiles et offrent une expérience fluide sur différents appareils. Lorsque vous combinez des PWA avec Laravel, votre website Net peut ressembler et fonctionner comme une utility tout en conservant toutes les fonctionnalités régulières du website Net.

Des études montrent que les PWA peuvent améliorer les performances du website de 65%, avec un temps de chargement moyen de seulement 2,75 secondes. Ils peuvent également augmenter l’engagement des utilisateurs de 70% et augmenter le trafic du website Net de 66%. Avec un PWA, les utilisateurs peuvent installer votre website Net sur leur écran d’accueil, y accéder hors ligne et recevoir des notifications push. Je vous guiderai à travers les étapes pour construire des PWA en utilisant Laravel dans ce information.

Étapes pour construire des PWA en utilisant Laravel

Avec PWAS dans Laravel, vous pouvez faire fonctionner votre utility Net sur le cellular et le bureau sans avoir besoin d’écrire beaucoup de code pour différentes plates-formes. Nous verrons les étapes pour construire des PWA en utilisant Laravel.

Étape 1: Configurez votre environnement de développement

Avant de plonger dans le code, assurez-vous que vous avez un environnement de développement approprié.

Installer Laravel: Si vous avez encore installé Laravel, vous pouvez installer à l’aide de composer. Ouvrez votre interface de ligne de commande et exécutez:

bash
composer international require laravel/installer

Créer un nouveau projet Laravel: Créez un nouveau projet Laravel en fonctionnant:

bash
laravel new pwa-app

Accédez à votre répertoire de projet: Changez dans votre répertoire de projet:

bash
cd pwa-app

Étape 2: Installez le pack Laravel PWA

Pour transformer votre utility Laravel en PWA, vous devrez installer un package deal dédié. L’un des packages les plus populaires est Ladumor / Laravel-Pwa. Pour l’installer, exécutez:

bash
composer require ladumor/laravel-pwa

Après l’set up, si vous utilisez Laravel model 6 ou model ultérieure, vous pouvez sauter manuellement le fournisseur de providers et la façade automotive ils sont automatiquement découverts. Si vous êtes sur une model antérieure, ajoutez les lignes suivantes à votre config / app.php:

Dans le tableau des fournisseurs:

php
LadumorLaravelPwaPWAServiceProvider::class,

Dans le tableau des alias:

php
'LaravelPwa' => LadumorLaravelPwaLaravelPwa::class,

Étape 3: publier des fichiers de configuration

Ensuite, publiez les fichiers de configuration nécessaires à votre configuration PWA en exécutant:

bash
php artisan laravel-pwa:publish

Cette commande créera plusieurs fichiers dans votre répertoire public, y compris Manifest.json, Service-Employee.js et une web page hors ligne.

Étape 4: Configurez votre fichier manifeste

Le fichier manifeste est essential pour définir remark votre PWA apparaît sur les appareils des utilisateurs. Ouvrez le fichier manifeste.json publié situé dans le répertoire public et personnalisez-le avec les détails de votre utility tels que le nom, Short_name, Start_Url, le kind d’affichage et les icônes.

Exemple de manifeste.json:

json
{
  "title": "My PWA App",
  "short_name": "PWA",
  "start_url": "https://techplanet.as we speak/",
  "show": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Étape 5: Mettre en œuvre un travailleur des providers

Le travailleur des providers est au cœur de n’importe quel PWA. Il permet une fonctionnalité hors ligne et une mise en cache des actifs. Le package deal génère automatiquement un fichier de travailleurs de service de base. Vous pouvez le personnaliser pour implémenter des stratégies de mise en cache spécifiques ou des fonctionnalités de synchronisation de fond.

Par exemple, vous voudrez peut-être mettre en cache certains actifs pour une utilisation hors ligne:

javascript
self.addEventListener('set up', perform(occasion) {
    occasion.waitUntil(
        caches.open('my-cache').then(perform(cache) {
            return cache.addAll([
                "https://techplanet.today/",
                '/css/app.css',
                '/js/app.js',
                '/offline.html'
            ]);
        })
    );
});

Étape 6: Mettez à jour les vues de votre lame

Pour tout relier, vous devez inclure des références à votre manifeste et à votre travailleur de service dans votre fichier de mise en web page principal. Ajoutez les lignes suivantes dans la part :

xml

Étape 7: Testez votre PWA

• Pour voir votre PWA en motion:
• Démarrez votre serveur de développement native:

bash
php artisan serve

• Ouvrez votre navigateur et accédez à http: // localhost: 8000.
• Utilisez Chrome Devtools (F12) pour inspecter l’onglet Utility où vous pouvez voir les travailleurs du service et manifester les détails.
• Testez les fonctionnalités hors ligne en déplaçant hors ligne dans Devtools et en rafraîchissant la web page.

Conclusion

La création d’une utility Net progressive (PWA) avec Laravel est facile automotive Laravel a de nombreux outils et bibliothèques utiles. Ce information étape par étape pour construire des PWA utilisant Laravel vous montrera remark construire un PWA qui fonctionne hors ligne, envoie des notifications push et ressemble à une utility. Les PWA deviennent de plus en plus populaires et l’utilisation de leurs fonctionnalités peut grandement bénéficier à vos utilisateurs et à votre entreprise. La plupart des entreprises embaucher les développeurs de Laravel Pour construire des PWA et tirer le meilleur parti des applied sciences Net et mobiles.