gbxnga · gbxnga · Mar 7, 2018 · Mar 7, 2018
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# MyPWA
+# MyPWA
+
+Link to article: 
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+	<meta name="description" content="">
+	<meta name="author" content="Gbenga Oni">
+  <link rel="manifest" href="manifest.json">
+
+	<title>MyPWA</title>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+	<link rel="stylesheet" href="src/main.css" />
+</head>
+
+<body style="background:#ececec">
+
+	<nav class="navbar navbar-inverse navbar-fixed-top">
+		<div class="container">
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
+				 aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+				<a class="navbar-brand" href="#">MyPWA</a>
+			</div>
+			<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
+				<ul class="nav navbar-nav">
+					<li class="active">
+						<a href="#">Homepage</a>
+					</li>
+					<li>
+						<a href="#link1">Link 1</a>
+					</li>
+				</ul>
+			</div>
+			<!--/.nav-collapse -->
+		</div>
+	</nav>
+
+	<div class="container" style="margin-top:70">
+
+		<div class="card shell">
+			<h1 class="title">Shell</h1>
+			<hr/>
+			<div class="data"></div>
+		</div>
+
+	</div>
+	<!-- /.container -->
+  <script src="src/app.js"></script>
+
+</body>
+
+</html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,34 @@
+{
+  "app": {
+    "background": {
+      "scripts": ["src/app.js"]
+    }
+  },
+  "manifest_version": 2,
+  "name": "MyAppName",
+  "version": "versionString",
+  "default_locale": "en",
+  "description": "MyAppName: MyAppDescription",
+  "short_name": "AppName",
+  "start_url": "/app",
+  "theme_color": "#FF4C00",
+  "display": "standalone",
+  "background_color": "#FF4C00",
+  "icons": [
+    {
+      "src": "src/icons/logo 48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "src/icons/logo 96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "src/icons/logo 144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,77 @@
+var $ = window.$;
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("sw.js").then(function() {
+    console.log("Service Worker Registered");
+  });
+}
+function route(url) {
+  var map = {
+    // Single Products page.
+    "": function() {
+      $(".shell .title").html("Shell");
+      $(".shell .data").html("Welcome!");
+    },
+    "#link1": function() {
+      $(".shell .title").html("Users");
+      return fetch("https://api.randomuser.me/?nat=US&results=3", {
+        method: "GET"
+      })
+        .then(function(response) {
+          console.log(response);
+          if (!response.ok) {
+            throw new Error("Bad status code from server.");
+          }
+          return response.json();
+        })
+        .then(function(responseData) {
+          if (!responseData.results) {
+            console.log(responseData);
+            throw new Error("Bad response from server.");
+          }
+          return responseData.results;
+        })
+        .then(function(json) {
+          $(".shell .data").html('');
+          console.log(json);
+          $.each(json, function(key, person) {
+            var data = '<div className="member">';
+            data += '<img src="' + person.picture.thumbnail + '" alt="" />';
+            data +=
+              "<h3>Name: " +
+              person.name.first +
+              " " +
+              person.name.last +
+              "</h3>";
+            data +=
+              "<p>Location: " +
+              person.location.city +
+              ", " +
+              person.location.state +
+              "</p>";
+            data += "</div> <hr/>";
+
+            $(".shell .data").append(data);
+          });
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    }
+  };
+
+  // Execute the needed function depending on the url keyword (stored in temp).
+  if (map[url]) {
+    map[url]();
+  } else {
+    // If the keyword isn't listed in the above - render the error page.
+    alert("no");
+  }
+}
+route(decodeURI(window.location.hash));
+
+$(window).on("hashchange", function() {
+  // On every hash change the render function is called with the new hash
+  // This is how the navigation of our app happens.
+
+  route(decodeURI(window.location.hash));
+});
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,8 @@
+document.getElementById("app").innerHTML = `
+<h1>Hello Parcel!</h1>
+<div>
+  Look
+  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>
+  for more info about Parcel.
+</div>
+`;
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,8 @@
+.card {
+    padding: 16px;
+    position: relative;
+    background: #fff;
+    border-radius: 2px;
+    margin: 16px;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+    }
diff --git a/sw.js b/sw.js
@@ -0,0 +1,23 @@
+var self = this;
+var cacheName = "myPWA-cache-files-v4.4.9";
+var filesToBeCached = [
+  "src/main.css",
+  "index.html"
+  //'src/js/user.js',
+];
+self.addEventListener("install", function(event) {
+  self.skipWaiting();
+  event.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+      return cache.addAll(filesToBeCached);
+    })
+  );
+});
+
+self.addEventListener("fetch", function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});