From 16b7be35ddbaa310218a77026f1fdf41122a4e95 Mon Sep 17 00:00:00 2001 From: Gbenga Oni <30432941+gbxnga@users.noreply.github.com> Date: Wed, 7 Mar 2018 16:19:53 +0100 Subject: [PATCH 1/2] Add files via upload --- index.html | 62 +++++++++++++++++++++++++++++++++++++++++ manifest.json | 34 +++++++++++++++++++++++ src/app.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/index.js | 8 ++++++ src/main.css | 8 ++++++ sw.js | 23 +++++++++++++++ 6 files changed, 212 insertions(+) create mode 100644 index.html create mode 100644 manifest.json create mode 100644 src/app.js create mode 100644 src/index.js create mode 100644 src/main.css create mode 100644 sw.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..b89bbf3 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + MyPWA + + + + + + + + + + + +
+ +
+

Shell

+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..1b4a7f9 --- /dev/null +++ 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 new file mode 100644 index 0000000..a37e86b --- /dev/null +++ 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 = '
'; + data += ''; + data += + "

Name: " + + person.name.first + + " " + + person.name.last + + "

"; + data += + "

Location: " + + person.location.city + + ", " + + person.location.state + + "

"; + data += "
"; + + $(".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 new file mode 100644 index 0000000..f69bf89 --- /dev/null +++ b/src/index.js @@ -0,0 +1,8 @@ +document.getElementById("app").innerHTML = ` +

Hello Parcel!

+
+ Look + here + for more info about Parcel. +
+`; diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..54e98fe --- /dev/null +++ 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); + } \ No newline at end of file diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..6326a15 --- /dev/null +++ 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); + }) + ); +}); From 226b02796545bbcb8f768e6e1d88d98fb627875b Mon Sep 17 00:00:00 2001 From: Gbenga Oni <30432941+gbxnga@users.noreply.github.com> Date: Wed, 7 Mar 2018 16:25:07 +0100 Subject: [PATCH 2/2] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e70f159..6d5c31f 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# MyPWA \ No newline at end of file +# MyPWA + +Link to article: