Implementasi Javascript pada PWA

Setelah kita melakukan implementasi HTML pada PWA (Progressive Web App) maka kita akan meneruskan dengan implementasi Javascript. Kita akan belajar dengan melihat contoh apa yang dikerjakan di dalam Javascript .

Pada implementasi HTML pada PWA kita melihat ada pemanggilan Javascript dengan source code:

Selanjutnya source Javascript saya capture dengan pembagian-pembagian seperti berikut ini:

1. Bagian awal:
   Source code selengkapnya bagian ini adalah

   (function() {
     'use strict';
   
     var app = {
       isLoading: true,
       visibleCards: {},
       selectedCities: [],
       spinner: document.querySelector('.loader'),
       cardTemplate: document.querySelector('.cardTemplate'),
       container: document.querySelector('.main'),
       addDialog: document.querySelector('.dialog-container'),
       daysOfWeek: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     };
   

   Statement (function() menunjukkan bahwa function ini akan segera dijalankan atau  IIFE (Immediately Invoked Function Expression). Statemen ‘use strict’ berarti bahwa setiap variabel dalam Javascript ini harus dideklarasikan.
   

2. Event Listeners for UI elements:
   Pada source code di atas terlihat apa yang akan dikerjakan oleh masing-masing button jika diklik.Source code selengkapnya bagian ini:

     /*****************************************************************************
      *
      * Event listeners for UI elements
      *
      ****************************************************************************/
   
     document.getElementById('butRefresh').addEventListener('click', function() {
       // Refresh all of the forecasts
       app.updateForecasts();
     });
   
     document.getElementById('butAdd').addEventListener('click', function() {
       // Open/show the add new city dialog
       app.toggleAddDialog(true);
     });
   
     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);
     });
   
     document.getElementById('butAddCancel').addEventListener('click', function() {
       // Close the add new city dialog
       app.toggleAddDialog(false);
     });
   

3. Methods to update/refresh the UI:
   
   Penjelasan source ini sebenarnya sudah jelas seperti gambar di atas yaitu
   a. Fungsi untuk show dan hide dialog penambahan kota
   b. Update weather card, jika belum ada akan menyalin dari template
   Source code lengkapnya adalah:

     /*****************************************************************************
      *
      * Methods to update/refresh the UI
      *
      ****************************************************************************/
   
     // Toggles the visibility of the add new city dialog.
     app.toggleAddDialog = function(visible) {
       if (visible) {
         app.addDialog.classList.add('dialog-container--visible');
       } else {
         app.addDialog.classList.remove('dialog-container--visible');
       }
     };
   
     // Updates a weather card with the latest weather forecast. If the card
     // doesn't already exist, it's cloned from the template.
     app.updateForecastCard = function(data) {
       var dataLastUpdated = new Date(data.created);
       var sunrise = data.channel.astronomy.sunrise;
       var sunset = data.channel.astronomy.sunset;
       var current = data.channel.item.condition;
       var humidity = data.channel.atmosphere.humidity;
       var wind = data.channel.wind;
   
       var card = app.visibleCards[data.key];
       if (!card) {
         card = app.cardTemplate.cloneNode(true);
         card.classList.remove('cardTemplate');
         card.querySelector('.location').textContent = data.label;
         card.removeAttribute('hidden');
         app.container.appendChild(card);
         app.visibleCards[data.key] = card;
       }
   
       // Verifies the data provide is newer than what's already visible
       // on the card, if it's not bail, if it is, continue and update the
       // time saved in the card
       var cardLastUpdatedElem = card.querySelector('.card-last-updated');
       var cardLastUpdated = cardLastUpdatedElem.textContent;
       if (cardLastUpdated) {
         cardLastUpdated = new Date(cardLastUpdated);
         // Bail if the card has more recent data then the data
         if (dataLastUpdated.getTime() < cardLastUpdated.getTime()) {
           return;
         }
       }
       cardLastUpdatedElem.textContent = data.created;
   
       card.querySelector('.description').textContent = current.text;
       card.querySelector('.date').textContent = current.date;
       card.querySelector('.current .icon').classList.add(app.getIconClass(current.code));
       card.querySelector('.current .temperature .value').textContent =
         Math.round(current.temp);
       card.querySelector('.current .sunrise').textContent = sunrise;
       card.querySelector('.current .sunset').textContent = sunset;
       card.querySelector('.current .humidity').textContent =
         Math.round(humidity) + '%';
       card.querySelector('.current .wind .value').textContent =
         Math.round(wind.speed);
       card.querySelector('.current .wind .direction').textContent = wind.direction;
       var nextDays = card.querySelectorAll('.future .oneday');
       var today = new Date();
       today = today.getDay();
       for (var i = 0; i < 7; i++) {
         var nextDay = nextDays[i];
         var daily = data.channel.item.forecast[i];
         if (daily && nextDay) {
           nextDay.querySelector('.date').textContent =
             app.daysOfWeek[(i + today) % 7];
           nextDay.querySelector('.icon').classList.add(app.getIconClass(daily.code));
           nextDay.querySelector('.temp-high .value').textContent =
             Math.round(daily.high);
           nextDay.querySelector('.temp-low .value').textContent =
             Math.round(daily.low);
         }
       }
       if (app.isLoading) {
         app.spinner.setAttribute('hidden', true);
         app.container.removeAttribute('hidden');
         app.isLoading = false;
       }
     };
   

