Las aplicaciones web progresivas (progressive web app / PWA) son aplicaciones web que adquieren comportamientos muy similares a las aplicaciones móviles nativas, entre las principales características estan: La capacidad que pueden ser instaladas desde el navegador, incluso es posible publicarlas en la Google Play Store, pueden trabajar sin conexión y tienen notificaciones push. Esta tecnología fue creada por Google e incluso Microsoft ha decidido dar soporte en su tienda de aplicaciones para Windows.

El objetivo de este artículo es que podamos convertir una aplicación web con Laravel, común y corriente, en una aplicación web progresiva. Si quieres saber mucho más de las PWA, este enlace te será de mucha ayuda: Documentación oficial.



Requisitos

En realidad ninguno, puedes convertir una aplicación existente o una nueva.


Paso a paso

Sigue las instrucciones a continuación y en unos minutos tendrás una aplicación web progresiva.


Desplegar servidor

Desplieguen el servidor de desarrollo de Laravel, para este procedimiento eviten desplegar el servidor con NPM y BrowserSync.

php artisan serve


Instalar paquete de Composer

Para alcanzar el objetivo necesitaremos instalar en la aplicación de Laravel, un paquete que hará la mayor parte del trabajo: Laravel PWA.

composer require silviolleite/laravelpwa

Posterior a la instalación, es necesario publicar los assets y el archivo de configuración del paquete:

php artisan vendor:publish --provider="LaravelPWA\Providers\LaravelPWAServiceProvider"

En la carpeta config encontraremos el archivo laravelpwa.php y haremos la modificaciones necesarias como el nombre, corto y largo, que la aplicación tendrá, también los colores que apliquen de acuerdo a la paleta de colores del diseño. En mi caso, el archivo quedó así:

<?php
	
return [
    'name' => 'Omar Barbosa',
	'manifest' => [
	    'name' => env('APP_NAME', 'Omar Barbosa'),
	    'short_name' => 'Barbosa',
	    'start_url' => '/',
	    'background_color' => '#00be9c',
	    'theme_color' => '#1c3c50',
	    'display' => 'standalone',
	    'orientation'=> 'any',
	    'icons' => [
	        '72x72' => '/images/icons/icon-72x72.png',
	        '96x96' => '/images/icons/icon-96x96.png',
	        '128x128' => '/images/icons/icon-128x128.png',
	        '144x144' => '/images/icons/icon-144x144.png',
	        '152x152' => '/images/icons/icon-152x152.png',
	        '192x192' => '/images/icons/icon-192x192.png',
	        '384x384' => '/images/icons/icon-384x384.png',
	        '512x512' => '/images/icons/icon-512x512.png'
	     ],
	     'splash' => [
	        '640x1136' => '/images/icons/splash-640x1136.png',
	        '750x1334' => '/images/icons/splash-750x1334.png',
	        '828x1792' => '/images/icons/splash-828x1792.png',
	        '1125x2436' => '/images/icons/splash-1125x2436.png',
	        '1242x2208' => '/images/icons/splash-1242x2208.png',
	        '1242x2688' => '/images/icons/splash-1242x2688.png',
	        '1536x2048' => '/images/icons/splash-1536x2048.png',
	        '1668x2224' => '/images/icons/splash-1668x2224.png',
	        '1668x2388' => '/images/icons/splash-1668x2388.png',
	        '2048x2732' => '/images/icons/splash-2048x2732.png',
	        ],
	    'custom' => []
    ]
];


Reemplazo de imágenes

En el archivo de configuración anterior hay dos array que relacionan las imágenes (iconos, splash) que requiere toda aplicación web progresiva para su normal funcionamiento; debes reemplazarlas con tus iconos y personalizar los splash, los cuales se verán de primera mano mientras se carga la aplicación. Estas imágenes fueron publicadas en la carpeta pública, en la ruta public/images/icons.


Incluir directiva de Blade

Para que los assets estén disponibles en el navegador, debemos incluir la directiva @laravelPWA de Blade en el layout, el cual es la vista padre. Es importante que sea antes de cerrar el head.

<html>
<head>
    <title>Aplicación</title>
    ...
    @laravelPWA
</head>
<body>
    ...
    @yield('content')
    ...
</body>
</html>


Ruta Offline

Finalmente debemos crear la ruta /offline que responderá con una vista predeterminada en casos de fallas en la conexión de red, para ello, modifica el archivos de rutas ubicado en routes/web.php, y agrega el siguiente contenido:

Route::get('/offline', function () {    
    return view('modules/laravelpwa/offline');
});


Vista de la ruta Offline

Cuando publicamos los assets con el comando vendor:publish, fue publicada una vista de Blade y está ubicada en la carpeta de vistas /modules/laravelpwa/offline.blade.php, deberás personalizarla y esta debe renderizar en el layout (vista padre), en la cual pusimos la directiva @laravelPWA.

@extends('layouts.app')

@section('content')

    <h1>Personaliza este contenido</h1>

@endsection


Nota final

Si estás desplegando el servidor de desarrollo con NPM y BrowserSync, la PWA no funcionará en desarrollo, debido a que BrowserSync usa un virtual host (ejemplo: myapp.local), así el manifiesto registra el virtual host mientras que el service worker registra una URL diferente, en este caso localhost:3000, por lo cual no mostrará la opción de instalación en el navegador.

No olviden compartir, gracias.

Omar Barbosa
Computer engineer, web developer with Python, PHP and Javacript
Share

Share this article in the social networks

Location

Bucaramanga - Santader
Colombia

Social networks

About

Computer engineer, web developer with Python, PHP and Javacript .