5. Comenzar con una rápida primera carga

Progresiva de aplicaciones Web debe empezar rápidamente y sean utilizables inmediatamente. En su estado actual, nuestra aplicación de tiempo comienza rápidamente, pero no es utilizable. No hay datos. Podríamos hacer una petición AJAX para obtener los datos, pero que resulta en una petición extra y hace que la carga inicial más larga. En cambio, proporcionan datos reales en la primera carga.

Inyectar los datos de Previsión del tiempo

Para el laboratorio de este código, podrá simular el servidor inyectar las previsiones meteorológicas directamente en JavaScript, peroen una aplicación de producción, los últimos datos de Previsión del tiempo se inyecta el servidor basado en la dirección IP geo-localización del usuario.

El código contiene ya los datos que vamos a inyectar. Es el initialWeatherForecast que utilizamos en el paso anterior.

Diferencias con la primera ejecución

Pero, ¿cómo sabemos cuándo visualizar esta información, que puede no ser relevante en futuras cargas cuando la aplicación de tiempo de la memoria caché? Cuando el usuario carga la aplicación en visitas posteriores, pueden haber cambiado las ciudades, así que tenemos que cargar la información para las ciudades, no necesariamente la primera ciudad que siempre buscaron.

Las preferencias del usuario, como la lista de ciudades que un usuario se ha suscrito, deben almacenarse localmente utilizando IndexedDB u otro mecanismo de almacenamiento rápido. Para simplificar este laboratorio de código tanto como sea posible, hemos utilizado localStorage, que no es ideal para aplicaciones de producción porque es un mecanismo de almacenamiento de bloqueo, sincrónica que es potencialmente muy lento en algunos dispositivos.

Crédito adicional: Reemplazar localStorage  implementación con idb, Compruebe hacia fuera. localForage como una simple envoltura de  idb.

En primer lugar, vamos a agregar el código necesario para guardar las preferencias del usuario. Encontrar el siguiente comentario TODO en el código.

En primer lugar, vamos a agregar el código necesario para guardar las preferencias del usuario. Encontrar el siguiente comentario TODO en el código.

  // TODO add saveSelectedCities function here

Y agregue el código siguiente debajo del comentario.

  // Save list of cities to localStorage.
  app.saveSelectedCities = function() {
    var selectedCities = JSON.stringify(app.selectedCities);
    localStorage.selectedCities = selectedCities;
  };

A continuación, vamos a añadir el código de inicio para comprobar si el usuario tiene alguno guardado ciudades y representarlos, o utilizar los datos inyectados. Encontrar el siguiente comentario:

  // TODO add startup code here

Y agregue el código siguiente debajo de este comentario:

/************************************************************************
   *
   * Code required to start the app
   *
   * NOTE: To simplify this codelab, we've used localStorage.
   *   localStorage is a synchronous API and has serious performance
   *   implications. It should not be used in production applications!
   *   Instead, check out IDB (https://www.npmjs.com/package/idb) or
   *   SimpleDB (https://gist.github.com/inexorabletash/c8069c042b734519680c)
   ************************************************************************/

  app.selectedCities = localStorage.selectedCities;
  if (app.selectedCities) {
    app.selectedCities = JSON.parse(app.selectedCities);
    app.selectedCities.forEach(function(city) {
      app.getForecast(city.key, city.label);
    });
  } else {
    /* The user is using the app for the first time, or the user has not
     * saved any cities, so show the user some fake data. A real app in this
     * scenario could guess the user's location via IP lookup and then inject
     * that data into the page.
     */
    app.updateForecastCard(initialWeatherForecast);
    app.selectedCities = [
      {key: initialWeatherForecast.key, label: initialWeatherForecast.label}
    ];
    app.saveSelectedCities();
  }

El código de inicio comprueba si hay alguna ciudades guardadas en almacenamiento local. Si es así, entonces analiza los datos de almacenamiento local y muestra una tarjeta de pronóstico para cada una de las ciudades guardadas. Otra cosa, el código de inicio sólo utiliza los datos de pronóstico falsos y guarda como la ciudad de forma predeterminada.

Salvar las ciudades seleccionadas

Finalmente, usted necesitará modificar el controlador de botón de "añadir ciudad" para salvar a la ciudad seleccionada para almacenamiento local.

Actualizar el controlador de haga clic en butAddCity para que coincida con el siguiente código:

document.getElementById('butAddCity').addEventListener('click', function() {
    // Add the newly selected city
    var select = document.getElementById('selectCityToAdd');
    var selected = select.options[select.selectedIndex];
    var key = selected.value;
    var label = selected.textContent;
    if (!app.selectedCities) {
      app.selectedCities = [];
    }
    app.getForecast(key, label);
    app.selectedCities.push({key: key, label: label});
    app.saveSelectedCities();
    app.toggleAddDialog(false);
  });

Las nuevas incorporaciones son la inicialización de app.selectedCities si no existe y las llamadas a app.selectedCities.push() y app.saveSelectedCities().

Probarlo

• Cuando se ejecuta en primer lugar, su aplicación debe inmediatamente mostrar al usuario el pronóstico de initialWeatherForecast.
• Añadir una nueva ciudad (haciendo clic en el icono en la parte superior derecha +) y compruebe que se muestran dos tarjetas.
• Actualizar el navegador y comprobar que la aplicación carga ambos pronósticos y muestra la información más reciente.

Pruébalo