3. Arquitecto de la Shell de la aplicación

¿Qué es el shell de la aplicación?

Shell de la aplicación es el mínimo HTML, CSS y JavaScript que se requiere para la interfaz de usuario de una aplicación web progresivo y es uno de los componentes que asegura un rendimiento fiable buena. La primera carga debe ser extremadamente rápida e inmediatamente en la memoria caché. "Cached" significa que los archivos de shell son cargados una vez sobre la red y luego guardan en el dispositivo local. Cada vez subsiguiente que el usuario abre la aplicación, los archivos de shell se cargan desde la caché del equipo local, lo cual resulta en el aceleramiento en el  tiempo de inicio.

App shell arquitectura separa la infraestructura de aplicaciones de base y la interfaz de usuario de los datos. Toda la infraestructura y la interfaz de usuario se almacena en caché localmente utilizando un service worker para que en las cargas posteriores, la aplicación progresiva de la Web sólo necesita recuperar los datos necesarios, en lugar de tener que cargar todo.

Dicho de otro modo, la cáscara de la aplicación es similar al paquete de código que publicaría a una tienda de aplicaciones al crear una aplicación nativa. Es los componentes necesarios para despegarde su aplicación, pero es probable que no contiene los datos.

¿Por qué utilizar la arquitectura de la aplicación de Shell?

Utilizando la arquitectura de shell de la aplicación le permite centrarse en la velocidad, dando sus características similares de progresiva aplicación Web a aplicaciones nativas: actualizaciones instantánea carga y regulares, sin la necesidad de una tienda de aplicaciones.

Diseño de la cáscara de la aplicación

El primer paso es dividir el diseño en sus componentes principales.

Pregúntate a ti mismo:

• ¿Lo que debe ser inmediatamente en la pantalla?
• ¿Qué otros componentes de la interfaz de usuario son claves para nuestra aplicación?
• ¿Qué recursos de apoyo son necesarios para la shell de la aplicación? Por ejemplo, imágenes, JavaScript, estilos, etc..

Vamos a crear una aplicación de tiempo como nuestra primera aplicación Web progresiva. Los componentes clave consistirá en:

• Encabezado con un título y los botones Agregar/actualizar
• Contenedor para las tarjetas de pronóstico
• Una plantilla de tarjeta de pronóstico
• Un cuadro de diálogo para agregar nuevas ciudades
• Un indicador de carga

2. Conseguir establecer

Descargar el código
Haga clic en el botón siguiente para descargar todo el código para este codelab:

Descargar Código Fuente

Descomprimir el archivo zip descargado. Esto desempaquetará una carpeta root (your-first-pwapp-master), que contiene una carpeta para cada paso de este codelab, junto con todos los recursos que necesita.

Las carpetas del  step-NN contienen el estado final deseado de cada paso de este codelab. 

Están para la referencia. Vamos a estar haciendo todo nuestro trabajo de codificación en un directorio llamado work.

Instalar y comprobar el servidor web

Si bien eres libre de utilizar tu propio servidor web, este codelab está diseñado para trabajar bien con el servidor de Web de Chrome. Si no tienes esa aplicación todavía instalada, se puede instalar desde la Chrome Web Store.

Instalar web Server para Chrome

Después de instalar al servidor Web para Chrome app, haga clic enel acceso directo de aplicaciones en la barra de favoritos:

En la ventana resultante, haga clic en el icono del servidor Web:

Usted verá este cuadro de diálogo siguiente, que le permite configurar su servidor web local:

Haga clic en el botón choose folder y seleccione la carpeta work. 

Esto le permitirá atender su trabajo en curso a través de la URL que puso de relieve en el cuadro de diálogo de servidor web(en la sección Web Server URL(s)).

En opciones, marque la casilla junto a "Automatically show index.html", como se muestra a continuación:

Luego detener y reiniciar el servidor deslizando el botón etiquetado como "Web Server: STARTED" a la izquierda y luego a la derecha.

Ahora visite su sitio de trabajo en su navegador de Internet (haciendo clic en el  resaltado Web Server URL) 

y usted debería ver una página que tiene este aspecto:

Obviamente, esta aplicación no está todavía haciendo nada interesante - hasta ahora, es apenas un esqueleto mínimo con un spinner que estamos utilizando para verificar la funcionalidad de servidor web. Vamos a añadir funciones y características de la interfaz de usuario en los pasos posteriores.

Desde este punto hacia adelante, todas pruebas de verificación (por ejemplo, las prueba Test It Out secciones en pasos posteriores) debe realizarse con esta configuración de servidor web.

Fuente: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#1