Progressive Web Apps (PWA) - The Complete Guide

{
    "name": "Sweaty - Activity Tracker",
    "short_name": "Sweaty",
    "start_url": "/index.html",
    "scope": ".",
    "display": "standalone",
    "background_color": "#fff",
    "theme_color": "#3f51b5",
    "description": "Keep running until you're super sweaty!",
    "dir": "ltr",
    "language": "en-US",
    "orientation": "portrait-primary",
    "icons": [
        {
            "src": "/src/images/icons/app-icon-48x48.png",
            "type": "image/png",
            "size": "48x48"
        },
        {
            "src": "/src/images/icons/app-icon-96x96.png",
            "type": "image/png",
            "size": "96x96"
        }
    ],
    "related_applications": [
        {
            "platform": "play",
            "url": "https://play.google.com/store/apps/details?id=com.example.app1",
            "id": "com.example.app1"
        }
    ]

}

var CACHE_STATIC_NAME = "static-v2";
var CACHE_DYNAMIC_NAME = "dynamic-v2";

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
      .then(function(cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll([
          '/',
          '/index.html',
          '/src/js/app.js',
          '/src/js/feed.js',
          '/src/js/promise.js',
          '/src/js/fetch.js',
          '/src/js/material.min.js',
          '/src/css/app.css',
          '/src/css/feed.css',
          '/src/images/main-image.jpg',
          'https://fonts.googleapis.com/css?family=Roboto:400,700',
          'https://fonts.googleapis.com/icon?family=Material+Icons',
          'https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'
        ]);
      })
  );
});

self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME)  {
            console.log('[Service Worker] Removing old cache:',key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request)
    .then(function (response) {
      if (response) {
        return response;
      } else {
        return fetch(event.request)
          .then(function (res) {
            return caches.open(CACHE_DYNAMIC_NAME)
              .then(function (cache) {
                cache.put(event.request.url, res.clone());
                return res;
              });
          })
          .catch(function (err) {

          });
      }
    })
  );
});

function onSaveButtonClicked(event) {
  console.log('clicked');
  if ('caches' in window) {
    caches.open('user-requested')
    .then(function (cache) {
      cache.add('https://httpbin.org/get');
      cache.add('/src/images/sf-boat.jpg');
    });
  }
}

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        } else {
          return fetch(event.request)
            .then(function(res) {
              return caches.open(CACHE_DYNAMIC_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone());
                  return res;
                })
            })
            .catch(function(err) {
              return caches.open(CACHE_STATIC_NAME)
                .then(function (cache) {
                  return cache.match('/offline.html');  (1)
                });
            });
        }
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
      .then(function (res) {
        return caches.open(CACHE_DYNAMIC_NAME)
          .then(function(cache) {
            cache.put(event.request.url, res.clone());
            return res;
          })
      })
      .catch(function (err) {
        return caches.match(event.request);
      })
  );
});

var url = 'https://httpbin.org/get';
var networkDataReceived = false;

fetch(url)
  .then(function(res) {
    return res.json();
  })
  .then(function(data) {
    networkDataReceived = true;
    console.log('From web', data);
    clearCards();
    createCard();
  });

if ('caches' in window) {
  caches.match(url)
    .then(function (response) {
      if (response) {
        return response.json();
      }
    })
    .then(function (data) {
      console.log('From cache', data);
      if (!networkDataReceived) {
        clearCards();
        createCard();
      }
    })
}

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(CACHE_DYNAMIC_NAME)
      .then(function (cache) {
        return fetch(event.request)
          .then(function (res) {
            cache.put(event.request, res.clone());
            return res;
          })
      })
  );
});

self.addEventListener('fetch', function(event) {
  var url = 'https://httpbin.org/get';

  if (event.request.url.indexOf(url) > -1) {
    event.respondWith(
      caches.open(CACHE_DYNAMIC_NAME)
        .then(function (cache) {
          return fetch(event.request)
            .then(function (res) {
              cache.put(event.request, res.clone());
              return res;
            })
        })
    );
  } else {
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          if (response) {
            return response;
          } else {
            return fetch(event.request)
              .then(function(res) {
                return caches.open(CACHE_DYNAMIC_NAME)
                  .then(function(cache) {
                    cache.put(event.request.url, res.clone());
                    return res;
                  })
              })
              .catch(function(err) {
                return caches.open(CACHE_STATIC_NAME)
                  .then(function (cache) {
                    return cache.match('/offline.html');
                  });
              });
          }
        })
      );
  }

});

var MY_FIREBASE_ID = '...'; (7)
var MY_TEST_IMAGE_URL = '...'; (8)

function sendData() { (2)
  fetch(MY_FIREBASE_ID + '.firebasedatabase.app/posts.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      id: new Date().toISOString(),
      title: titleInput.value,
      location: locationInput.value,
      image: MY_TEST_IMAGE_URL
    })
  })
    .then(function(res) {
      console.log('Sent data', res);
      updateUI();
    });
}

form.addEventListener('submit', function(event) { (6)
  event.preventDefault();

  if (titleInput.value.trim() === '' || locationInput.value.trim() === '') {
    alert('Please enter valid data!');
    return;
  }

  closeCreatePostModal();

  if ('serviceWorker' in navigator && 'SyncManager' in window) {
    navigator.serviceWorker.ready (3)
      .then(function(sw) {
        var post = {
          id: new Date().toISOString(),
          title: titleInput.value,
          location: locationInput.value
        };
        writeData('sync-posts', post)
          .then(function () {
            return sw.sync.register('sync-new-posts')  (4)
          })
          .then(function () {
            var snackbarContainer = document.querySelector("#confirmation-toast"); (5)
            var data = {message: "Your Post was saved for syncing!"};
            snackbarContainer.MaterialSnackbar.showSnackbar(data);
          }).catch(function (err) {
            console.log(err);
          });
      });
  } else {
    sendData(); (1)
  }
});

var MY_FIREBASE_ID = '...'; (1)
var MY_TEST_IMAGE_URL = '...'; (3)

self.addEventListener('sync', function(event) {
  console.log('[Service Worker] Background syncing', event);
  if (event.tag === 'sync-new-posts') {
    console.log('[Service Worker] Syncing new Post');
    event.waitUntil(
      readAllData('sync-posts')
        .then(function(data) {
          for (var dt of data) {
            fetch(MY_FIREBASE_ID + '.firebasedatabase.app/posts.json', { (4)
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
              },
              body: JSON.stringify({
                id: dt.id,
                title: dt.title,
                location: dt.location,
                image: MY_TEST_IMAGE_URL
              })
            })
              .then(function(res) {
                console.log('Sent data', res);
                if (res.ok) {
                  deleteItemFromData('sync-posts', dt.id); (2)
                }
              })
              .catch(function (err) {
                console.log('Error while sending data', err);
              });
          }
        })
    );
  }

});

const functions = require("firebase-functions");
var admin = require('firebase-admin');
var cors = require('cors')({ origin: true });

var serviceAccount = require("./pwagram-fb-key.json");
var MY_DB_URL = '...'; (1)

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: MY_DB_URL
});

exports.storePostData = functions.https.onRequest((request, response) => {
    cors(request, response, function () {
        var reqBody = request.body;
        functions.logger.info('-- reqBody:', reqBody, '.'); (2)
        var newPost = {
            id: reqBody.id,
            title: reqBody.title,
            location: reqBody.location,
            image: reqBody.image
        };
        functions.logger.info('-- newPost:', newPost, '.');

        admin.database().ref('posts').push(newPost)
            .then(function () {
                response.status(201).json({ message: 'Data stored', id: request.body.id });
            })
            .catch(function (err) {
                response.status(500).json({ error: err });
            });
    });
    //   response.send("Hello from Firebase!");
});

function displayConfirmNotification() { (5)
  var options = {
    body: "You successfully subscribed to our Notification service!"
  };
  new Notification('Successfully subscribed!', options);
}

function askForNotificationPermission() {
  Notification.requestPermission(function(result) { (4)
    console.log('User Choice', result);
    if (result !== 'granted') {
      console.log('No notification permission granted!');
    } else {
      //displayConfirmNotification(); (6)
      configurePushSub() (7)
    }
  });
}

if ('Notification' in window) { (1)
  for (var i = 0; i < enableNotificationsButtons.length; i++) {
    enableNotificationsButtons[i].style.display = 'inline-block'; (2)
    enableNotificationsButtons[i].addEventListener('click', askForNotificationPermission); (3)
  }
}

