Cómo construir PWA usando Laravel: una guía paso a paso para UX mejorado

Las aplicaciones net progresivas (PWA) ayudan a hacer que los sitios net funcionen como aplicaciones móviles y proporcionen una experiencia sin problemas en diferentes dispositivos. Cuando combina PWA con Laravel, su sitio net puede verse y funcionar como una aplicación mientras mantiene todas las funciones regulares del sitio net.

Los estudios muestran que los PWA pueden mejorar el rendimiento del sitio en un 65%, con un tiempo de carga promedio de solo 2.75 segundos. También pueden aumentar la participación del usuario en un 70% y aumentar el tráfico del sitio net en un 66%. Con un PWA, los usuarios pueden instalar su sitio net en su pantalla de inicio, acceder a TI fuera de línea y recibir notificaciones push. Te guiaré a través de los pasos para construir PWA usando Laravel en esta guía.

Pasos para construir PWA usando Laravel

Con PWA en Laravel, puede hacer que su aplicación net funcione tanto en dispositivos móviles como en escritorio sin necesidad de escribir mucho código para diferentes plataformas. Veremos los pasos para construir PWA usando Laravel.

Paso 1: Configure su entorno de desarrollo

Antes de sumergirse en el código, asegúrese de tener un entorno de desarrollo adecuado configurado:

Instale Laravel: Si aún no ha instalado a Laravel, puede instalar usando el compositor. Abra la interfaz de su línea de comando y ejecute:

bash
composer world require laravel/installer

Crea un nuevo proyecto de Laravel: Cree un nuevo proyecto de Laravel ejecutando:

bash
laravel new pwa-app

Navegue a su directorio de proyecto: Cambiar en el directorio de su proyecto:

bash
cd pwa-app

Paso 2: Instale el paquete Laravel PWA

Para transformar su aplicación Laravel en un PWA, deberá instalar un paquete dedicado. Uno de los paquetes más populares es Ladumor/Laravel-Pwa. Para instalarlo, ejecute:

bash
composer require ladumor/laravel-pwa

Después de la instalación, si está utilizando Laravel Versión 6 o posterior, puede omitir la adición del proveedor de servicios y la fachada manualmente, ya que son automáticas. Si está en una versión anterior, agregue las siguientes líneas a su config/app.php:

En la matriz de proveedores:

php
LadumorLaravelPwaPWAServiceProvider::class,

En la matriz de alias:

php
'LaravelPwa' => LadumorLaravelPwaLaravelPwa::class,

Paso 3: Publicar archivos de configuración

A continuación, publique los archivos de configuración necesarios para su configuración de PWA ejecutando:

bash
php artisan laravel-pwa:publish

Este comando creará varios archivos en su directorio público, incluidos Manifest.json, Service-Employee.js y una página fuera de línea.

Paso 4: Configure su archivo manifiesto

El archivo manifiesto es essential para definir cómo aparece su PWA en los dispositivos de los usuarios. Abra el archivo Manifest.json publicado ubicado en el directorio público y lo personalice con los detalles de su aplicación, como nombre, short_name, start_url, sort de pantalla e iconos.

Ejemplo de manifest.json:

json
{
  "identify": "My PWA App",
  "short_name": "PWA",
  "start_url": "https://techplanet.at the moment/",
  "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"
    }
  ]
}

Paso 5: Implementar trabajador de servicio

El trabajador de servicio está en el corazón de cualquier PWA. Habilita la funcionalidad fuera de línea y el almacenamiento en caché de los activos. El paquete genera automáticamente un archivo básico de trabajadores de servicio. Puede personalizarlo para implementar estrategias de almacenamiento en caché específicas o características de sincronización de fondo.

Por ejemplo, es posible que desee almacenar en caché ciertos activos para uso fuera de línea:

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'
            ]);
        })
    );
});

Paso 6: Actualice sus vistas de cuchilla

Para vincular todo, debe incluir referencias a su manifiesto y trabajador de servicio en su archivo de diseño de cuchilla principal. Agregue las siguientes líneas dentro de la sección :

xml

Paso 7: Prueba tu PWA

• Para ver tu PWA en acción:
• Inicie su servidor de desarrollo native:

bash
php artisan serve

• Abra su navegador y navegue a http: // localhost: 8000.
• Use Chrome DevTools (F12) para inspeccionar la pestaña de la aplicación donde puede ver a los trabajadores de servicios y manifestar detalles.
• Pruebe la funcionalidad fuera de línea sin desconectarse en DevTools y actualizando la página.

Conclusión

Crear una aplicación net progresiva (PWA) con Laravel es fácil porque Laravel tiene muchas herramientas y bibliotecas útiles. Esta guía paso a paso para construir PWA usando Laravel le mostrará cómo construir un PWA que funcione fuera de línea, envíe notificaciones push y parece una aplicación. Los PWA se están volviendo más populares y el uso de sus características puede beneficiar enormemente tanto a sus usuarios como a su negocio. La mayoría de las empresas Contratar desarrolladores de Laravel Para construir PWA y aprovechar al máximo las tecnologías net y móviles.