Menu

Clase 2 - Creando una PWA

classPWA - May 30, 2018 por Carlos Rojas | Edita este Post.

Bienvenido a la clase 2 de nuestro curso de PWA en esta ocasión vamos a aprender sobre el archivo de Manifesto y su papel del dentro de las PWAs.

¿ Que el archivo Manifiesto ?

El archivo Manifiesto es una forma de indicar a los navegadores web, y en especial a los dispositivos móviles, cómo mostrar tu App. Es básicamente un archivo JSON donde específicas diversas propiedades con sus valores.

¿ Cómo agrego un archivo de manifiesto a mi web ?

Debes crear un archivo manifest.json en el nivel raíz de tu proyecto web.

Este archivo debe tener la siguiente estructura básica.

{
  "short_name": "CarlosRojasBlog",
  "name": "CarlosRojasBlog",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

Puedes ver más propiedades para este archivo en este link.

Agrega en tu index.html la existencia de un manifest.json.

<link rel="manifest" href="/manifest.json">

¿ Cómo pruebo mi manifest ?

Ingresa a la URL de tu sitio desde chrome y utiliza Chrome Developer Tool.

Desde la pestaña Application visita el Manifest. Deberías ver todas las propiedades que definiste.

Puedes probar con Ng-Classroom https://blog.ng-classroom.com

¿ Nuestra App ?

Bueno ahora continuando con nuestra App, voy a instalar la libreria de Web Components Onsen UI combinada con Angular.

  • Lo primero es crear una App nueva con el Angular CLI.
$ ng new firstPWA
  • Luego nos ubicaremos dentro del proyecto e instalalemos las dependencias.
$ npm install onsenui ngx-onsenui --save
  • Luego importaremos el OnsenModule en el AppModule de la App que acabamos de crear.
import { OnsenModule } from 'ngx-onsenui';
...
...
imports: [
   BrowserModule,
   OnsenModule,
],
...
  • También debemos cargar el CUSTOM_ELEMENTS_SCHEMA ya que vamos a utilizar Web components.
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
...
schemas: [
     CUSTOM_ELEMENTS_SCHEMA,
],
...
  • Por último cargamos los archivos de estilos de OnsenUI, para esto voy a utilizar el archivo especial que trae Angular CLI. Abro el archivo angular.json que se encuentra sobre la raiz (sino lo encuentras debes tener una versión anterior de Angular CLI y debes buscarlo).
"styles": [
  "../node_modules/onsenui/css/onsenui.css",
  "../node_modules/onsenui/css/onsen-css-components.css",
  "styles.css"
],

y Listo. Nuestro proyecto debe estar preparado en este punto.

Hasta la proxima clase :)

Ver código

¡Compártelo!