9.2.Mi primera PWA

Vamos a crear nuestra primer PWA a partir del visor globe que hemos hecho en el punto 3.2

Paso 1- Creamos el archivo "pwa.html" dentro de "/geoweb"

Copiamos el código del archivo "mapbox-global.html"

<html lang="es">
  <head>
  <title>visor global -pwa</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="autor"/>
    <meta name="description" content="descripción página">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>

    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
  <style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
  }
  </style>
  <script>
var map;  // tambien const map;
  function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/satellite-streets-v11',
                center: [0, 0],
                zoom: 2.3,
                projection:'globe',
                attributionControl: false
            });
        map.addControl(new mapboxgl.AttributionControl({compact: true}));
        map.addControl(new mapboxgl.NavigationControl());
        map.on('load', () => {
            map.setFog({}); 
        });


                map.addControl(
                    new MapboxGeocoder({
                    accessToken: mapboxgl.accessToken,
                    mapboxgl: mapboxgl,
                    collapsed:true
                    })
                 );

        }
  </script>
  </head>
  <body onLoad="init()">
  <div id="map"></div>
  </body>
  </html>

Paso 2- Creamos el archivo "manifest-pwa.json" dentro de "/geoweb"

Dentro de /geoweb al mismo nivel que los archivos *.html !!

{
    "name": "Mi primera PWA",
    "short_name": "Visor Global",
    "theme_color": "#2196f3",
    "background_color": "#2196f3",
    "display": "standalone",
    "scope": "/geoweb/",
    "orientation":"any",
    "start_url": "/geoweb/pwa.html",
    "icons": [

      {
        "src": "images/capture_128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, 
      {
        "src": "images/capture_256.png",
        "sizes": "256x256",
        "type": "image/png"
      },
      {
        "src": "images/capture_512.png",
        "sizes": "512x512",
        "type": "image/png"  
      }
    ] 
  }

También podemos utilzar esta web para generar archivos manifest

https://app-manifest.firebaseapp.com/

Opciones de un manifest

https://developer.mozilla.org/en-US/docs/Web/Manifest

Paso 3- Creamos el archivo serviceworker "sw.js" dentro del directorio "/geoweb"

Dentro de /geoweb al mismo nivel que los archivos *.html !!

Este archivo solo hace falta crearlo una vez y nos servirá siempre

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

const CACHE = "pwabuilder-page";

const offlineFallbackPage = "offline.html";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

self.addEventListener('install', async (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => cache.add(offlineFallbackPage))
  );
});

if (workbox.navigationPreload.isSupported()) {
  workbox.navigationPreload.enable();
}

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const preloadResp = await event.preloadResponse;

        if (preloadResp) {
          return preloadResp;
        }

        const networkResp = await fetch(event.request);
        return networkResp;
      } catch (error) {

        const cache = await caches.open(CACHE);
        const cachedResp = await cache.match(offlineFallbackPage);
        return cachedResp;
      }
    })());
  }
});

Paso 4- Creamos el archivo "offline.html" dentro del directorio "/geoweb"

Dentro de /geoweb al mismo nivel que los archivos *.html !!

Este archivo solo hace falta crearlo una vez y nos servirá siempre

Es un archivo html vacio dón el service worker creará un "copia" offline de nuestro visor

<html>
 <head>
 <head>
 <body>
 <body>            
<html>

Paso 5- Añadimos manifest, serviceworker y otros a nuestro visor pwa.html

<html lang="es">
  <head>
  <title>visor global -pwa</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="autor"/>
    <meta name="description" content="descripción página">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>

    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">

    <link id="manifest"  rel="manifest" href="manifest-pwa.json">


  <style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
  }
  </style>
  <script>
var map;  // tambien const map;
  function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/satellite-streets-v11',
                center: [0, 0],
                zoom: 2.3,
                projection:'globe',
                attributionControl: false
            });
        map.addControl(new mapboxgl.AttributionControl({compact: true}));
        map.addControl(new mapboxgl.NavigationControl());
        map.on('load', () => {
            map.setFog({}); 
        });


                map.addControl(
                    new MapboxGeocoder({
                    accessToken: mapboxgl.accessToken,
                    mapboxgl: mapboxgl,
                    collapsed:true
                    })
                 );

        }
  </script>  

  </head>
  <body onLoad="init()">
  <div id="map"></div>

   <script>
       if ('serviceWorker' in navigator) {
            navigator.serviceWorker
                .register('./sw.js')
                .then(function() {
                    console.log("Todo ok!");
                }).catch (function(err){
          console.log ("Error" , error)})
        }
  </script>


  </body>
  </html>

Paso 6- Visualizar PWA en HTTPS

Para poder hacer una instalación correcta de la PWA necesitamos que esté en HTTPS, debemos subirla a Github y ver via web de github

https://{tu_usuario_github}.github.io/geoweb/pwa.html

Editamos index.html y subimos el ejemplo al GitHub

    git pull
    git add .
    git commit -m "pwa"
    git push

Si aparece la icona de instalación en la barra de navegación del browser todo está ok!!

alt text

Hacemos click en la icona e instalamos la aplicación, una vez instalada aparecerá una icona en el desktop

alt text

¿Probamos de visualizar en un móbil? ¿Qué pasa?

alt text

Práctica

Probamos de convertir cualquier otro visor a PWA

Saber más...

Con la web https://www.pwabuilder.com/ podriamos convertir a app nuestro html i publicarla en un market

Ver video 12 para más información

Sólo tenmos que añadir la url de nuestra web

https://{tu_usuario_github}.github.io/geoweb/pwa.html

alt text