Use static error files in serviceworker (#11806)
* Use static error files in serviceworker * Bump static cache version
This commit is contained in:
Ben Halpern
GitHub
parent
bae2571ad6
commit
2c96c14021
3 changed files with 187 additions and 5 deletions
|
|
@ -1,6 +1,6 @@
|
|||
// Serviceworkers file. This code gets installed in users browsers and runs code before the request is made.
|
||||
<% unless Rails.env.test? || ENV["SKIP_SERVICEWORKERS"] == "true" %>
|
||||
const staticCacheName = 'static-1.2';
|
||||
const staticCacheName = 'static-1.3';
|
||||
const expectedCaches = [
|
||||
staticCacheName
|
||||
];
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
"/shell_top", // head, top bar, inline styles
|
||||
"/shell_bottom", // footer
|
||||
"/async_info/shell_version", // For comparing changes in the shell. Should be incremented with style changes.
|
||||
"/404", // Not found page
|
||||
"/500", // Error page
|
||||
"/not_found.html", // 404 etc.
|
||||
"/error.html", // 500 etc.
|
||||
"/offline.html" // Offline page
|
||||
]))
|
||||
);
|
||||
|
|
@ -54,10 +54,10 @@
|
|||
const endFetch = Promise.resolve(cachedShellBottom);
|
||||
const middleFetch = fetch(url).then(response => {
|
||||
if (!response.ok && response.status === 404) {
|
||||
return caches.match('/404');
|
||||
return caches.match('/not_found.html');
|
||||
}
|
||||
if (!response.ok && response.status != 404) {
|
||||
return caches.match('/500');
|
||||
return caches.match('/error.html');
|
||||
}
|
||||
return response;
|
||||
}).catch(err => caches.match('/offline.html'));
|
||||
|
|
|
|||
81
public/error.html
Normal file
81
public/error.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>We're sorry, but something went wrong (500)</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
}
|
||||
.unhandled-error-page {
|
||||
height: 100vh;
|
||||
min-height: 550px;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
.dialog{
|
||||
background:rgb(236, 236, 236);
|
||||
border:2px solid rgb(217, 217, 217);
|
||||
text-align:center;
|
||||
padding:30px 0px;
|
||||
margin:5% auto;
|
||||
width:80%;
|
||||
max-width:580px;
|
||||
min-width:315px;
|
||||
color:rgb(44, 46, 50);
|
||||
border-radius:8px;
|
||||
min-height: 500px;
|
||||
}
|
||||
textarea{
|
||||
width:75%;
|
||||
height:100px;
|
||||
border:1px solid rgb(182, 182, 182);
|
||||
border-radius:3px;
|
||||
padding:8px;
|
||||
font-size:14px;
|
||||
}
|
||||
.actions{
|
||||
text-align: center;
|
||||
}
|
||||
.g-recaptcha{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
}
|
||||
input[type="submit"]{
|
||||
width:150px;
|
||||
padding:10px;
|
||||
background:rgb(12, 181, 140);
|
||||
color:white;
|
||||
border:0px;
|
||||
border-radius:3px;
|
||||
font-size:15px;
|
||||
margin-top:5px;
|
||||
cursor:pointer;
|
||||
}
|
||||
img{
|
||||
max-width:100%;
|
||||
height:200px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
<script src='https://www.google.com/recaptcha/api.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="unhandled-error-page base-background-color">
|
||||
<div class="dialog">
|
||||
<div>
|
||||
<img alt="500 error" src="https://media.giphy.com/media/SX9TFmjF0eChq/200.gif" height="200" />
|
||||
<h1>Ooooops...</h1>
|
||||
<h2>You have encountered an error.</h2>
|
||||
</div>
|
||||
|
||||
<p style="margin: 10%">
|
||||
Our team has been notified.
|
||||
<br><br />
|
||||
We apologize for any inconvenience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
101
public/not_found.html
Normal file
101
public/not_found.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The page you were looking for doesn't exist (404)</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<style>
|
||||
.not-found-page {
|
||||
height: 100vh;
|
||||
min-height: 500px;
|
||||
}
|
||||
.tv__outer {
|
||||
display: table;
|
||||
position: absolute;
|
||||
height: 98%;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.tv__middle {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tv__inner {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.tv__inner--special {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
-webkit-animation-name: fade;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-name: fade;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.tv__inner--text {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: table;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tv__inner--special, .tv__inner {
|
||||
max-width: 85%;
|
||||
width: 300px;
|
||||
border: 25px solid rgb(54, 55, 124);
|
||||
border-radius: 36px;
|
||||
}
|
||||
.tv__inner--text {
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
0% {opacity: 1;}
|
||||
10% {opacity: 1;}
|
||||
20% {opacity: 0;}
|
||||
25% {opacity: 0;}
|
||||
28% {opacity: 0;}
|
||||
30% {opacity: 0;}
|
||||
33% {opacity: 1;}
|
||||
45% {opacity: 1;}
|
||||
53% {opacity: 0;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {opacity: 1;}
|
||||
10% {opacity: 1;}
|
||||
20% {opacity: 0;}
|
||||
25% {opacity: 0;}
|
||||
28% {opacity: 0;}
|
||||
30% {opacity: 0;}
|
||||
33% {opacity: 1;}
|
||||
45% {opacity: 1;}
|
||||
53% {opacity: 0;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="not-found-page base-background-color">
|
||||
<div class="tv__outer">
|
||||
<div class="tv__middle">
|
||||
<img class="tv__inner" src="https://i.imgur.com/AdvTDlI.jpg" alt="404 not found">
|
||||
<br>
|
||||
<p class="tv__inner--text">This page does not exist <br><br> <a href="/">Return to Home Page</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue