Skip to content

Instantly share code, notes, and snippets.

@Omranic
Last active May 22, 2020 14:06
Show Gist options
  • Save Omranic/c3c2c9c07d6f0d36e40c74f155bf5576 to your computer and use it in GitHub Desktop.
Save Omranic/c3c2c9c07d6f0d36e40c74f155bf5576 to your computer and use it in GitHub Desktop.
1. Fast first load - Your First Progressive Web App

Your First Progressive Web App

Based on Abdelrahman Omran PWA presentation, and Google PWA Codelab


Step 1. Fast first load

Step 2. Use service workers to pre-cache the App Shell

Step 3. Use service workers to cache the forecast data

Step 4. Support native integration & Deploy online


Activate Application Scripts

Open index.html and uncomment the following line:

  <!--<script src="scripts/app.js" async></script>-->

Save Cities to localStorage

Open scripts/app.js and search for the following line:

  // TODO add saveSelectedCities function here

Add the following code below the previous comment:

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

Note: you should be using IndexedDB or another fast storage mechanism to store user preferences, but we've used localStorage for codelab simplicity, which is not ideal for production apps because it is a blocking, synchronous storage mechanism that is potentially very slow on some devices.

Use Saved Cities at App Startup

Open scripts/app.js and search for the following line:

  // TODO add startup code here

Add the following code below the previous comment:

  // Get saved cities from cache
  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 {
    // First usage for the user, so use fake data & save fake city for later usage.
    // A real app in this scenario could guess the user's location via IP lookup.
    app.updateForecastCard(initialWeatherForecast);

    // Select fake city
    app.selectedCities = [
      {key: initialWeatherForecast.key, label: initialWeatherForecast.label}
    ];

    // Save selected cities
    app.saveSelectedCities();
  }

Add Event Handler for Add City Button

Open scripts/app.js and search for the following line:

    // TODO init the app.selectedCities array here

Add the following code below the previous comment:

    if (!app.selectedCities) {
      app.selectedCities = [];
    }

In the same file scripts/app.js search for the following line:

    // TODO push the selected city to the array and save here

Add the following code below the previous comment:

    // Push selected cities to the array
    app.selectedCities.push({key: key, label: label});

    // Save selected cities
    app.saveSelectedCities();

Note: you can now check your PWA application in your browser, you should be able to add cities and see weather forcast for saved cities even after page reload.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment