# Your First Progressive Web App

Based on [Abdelrahman Omran PWA presentation](https://goo.gl/TbgI7d), and [Google PWA Codelab](https://goo.gl/AVsL6p)

___

[Step 1. Fast first load](https://gist.github.com/Omranic/c3c2c9c07d6f0d36e40c74f155bf5576)

[Step 2. Use service workers to pre-cache the App Shell](https://gist.github.com/Omranic/4e648fa38caab7b8207d3e237fde0c77)

## Step 3. Use service workers to cache the forecast data

- [Cache Wethear Data](#cache-wethear-data)
- [Update Data Cache](#update-data-cache)
- [Serve Data Offline From Cache](#serve-data-offline-from-cache)

[Step 4. Support native integration & Deploy online](https://gist.github.com/Omranic/57fab57fa405a055af4a044ef73e711f)

___

### Cache Wethear Data

Open `service-worker.js` and search for the following line:
```javascript
var shellCacheName = 'pwa-weather-shell-v1';
```

Add the following code below the previous line:
```javascript
var dataCacheName = 'pwa-weather-data-v1';
```


### Update Data Cache

In the same file `service-worker.js` search for the following code:
```javascript
if (key !== shellCacheName) {
```

Add replace it with the following code:
```javascript
if (key !== shellCacheName && key !== dataCacheName) {
```

Still in the same file `service-worker.js` search for the following code:
```javascript
// Listen to fetching event
self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});
```

And replace it with the following code:
```javascript
// Listen to fetching event
self.addEventListener('fetch', function(e) {
  console.log('[Service Worker] Fetch', e.request.url);
  var dataUrl = 'https://query.yahooapis.com/v1/public/yql';

  // Check if this is data or app shell request
  if (e.request.url.indexOf(dataUrl) > -1) {
    e.respondWith(
      caches.open(dataCacheName).then(function(cache) {
        return fetch(e.request).then(function(response){
          cache.put(e.request.url, response.clone());
          return response;
        });
      })
    );
  } else {
    e.respondWith(
      caches.match(e.request).then(function(response) {
        return response || fetch(e.request);
      })
    );
  }
});
```

### Serve Data Offline From Cache

Open `scripts/app.js` and search for the following line:
```javascript
    // TODO add cache logic here
```

Add the following code below the previous line:
```javascript
    // Check if browser supports local cache
    if ('caches' in window) {
      // Get cached weather data if exists
      caches.match(url).then(function(response) {
        if (response) {
          response.json().then(function updateFromCache(json) {
            var results = json.query.results;
            results.key = key;
            results.label = label;
            results.created = json.query.created;
            app.updateForecastCard(results);
          });
        }
      });
    }
```

> **Note:** now your weather app fully supports offline browsing, you can go offline & try it out.