function displayConfirmNotification() { (4)
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready
      .then(function(swreg) {
        var options = {
          body: "You successfully subscribed to our Notification service!",
          icon: "/src/images/icons/app-icon-96x96.png",
          image: "/src/images/sf-boat.jpg",
          dir: "ltr",
          lang: "en-US", // BCP 47
          vibrate: [100, 50, 200],
          badge: "/src/images/icons/app-icon-96x96.png",
          tag: "confirm-notification", (2)
          renotify: true, (3)
          actions: [
            { action: "confirm", title: "Okay", icon: "/src/images/icons/app-icon-96x96.png" },
            { action: "cancel", title: "Cancel", icon: "/src/images/icons/app-icon-96x96.png" }
          ]
        };
        swreg.showNotification('Successfully subscribed (from SW)!', options); (1)
      });
  }
}

self.addEventListener('notificationclick', function(event) { (1)
  var notification = event.notification;
  var action = event.action;

  console.log(notification);

  if (action === 'confirm') {
    console.log('Confirm was chosen');
  } else {
    console.log(action);
  }
  notification.close(); (2)
});

self.addEventListener('notificationclose', function(event) { (1)
  console.log('Notification was closed', event);
});

function configurePushSub() { (1)
  if (!('serviceWorker' in navigator)) {
    return;
  }

  var reg;
  navigator.serviceWorker.ready
    .then(function (swreg) {
      reg = swreg;
      return swreg.pushManager.getSubscription(); (2)
    })
    .then(function (sub) {
      if (sub === null) {
        // Create a new subscription
        var vapidPublicKey = "..."; (3)
        var convertedVapidPublicKey = urlBase64ToUint8Array(vapidPublicKey); (4)
        return reg.pushManager.subscribe({ (5)
          userVisibleOnly: true,
          applicationServerKey: convertedVapidPublicKey
        });
      } else {
        // We have a subscription
      }

    })
    .then(function (newSub) { (6)
      return fetch(MY_FIREBASE_ID + ".firebasedatabase.app/subscriptions.json", { (8)
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json"
        },
        body: JSON.stringify(newSub)
      });
    })
    .then(function (res) { (7)
      if (res.ok) {
        displayConfirmNotification();
      }
    })
    .catch(function(err) {
      console.log(err);
    });
}

function urlBase64ToUint8Array(base64String) { (1)
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);

  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

self.addEventListener('push', function(event) { (1)
  console.log('Push Notification received', event);

  var data = {title: "New!", content:"Something new happened!"}; (2)
  if (event.data) {
    data = JSON.parse(event.data.text()); (3)
  }

  var options = {
    body: data.content,
    icon: '/src/images/icons/app-icon-96x96.png',
    badge: '/src/images/icons/app-icon-96x96.png'
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options) (4)
  );
});

self.addEventListener('notificationclick', function(event) {
  var notification = event.notification;
  var action = event.action;

  console.log(notification);

  if (action === 'confirm') {
    console.log('Confirm was chosen');
    notification.close();
  } else {
    console.log(action);
    event.waitUntil(
      clients.matchAll() (3)
        .then(function (clis) {
          var client = clis.find(function (c) {
            return c.visibilityState === 'visible'
          });

          if (client !== undefined) {
            client.navigate('http://localhost:8080'); (1)
            client.focus();
          } else {
            clients.openWindow('http://localhost:8080'); (2)
          }
          notification.close();
        })
    );
  }
});

self.addEventListener('notificationclick', function(event) {
  var notification = event.notification;
  var action = event.action;

  console.log(notification);

  if (action === 'confirm') {
    console.log('Confirm was chosen');
    notification.close();
  } else {
    console.log(action);
    event.waitUntil(
      clients.matchAll()
        .then(function (clis) {
          var client = clis.find(function (c) {
            return c.visibilityState === 'visible'
          });

          if (client !== undefined) {
            client.navigate(notification.data.url); (2)
            client.focus();
          } else {
            clients.openWindow(notification.data.url);
          }
          notification.close();
        })
    );
  }
});