4. Methods for dealing with model:
   
   Source code bagian ini adalah

     /*****************************************************************************
      *
      * Methods for dealing with the model
      *
      ****************************************************************************/
   
     /*
      * Gets a forecast for a specific city and updates the card with the data.
      * getForecast() first checks if the weather data is in the cache. If so,
      * then it gets that data and populates the card with the cached data.
      * Then, getForecast() goes to the network for fresh data. If the network
      * request goes through, then the card gets updated a second time with the
      * freshest data.
      */
     app.getForecast = function(key, label) {
       var statement = 'select * from weather.forecast where woeid=' + key;
       var url = 'https://query.yahooapis.com/v1/public/yql?format=json&q=' +
           statement;
       // TODO add cache logic here
       if ('caches' in window) {
         /*
          * Check if the service worker has already cached this city's weather
          * data. If the service worker has the data, then display the cached
          * data while the app fetches the latest data.
          */
         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);
             });
           }
         });
       }
       // Fetch the latest data.
       var request = new XMLHttpRequest();
       request.onreadystatechange = function() {
         if (request.readyState === XMLHttpRequest.DONE) {
           if (request.status === 200) {
             var response = JSON.parse(request.response);
             var results = response.query.results;
             results.key = key;
             results.label = label;
             results.created = response.query.created;
             app.updateForecastCard(results);
           }
         } else {
           // Return the initial weather forecast since no data is available.
           app.updateForecastCard(initialWeatherForecast);
         }
       };
       request.open('GET', url);
       request.send();
     };
   
     // Iterate all of the cards and attempt to get the latest forecast data
     app.updateForecasts = function() {
       var keys = Object.keys(app.visibleCards);
       keys.forEach(function(key) {
         app.getForecast(key);
       });
     };
   
     // TODO add saveSelectedCities function here
     // Save list of cities to localStorage.
     app.saveSelectedCities = function() {
       var selectedCities = JSON.stringify(app.selectedCities);
       localStorage.selectedCities = selectedCities;
     };
   
     app.getIconClass = function(weatherCode) {
       // Weather codes: https://developer.yahoo.com/weather/documentation.html#codes
       weatherCode = parseInt(weatherCode);
       switch (weatherCode) {
         case 25: // cold
         case 32: // sunny
         case 33: // fair (night)
         case 34: // fair (day)
         case 36: // hot
         case 3200: // not available
           return 'clear-day';
         case 0: // tornado
         case 1: // tropical storm
         case 2: // hurricane
         case 6: // mixed rain and sleet
         case 8: // freezing drizzle
         case 9: // drizzle
         case 10: // freezing rain
         case 11: // showers
         case 12: // showers
         case 17: // hail
         case 35: // mixed rain and hail
         case 40: // scattered showers
           return 'rain';
         case 3: // severe thunderstorms
         case 4: // thunderstorms
         case 37: // isolated thunderstorms
         case 38: // scattered thunderstorms
         case 39: // scattered thunderstorms (not a typo)
         case 45: // thundershowers
         case 47: // isolated thundershowers
           return 'thunderstorms';
         case 5: // mixed rain and snow
         case 7: // mixed snow and sleet
         case 13: // snow flurries
         case 14: // light snow showers
         case 16: // snow
         case 18: // sleet
         case 41: // heavy snow
         case 42: // scattered snow showers
         case 43: // heavy snow
         case 46: // snow showers
           return 'snow';
         case 15: // blowing snow
         case 19: // dust
         case 20: // foggy
         case 21: // haze
         case 22: // smoky
           return 'fog';
         case 24: // windy
         case 23: // blustery
           return 'windy';
         case 26: // cloudy
         case 27: // mostly cloudy (night)
         case 28: // mostly cloudy (day)
         case 31: // clear (night)
           return 'cloudy';
         case 29: // partly cloudy (night)
         case 30: // partly cloudy (day)
         case 44: // partly cloudy
           return 'partly-cloudy-day';
       }
     };
   
     /*
      * Fake weather data that is presented when the user first uses the app,
      * or when the user has not saved any cities. See startup code for more
      * discussion.
      */
     var initialWeatherForecast = {
       key: '2459115',
       label: 'New York, NY',
       created: '2016-07-22T01:00:00Z',
       channel: {
         astronomy: {
           sunrise: "5:43 am",
           sunset: "8:21 pm"
         },
         item: {
           condition: {
             text: "Windy",
             date: "Thu, 21 Jul 2016 09:00 PM EDT",
             temp: 56,
             code: 24
           },
           forecast: [
             {code: 44, high: 86, low: 70},
             {code: 44, high: 94, low: 73},
             {code: 4, high: 95, low: 78},
             {code: 24, high: 75, low: 89},
             {code: 24, high: 89, low: 77},
             {code: 44, high: 92, low: 79},
             {code: 44, high: 89, low: 77}
           ]
         },
         atmosphere: {
           humidity: 56
         },
         wind: {
           speed: 25,
           direction: 195
         }
       }
     };
     // TODO uncomment line below to test app with fake data
     // app.updateForecastCard(initialWeatherForecast);
   

   Pada pemrograman tersebut pertama-tama akan mengambil cache, kemudian dilanjutkan dengan mencoba mengambil data terakhir melalui jaringan.
   

5. Code required to start up
   
   Source code lengkapnya adalah:

     /************************************************************************
      *
      * 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)
      ************************************************************************/
   
     // TODO add startup code here
     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();
     }
   
     // TODO add service worker code here
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker
                .register('./service-worker.js')
                .then(function() { console.log('Service Worker Registered'); });
     }
   })();
   

Informasi lebih lanjut silahkan mengunjungi
1. https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
2. https://developers.google.com/web/progressive-web-apps/ .
3. Progressive Web Apps Training di https://developers.google.com/web/ilt/pwa/ .
4. IIFE (Immediately Invoked Function Expression) pada JavaScript https://developer.mozilla.org/en-US/docs/Glossary/IIFE .
5. Use Strict pada JavaScript https://www.w3schools.com/js/js_strict.asp .
6. JavaScript Versions https://www.w3schools.com/js/js_versions.asp .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.