From ba572a73a4b9bfb866dd7f0426d6cc0c70a47732 Mon Sep 17 00:00:00 2001 From: Joel Salisbury Date: Tue, 18 Feb 2020 14:46:30 -0500 Subject: [PATCH] first commit of chat UI --- icon192.png | Bin 0 -> 380 bytes icon512.png | Bin 0 -> 1170 bytes index.html | 17 +++++ main.css | 5 ++ main.js | 12 +++ manifest.json | 21 ++++++ sw.js | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 257 insertions(+) create mode 100644 icon192.png create mode 100644 icon512.png create mode 100644 index.html create mode 100644 main.css create mode 100644 main.js create mode 100644 manifest.json create mode 100644 sw.js diff --git a/icon192.png b/icon192.png new file mode 100644 index 0000000000000000000000000000000000000000..89c2044383da5196114ffd7a2c68a7ad00e00190 GIT binary patch literal 380 zcmeAS@N?(olHy`uVBq!ia0vp^2SAvG8AvYpRA>UEqyv0HTm@$;O`A5&Xoh|3wDy$g zS&B0ZoTmE*Pmd{?R=M43?^mEQ&H|6fVg?4jBOuH;Rhv(mfq{|T)5S5QV$R!38~vIC zB-$SGYaSKM^m|>=lli8@XUJw{a#jzb7nxrQ7j6YTu>QF-xAEdjgWvbP0l+XkK;wGO^ literal 0 HcmV?d00001 diff --git a/icon512.png b/icon512.png new file mode 100644 index 0000000000000000000000000000000000000000..a864fef5d326436137f6eee433ac29760a85fe1c GIT binary patch literal 1170 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7+9Er6kFKIlR!#3z$e5tR8VQ!v}w6czOjl1 zttFMct?jibS*5`-sYdqvn@+_6m2nn$L>4nJ@ErkR#;MwT(hLkNvYsxEAr*7p-Z&q8 z+f9Vwf$6jB7rD(Ia`;;9b;@X$Q4CJ2>RFa~ZsFW}hkdHd+l~HiUL6}5l_+y-%iM-j z-({a1fA{EOb=2EaT#P^)$OR7qe@V#y;*q;n6{F`c$L2(*&6LB-;~GBi4{i8g7`STh z;-%Bn!y0x}FMrx8`oJ%X%isgkosj(Jr!U$bu3EV^_Do%7RNd^o=X4*(Kfc|(G_e1A zIQ!%7?}^68EY7};>O2(o_1y}~ExXQ5y0zn;z$3@3pWFEEEnl{J_hPw?7M6YKnbF-} z-8o`Sx*lsClRunlwMA@h^vmRnUt+t;FMnThF1^(IU2p!OsM#wu_DL(m~X3J~qZ~SbN-`<|8GePqnR~=ebUA|qs z_tM`zQ`h|q+icMimmYbqFW7h6t397>BE6kg|DAA3q-_(&xl5J%Pd@b1ms)CbJk#_> z-mPDUy|UUfC-uMX+Y_{8L8X@r?{Ws~%);Lj4xQc`XL3r|{@wC5VwF>XL6;i!{qWJ* ze{6k!%YUAb<|g6A`0euA>IsJqX97*zc{k>)S^uTTAnW_@YyH>%&9Y!!5q#&w$+p*# z`cg;V1ui?gxMbRuRe$e&-|}|-zMUP1H4muhO!B>4X1Oc00jTYDotT;K&mV?*+fFiy zDzq=IP><4b_#VhrVC`}Ii-!z*33p8q+m^lat(ng~e)IfiLs{d=<<}aveg9|rz>o3T ztK&x#$r)cjk$Ys4RZhgbX=i( zz-?b3+ZP!F&;E+DH{X9*1eW|;CpAm`!8(Ss_Huly7#<&e|Ko1lmPHIpH!mrhyRLlJ zS8wA5QX!0C|E1nkovwM`R_ZJLa{b|oY~G6b_hqishg!$$_1Ejn|8eR&V{HEWqV0!w zEn90bcmA=w_!a%L3*Wy;6@C2KgtzU3oxh8p)FRLzIsTb%fob|r(^+S<_;=)w#Et?qbZn(5%TLo*)@4z29 z)}jf&|J)Tn{rLW_mG{n0UtHZ@>bLsk!MD@IKbCUDzyDjV&Q5NYWMDWD|6ACzaq_oW SA56_arg*ygxvX + + + + + + DMD 3440 - Room of Chat + + + + + +

Welcome to Room of Chat for DMD 3440

+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..6f290a3 --- /dev/null +++ b/main.css @@ -0,0 +1,5 @@ +body { + background-color: rgb(32, 49, 88); + color:#eee; + font-family: Arial, Helvetica, sans-serif; +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..2b40a14 --- /dev/null +++ b/main.js @@ -0,0 +1,12 @@ +// Register a service worker, this one located in serviceworker.js +// A service worker is a piece of code the browser runs behind the scenes. +if ('serviceWorker' in navigator) { + console.log('CLIENT: service worker registration in progress.'); + navigator.serviceWorker.register('sw.js').then(function() { + console.log('CLIENT: service worker registration complete.'); + }, function() { + console.log('CLIENT: service worker registration failure.'); + }); + } else { + console.log('CLIENT: service workers are not supported.'); + } \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..2a64746 --- /dev/null +++ b/manifest.json @@ -0,0 +1,21 @@ +{ + "short_name": "Turn Blue!", + "name": "Turn the page blue!", + "icons": [ + { + "src":"icon192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icon512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": "index.html", + "background_color": "#f00", + "theme_color": "#f00", + "display": "fullscreen" + } + \ No newline at end of file diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..d2e3d44 --- /dev/null +++ b/sw.js @@ -0,0 +1,202 @@ + + +console.log('SERVICE WORKER: executing.'); + +/* A version number is useful when updating the worker logic, + allowing you to remove outdated cache entries during the update. +*/ +var version = 'v1::'; + +/* These resources will be downloaded and cached by the service worker + during the installation process. If any resource fails to be downloaded, + then the service worker won't be installed either. +*/ +var offlineFiles = [ + '', + 'icon192.png', + 'icon512.png', + 'index.html', + 'main.css', + 'main.js' +]; + +/* The install event fires when the service worker is first installed. + You can use this event to prepare the service worker to be able to serve + files while visitors are offline. +*/ +self.addEventListener("install", function(event) { + console.log('WORKER: install event in progress.'); + /* Using event.waitUntil(p) blocks the installation process on the provided + promise. If the promise is rejected, the service worker won't be installed. + */ + event.waitUntil( + /* The caches built-in is a promise-based API that helps you cache responses, + as well as finding and deleting them. + */ + caches + /* You can open a cache by name, and this method returns a promise. We use + a versioned cache name here so that we can remove old cache entries in + one fell swoop later, when phasing out an older service worker. + */ + .open(version + 'fundamentals') + .then(function(cache) { + /* After the cache is opened, we can fill it with the offline fundamentals. + The method below will add all resources in `offlineFiles` to the + cache, after making requests for them. + */ + return cache.addAll(offlineFiles); + }) + .then(function() { + console.log('WORKER: install completed'); + }) + ); +}); + +/* The fetch event fires whenever a page controlled by this service worker requests + a resource. This isn't limited to `fetch` or even XMLHttpRequest. Instead, it + comprehends even the request for the HTML page on first load, as well as JS and + CSS resources, fonts, any images, etc. +*/ +self.addEventListener("fetch", function(event) { + console.log('WORKER: fetch event in progress.'); + + /* We should only cache GET requests, and deal with the rest of method in the + client-side, by handling failed POST,PUT,PATCH,etc. requests. + */ + if (event.request.method !== 'GET') { + /* If we don't block the event as shown below, then the request will go to + the network as usual. + */ + console.log('WORKER: fetch event ignored.', event.request.method, event.request.url); + return; + } + /* Similar to event.waitUntil in that it blocks the fetch event on a promise. + Fulfillment result will be used as the response, and rejection will end in a + HTTP response indicating failure. + */ + event.respondWith( + caches + /* This method returns a promise that resolves to a cache entry matching + the request. Once the promise is settled, we can then provide a response + to the fetch request. + */ + .match(event.request) + .then(function(cached) { + /* Even if the response is in our cache, we go to the network as well. + This pattern is known for producing "eventually fresh" responses, + where we return cached responses immediately, and meanwhile pull + a network response and store that in the cache. + + Read more: + https://ponyfoo.com/articles/progressive-networking-serviceworker + */ + var networked = fetch(event.request) + // We handle the network request with success and failure scenarios. + .then(fetchedFromNetwork, unableToResolve) + // We should catch errors on the fetchedFromNetwork handler as well. + .catch(unableToResolve); + + /* We return the cached response immediately if there is one, and fall + back to waiting on the network as usual. + */ + console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url); + return cached || networked; + + function fetchedFromNetwork(response) { + /* We copy the response before replying to the network request. + This is the response that will be stored on the ServiceWorker cache. + */ + var cacheCopy = response.clone(); + + console.log('WORKER: fetch response from network.', event.request.url); + + caches + // We open a cache to store the response for this request. + .open(version + 'pages') + .then(function add(cache) { + /* We store the response for this request. It'll later become + available to caches.match(event.request) calls, when looking + for cached responses. + */ + return cache.put(event.request, cacheCopy); + }) + .then(function() { + console.log('WORKER: fetch response stored in cache.', event.request.url); + }); + + // Return the response so that the promise is settled in fulfillment. + return response; + } + + /* When this method is called, it means we were unable to produce a response + from either the cache or the network. This is our opportunity to produce + a meaningful response even when all else fails. It's the last chance, so + you probably want to display a "Service Unavailable" view or a generic + error response. + */ + function unableToResolve () { + /* There's a couple of things we can do here. + - Test the Accept header and then return one of the `offlineFiles` + e.g: `return caches.match('/some/cached/image.png')` + - You should also consider the origin. It's easier to decide what + "unavailable" means for requests against your origins than for requests + against a third party, such as an ad provider. + - Generate a Response programmaticaly, as shown below, and return that. + */ + + console.log('WORKER: fetch request failed in both cache and network.'); + + /* Here we're creating a response programmatically. The first parameter is the + response body, and the second one defines the options for the response. + */ + return new Response('

Service Unavailable

', { + status: 503, + statusText: 'Service Unavailable', + headers: new Headers({ + 'Content-Type': 'text/html' + }) + }); + } + }) + ); +}); + +/* The activate event fires after a service worker has been successfully installed. + It is most useful when phasing out an older version of a service worker, as at + this point you know that the new worker was installed correctly. In this example, + we delete old caches that don't match the version in the worker we just finished + installing. +*/ +self.addEventListener("activate", function(event) { + /* Just like with the install event, event.waitUntil blocks activate on a promise. + Activation will fail unless the promise is fulfilled. + */ + console.log('WORKER: activate event in progress.'); + + event.waitUntil( + caches + /* This method returns a promise which will resolve to an array of available + cache keys. + */ + .keys() + .then(function (keys) { + // We return a promise that settles when all outdated caches are deleted. + return Promise.all( + keys + .filter(function (key) { + // Filter by keys that don't start with the latest version prefix. + return !key.startsWith(version); + }) + .map(function (key) { + /* Return a promise that's fulfilled + when each outdated cache is deleted. + */ + return caches.delete(key); + }) + ); + }) + .then(function() { + console.log('WORKER: activate completed.'); + }) + ); +}); \ No newline at end of file