self.addEventListener('push', function(event) {
  console.log('Push Notification received', event);

  var data = {title: "New!", content:"Something new happened!", openUrl: "/"};
  if (event.data) {
    data = JSON.parse(event.data.text());
  }

  var options = {
    body: data.content,
    icon: '/src/images/icons/app-icon-96x96.png',
    badge: '/src/images/icons/app-icon-96x96.png',
    data: {
      url: data.openUrl (1)
    }
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

function initializeMedia() {
  if (!('mediaDevices' in navigator)) {
    navigator.mediaDevices = {};
  }

  if (!('getUserMedia' in navigator.mediaDevices)) {
    navigator.mediaDevices.getUserMedia = function (constraints) {
      var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; (1)

      if (!getUserMedia) {
        return Promise.reject(new Error('getUserMedia is not implemented!'));
      }

      return new Promise(function (resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject); (2)
      });
    };
  }

  navigator.mediaDevices.getUserMedia({video: true})
    .then(function(stream) {
      videoPlayer.srcObject = stream; (3)
      videoPlayer.style.display = 'block';
    })
    .catch(function (err) {
      imagePickerArea.style.display = 'block';
    });
}

captureButton.addEventListener('click', function(event) { (1)
  canvasElement.style.display = 'block'; (2)
  videoPlayer.style.display = 'none';
  captureButton.style.display = 'none';
  var context = canvasElement.getContext('2d');
  context.drawImage(videoPlayer, 0, 0, canvas.width, videoPlayer.videoHeight / (videoPlayer.videoWidth / canvas.width)); (3)
  videoPlayer.srcObject.getVideoTracks().forEach(function(track) {
    track.stop(); (4)
  });
  picture = dataURItoBlob(canvasElement.toDataURL()); (5)
});

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  var blob = new Blob([ab], {type: mimeString}); (1)
  return blob;
}

self.addEventListener('sync', function(event) {
  console.log('[Service Worker] Background syncing', event);
  if (event.tag === 'sync-new-posts') {
    console.log('[Service Worker] Syncing new Posts');
    event.waitUntil(
      readAllData('sync-posts')
        .then(function(data) {
          for (var dt of data) {
            var postData = new FormData(); (1)
            postData.append("id", dt.id);
            postData.append("title", dt.title);
            postData.append("location", dt.location);
            postData.append("file", dt.picture, dt.id + ".png");

            fetch(MY_CLOUD_FUNC + '.cloudfunctions.net/storePostData', { (2)
              method: 'POST',
              body: postData
            })
              .then(function(res) {
                console.log('Sent data', res);
                if (res.ok) {
                  res.json()
                    .then(function(resData) {
                      deleteItemFromData('sync-posts', resData.id);
                    });
                }
              })
              .catch(function(err) {
                console.log('Error while sending data', err);
              });
          }

        })
    );
  }
});

var functions = require("firebase-functions");
var admin = require("firebase-admin");
var cors = require("cors")({ origin: true });
var webpush = require("web-push");
var fs = require("fs");
var UUID = require("uuid-v4");  (3)
var os = require("os");
var Busboy = require("busboy");  (2)
var path = require('path');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//

var serviceAccount = require("./pwagram-fb-key.json");

var gcconfig = {
  projectId: "YOUR_PROJECT_ID",  (5)
  keyFilename: "pwagram-fb-key.json"
};

var gcs = require("@google-cloud/storage")(gcconfig);  (1)

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com/"  (8)
});

exports.storePostData = functions.https.onRequest(function(request, response) {
  cors(request, response, function() {
    var uuid = UUID();

    const busboy = Busboy({ headers: request.headers });
    // These objects will store the values (file + fields) extracted from busboy
    let upload;
    const fields = {};

    // This callback will be invoked for each file uploaded
    busboy.on("file", (fieldname, file, info) => {
      const { filename, encoding, mimetype } = info;
      console.log(
        `File [${fieldname}] filename: ${filename}, encoding: ${encoding}, mimetype: ${mimetype}`
      );
      const filepath = path.join(os.tmpdir(), filename);
      upload = { file: filepath, type: mimetype };
      file.pipe(fs.createWriteStream(filepath));
    });

    // This will invoked on every field detected
    busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) {
      fields[fieldname] = val;
    });

    // This callback will be invoked after all uploaded files are saved.
    busboy.on("close", () => {
      var bucket = gcs.bucket("YOUR_PROJECT_ID.appspot.com");  (5)
      bucket.upload(  (7)
        upload.file,
        {
          uploadType: "media",
          metadata: {
            metadata: {
              contentType: upload.type,
              firebaseStorageDownloadTokens: uuid
            }
          }
        },
        function(err, uploadedFile) {
          if (!err) {
            admin
              .database()
              .ref("posts")
              .push({
                id: fields.id,
                title: fields.title,
                location: fields.location,
                image:  (6)
                  "https://firebasestorage.googleapis.com/v0/b/" +
                  bucket.name +
                  "/o/" +
                  encodeURIComponent(uploadedFile.name) +
                  "?alt=media&token=" +
                  uuid
              })
              .then(function() {
                webpush.setVapidDetails(
                  "mailto:" + MY_EMAIL,  (4)
                  MY_VAPID_PUBLIC_KEY,
                  MY_VAPID_PRIVATE_KEY
                );
                return admin
                  .database()
                  .ref("subscriptions")
                  .once("value");
              })
              .then(function(subscriptions) {
                subscriptions.forEach(function(sub) {  (9)
                  var pushConfig = {
                    endpoint: sub.val().endpoint,
                    keys: {
                      auth: sub.val().keys.auth,
                      p256dh: sub.val().keys.p256dh
                    }
                  };

                  webpush
                    .sendNotification(
                      pushConfig,
                      JSON.stringify({
                        title: "New Post",
                        content: "New Post added!",
                        openUrl: "/help"
                      })
                    )
                    .catch(function(err) {
                      console.log(err);
                    });
                });
                response
                  .status(201)
                  .json({ message: "Data stored", id: fields.id });
              })
              .catch(function(err) {
                response.status(500).json({ error: err });
              });
          } else {
            console.log(err);
          }
        }
      );
    });

    // The raw bytes of the upload will be in request.rawBody.  Send it to busboy, and get
    // a callback when it's finished.
    busboy.end(request.rawBody);
  });
});

imagePicker.addEventListener('change', function(event) {
  picture = event.target.files[0]; (1)
});

locationBtn.addEventListener('click', function(event) {
  if (!('geolocation' in navigator)) {
    return;
  }

  locationBtn.style.display = 'none';
  locationLoader.style.display = 'block';

  navigator.geolocation.getCurrentPosition(function (position) { (1)
    locationBtn.style.display = 'inline';
    locationLoader.style.display = 'none';
    fetchedLocation = { lat: position.coords.latitude, lng: 0 };
    locationInput.value = 'In Munich';
    document.querySelector("#manual-location").classList.add('is-focused');

  }, function (err) {
    console.log(err);
    locationBtn.style.display = 'inline';
    locationLoader.style.display = 'none';
    alert("Couldn't get location, please enter manually!");
    fetchedLocation = { lat: null, lng: null };
  }, { timeout: 7000 })
});

module.exports = {  (1)
  "globDirectory": "public/",
  "globPatterns": [
    "**/*.{html,ico,json,css,js}",
    "src/images/*.{png,jpg}"  (2)
  ],
  "swSrc": "public/sw-base.js",  (3)
  "swDest": "public/service-worker.js",
  "globIgnores": [
    "../workbox-cli-config.js",
    "help/**"
  ]
};

importScripts('workbox-sw.prod.v2.1.3.js');
importScripts('/src/js/idb.js');
importScripts('/src/js/utility.js');  (4)

const workboxSW = new self.WorkboxSW();

workboxSW.router.registerRoute(/.*(?:googleapis|gstatic)\.com.*$/,  (1)
workboxSW.strategies.staleWhileRevalidate({  (2)
    cacheName: "google-fonts",
    cacheExpiration: {
        maxEntries: 3,
        maxAgeSeconds: 60 * 60 * 24 * 30  (5)
    }
}));

workboxSW.router.registerRoute("https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css",  (6)
workboxSW.strategies.staleWhileRevalidate({
    cacheName: "material-css"
}));

workboxSW.router.registerRoute(/.*(?:firebasestorage\.googleapis)\.com.*$/,  (8)
workboxSW.strategies.staleWhileRevalidate({
    cacheName: "post-images"
}));

workboxSW.router.registerRoute(MY_FIREBASE_ID + '.firebasedatabase.app/posts.json',  (7)
function(args) {
    return fetch(args.event.request)
        .then(function (res) {
        var clonedRes = res.clone();
        clearAllData('posts')
            .then(function () {
            return clonedRes.json();
            })
            .then(function (data) {
            for (var key in data) {
                writeData('posts', data[key])
            }
            });
        return res;
        })
});

workboxSW.precache([]);  (3)

workboxSW.router.registerRoute(function (routeData) {
    return (routeData.event.request.headers.get('accept').includes('text/html'));  (1)

}, function (args) {
    return caches.match(args.event.request)
        .then(function (response) {
            if (response) {
                return response;  (2)
            } else {
                return fetch(args.event.request)  (3)
                    .then(function (res) {
                        return caches.open('dynamic')
                            .then(function (cache) {
                                cache.put(args.event.request.url, res.clone());
                                return res;
                            })
                    })
                    .catch(function (err) {
                        return caches.match('/offline.html')  (4)
                            .then(function (res) {
                                return res;
                            });
                    });
            }
        })
});