From a4dcf5f8dfda5367476fded05402a2c2e65244cd Mon Sep 17 00:00:00 2001 From: paweldomas Date: Mon, 12 Dec 2016 15:52:01 -0600 Subject: [PATCH 1/6] feat(index.html): reload when resource fails to load The page will be reloaded if any of the mandatory scripts/resources fails to load. The reload will be delayed with exponential backoff starting from 2 seconds. The retry attempt counter is passed as 'rCounter' query attribute. --- index.html | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f088a91ac..7fe77016f 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,41 @@ window.onload = function() { document.body.innerHTML = "The application failed to load, missing file: " - + fileRef; + + fileRef; + + // The whole complex part below implements page reloads with + // "exponential backoff". The retry attempt is passes as + // "rCounter" query parameter + var href = window.location.href; + + var retryMatch = href.match(/.+(\?|&)rCounter=(\d+)/); + var retryCountStr = retryMatch ? retryMatch[2] : "0"; + var retryCount = Number.parseInt(retryCountStr); + + if (retryMatch == null) { + var separator = href.indexOf("?") === -1 ? "?" : "&"; + var hashIdx = href.indexOf("#"); + + if (hashIdx === -1) { + href += separator + "rCounter=1"; + } else { + var hashPart = href.substr(hashIdx); + + href = href.substr(0, hashIdx) + + separator + "rCounter=1" + hashPart; + } + } else { + var separator = retryMatch[1]; + + href = href.replace( + /(\?|&)rCounter=(\d+)/, + separator + "rCounter=" + (retryCount + 1)); + } + + var delay = Math.pow(2, retryCount) * 2000; + + window.setTimeout( + function () { window.location.replace(href); }, delay); }; window.removeEventListener( 'error', loadErrHandler, true /* capture phase */); From d9017b2665ed56329480bd0fe7f3f0c7f785898b Mon Sep 17 00:00:00 2001 From: paweldomas Date: Tue, 13 Dec 2016 07:33:27 -0600 Subject: [PATCH 2/6] feat(index.html): update "failed to load the page" msg Also adds a link to reload manually. --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 7fe77016f..6ae5bf78a 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,10 @@ var delay = Math.pow(2, retryCount) * 2000; + document.body.innerHTML += + "
The page will reload shortly... " + + "(reload)"; + window.setTimeout( function () { window.location.replace(href); }, delay); }; From 7e22f9c57b82217da52218148b9c587bed4d0333 Mon Sep 17 00:00:00 2001 From: paweldomas Date: Tue, 13 Dec 2016 13:53:28 -0600 Subject: [PATCH 3/6] feat(index.html): hide the missing filename by default --- index.html | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 6ae5bf78a..fc74f1676 100644 --- a/index.html +++ b/index.html @@ -28,10 +28,6 @@ && criticalFiles.some( function(file) { return fileRef.indexOf(file) !== -1 })) { window.onload = function() { - document.body.innerHTML - = "The application failed to load, missing file: " - + fileRef; - // The whole complex part below implements page reloads with // "exponential backoff". The retry attempt is passes as // "rCounter" query parameter @@ -63,9 +59,28 @@ var delay = Math.pow(2, retryCount) * 2000; - document.body.innerHTML += - "
The page will reload shortly... " - + "(reload)"; + document.body.innerHTML + = "
" + + "The application failed to load." + + "more" + + "
" + fileRef + "
" + + "
" + + "The page should reload shortly... " + + "reload" + + "
"; + document.getElementById("showMore") + .addEventListener('click', function () { + document + .getElementById("moreInfo") + .setAttribute("style", "display: block;"); + }); window.setTimeout( function () { window.location.replace(href); }, delay); From 62532b587986475409a671e63c6168dc182b033a Mon Sep 17 00:00:00 2001 From: paweldomas Date: Tue, 13 Dec 2016 13:57:11 -0600 Subject: [PATCH 4/6] feat(index.html): add safeguards to the reload delay value If the page reload value is not within specific range it will be adjusted to a default of 10 seconds. --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index fc74f1676..ce023a50e 100644 --- a/index.html +++ b/index.html @@ -58,6 +58,8 @@ } var delay = Math.pow(2, retryCount) * 2000; + if (isNaN(delay) || delay < 2000 || delay > 60000) + delay = 10000; document.body.innerHTML = "
" - + "The application failed to load." - + "more" - + "
" + fileRef + "
" - + "
" - + "The page should reload shortly... " - + "reload" - + "
"; - document.getElementById("showMore") - .addEventListener('click', function () { - document - .getElementById("moreInfo") - .setAttribute("style", "display: block;"); + + "position: absolute;top: 50%;left: 50%;" + + "text-align: center;" + + "font-size: medium;" + + "font-weight: 400;" + + "transform: translate(-50%, -50%)'>" + + "Uh oh! We couldn't fully download everything we needed :(" // jshint ignore:line + + "
" + + "We will try again shortly. In the mean time, check for problems with your Internet connection!" // jshint ignore:line + + "

" + + "
" + "Missing " + fileRef + + "

" + + "show more" + + "   " + + "reload now" + + ""; + + var showMoreElem = document.getElementById("showMore"); + showMoreElem.addEventListener('click', function () { + var moreInfoElem + = document.getElementById("moreInfo"); + + if (showMoreElem.innerHTML === "show more") { + moreInfoElem.setAttribute( + "style", + "display: block;" + + "color:#FF991F;" + + "font-size:small;" + + "user-select:text;"); + showMoreElem.innerHTML = "show less"; + } + else { + moreInfoElem.setAttribute( + "style", "display: none;"); + showMoreElem.innerHTML = "show more"; + } }); window.setTimeout( From 2785e76e23a7e061e305cc26b359e95845855725 Mon Sep 17 00:00:00 2001 From: yanas Date: Tue, 13 Dec 2016 18:43:45 -0600 Subject: [PATCH 6/6] fix(index.html): minor variable optimisation --- index.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index fdd45c62b..de9e5aad5 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,9 @@ if (isNaN(delay) || delay < 2000 || delay > 60000) delay = 10000; + var showMoreText = "show more"; + var showLessText = "show less"; + document.body.innerHTML = "
show more" + + "cursor: pointer'>" + showMoreText + "" + "   " + "