Geolocalización con Ionic 4 y compatible con PWA

Hola mis amigos, el día de hoy vamos a crear una app de Geolocalización, esto nos ayudará a obtener las coordenadas de donde esta nuestro cliente para futuras implementaciones en diferentes escenarios, el día de hoy haremos una demo de geolocalización tanto que funcione para dispositivos, como para Web Browser.

Empecemos.

1.- Creamos el proyecto en Ionic 4 con la sentencia:

ionic start localizacion blank

Esperamos que se cree la carpeta, las dependencias, etc, etc vamos a tomar un café y regresamos, (Y si, es necesario tener Internet en tu PC).

2.- Entramos al directorio creado con cd localización.
3.- Instalamos el plug-in que va hacer la magia por nosotros, el Ionic 4 Geolocation plugin, usando el siguiente comando:

ionic cordova plugin add cordova-plugin-geolocation

3.1.- Esto va instalar algunas dependencias de Ionic que serán necesarias para que funcione el proyecto.

3.2.- Instalamos las dependecias con el siguiente comando:

npm install @ionic-native/geolocation

4.- Abrimos nuestro editor de Código, en mi caso sería el Visual Studio Code. Buscamos el archivo app.module.ts

5.- No te olvides de añadirlo a los Providers
6.- Ahora tendremos que invocarlo desde la página donde vamos a usarlo, en este caso como es una nueva aplicación, tendremos que ir a la carpeta home, y abrir el home.page.ts. Lo hacemos e esta manera:

import { Geolocation } from '@ionic-native/geolocation/ngx';

7.- Una vez importado tenemos que declararlo en el constructor, para poder utilizarlo en una función que crearemos más tarde.Lo hacemos así:

constructor(private geo:Geolocation) {}

8.- Definimos dos variables de tipo número, de la siguiente manera:

  lat:number;
  lng:number;

9.- Creamos la siguiente función, dentro del constructor.

this.geo.getCurrentPosition(
      {
        maximumAge: 1000, timeout: 5000,
        enableHighAccuracy: true
      }
    ).then((resp) => {
      alert(JSON.stringify(resp.coords));
      this.lat = resp.coords.latitude
      this.lng = resp.coords.longitude
    }, er => {
      alert('No se puede obtener la localización')
    }).catch((error) => {
      alert('Error al capturar la locaclización: - ' + JSON.stringify(error))
    });
  }

10.- Ahora vamos al home.page.html y creamos las etiquetas para mostrar la información, y quedaría de esta manera:

<ion-list>
    <ion-list-header>
      <ion-label>Información de Localización</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-label>
        Latitud
      </ion-label>
      <ion-badge slot="end">{{lat}}</ion-badge>
    </ion-item>
    <ion-item>
      <ion-label>
        longitud
      </ion-label>
      <ion-badge slot="end">{{lng}}</ion-badge>
    </ion-item>
    </ion-list>

11.- ahora si a probar lo que hicimos, de la siguiente manera: ionic serve.

12.- una vez que se levanta la app tendremos este resultado:

13.- Ahora la convertimos en PWA para ejecutar en el browser para ver si nos funciona 100%.
13.1.- Para eso añadimos el comando en la carpeta del proyecto:

ionic cordova platform add browser

13.2.- Esperamos que termine y haga lo suyo, a preparar una tacita de café

13.3.- Si quieres ejecutarlo en un android, deberías añadir el siguiente comando:

ionic cordova platform add android

14.- Para PWA añadimos:

ionic cordova build browser --prod

14.1.- Esperemos que cargue. Y a tomar otra taza de café, mm cuantas vamos?
15.- Una vez que termine todo el contenido de la carpeta www que esta dentro de platforms -> www a la carpeta que indique en tu servidor y a probar.

15.- Usa tu servidor local favorito yo voy a usar JBoss porque son los requisitos del ambiente de producción. Y este es el resultado.

PostData: si te salen errores, rarisimos mirate los archivos:

• index.html
• manifest.json

en el index,html asegúrate que la variable <base href="" /> debe estar tal como te la he puesto. Y en el archivo manifest.json estas variables: "start_url": "/",  "scope": "/", deben estar así de igualitas.

Saludos,