Create new offline page (#463)
* Update offline.html * Update serviceworker.js.erb
This commit is contained in:
Ali Spittel
Ben Halpern
parent
c50ac78c4b
commit
f509607eb9
2 changed files with 233 additions and 67 deletions
|
|
@ -1,4 +1,4 @@
|
|||
var CACHE_VERSION = 'v2.6.1';
|
||||
var CACHE_VERSION = 'v2.6.2';
|
||||
var CACHE_NAME = CACHE_VERSION + ':sw-cache::';
|
||||
var REQUESTS_LIMIT = 70;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>You are not connected to the Internet</title>
|
||||
<meta property="og:url" content="https://dev.to/offline.html" />
|
||||
<meta property="og:title" content="Looks like you've lost your Internet connection" />
|
||||
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/qe1hvc8slxp6bepk9rzc.png" />
|
||||
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/aio6nc08tpcqavej512d.png" />
|
||||
<meta property="og:description" content="Maybe you could go outside and get some fresh air." />
|
||||
<meta property="og:site_name" content="The DEV Community" />
|
||||
|
||||
|
|
@ -12,84 +12,250 @@
|
|||
<meta name="twitter:site" content="@ThePracticalDev">
|
||||
<meta name="twitter:title" content="Looks like you've lost your Internet connection">
|
||||
<meta name="twitter:description" content="Maybe you could go outside and get some fresh air.">
|
||||
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/qe1hvc8slxp6bepk9rzc.png">
|
||||
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/aio6nc08tpcqavej512d.png">
|
||||
|
||||
<style>
|
||||
body{
|
||||
text-align:center;
|
||||
color:white;
|
||||
background: #050505;
|
||||
font-size:calc(1em + 0.3vw);
|
||||
html,
|
||||
body,
|
||||
canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-family: Helvetica;
|
||||
user-select: none;
|
||||
}
|
||||
.container{
|
||||
width:92%;
|
||||
max-width:666px;
|
||||
margin:4vh auto;
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: #444444;
|
||||
}
|
||||
img{
|
||||
max-width:100%;
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
h1{
|
||||
font-weight:400;
|
||||
margin:0;
|
||||
padding:1em 0px;
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
img.devlogo{
|
||||
height:calc(40px + 2vh);
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
img.wires{
|
||||
height:298px;
|
||||
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
path {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
margin: 40px 20px;
|
||||
}
|
||||
|
||||
.colors {
|
||||
z-index: 2;
|
||||
margin: 0 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.color:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.color:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.rainbow-logo {
|
||||
border-radius: 10%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.signature {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 700px) {
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.color {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.signature {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color:white;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
async function findImage(filename) {
|
||||
// Get a list of all of the caches for this origin
|
||||
const cacheNames = await caches.keys();
|
||||
let result = '';
|
||||
|
||||
for (const name of cacheNames) {
|
||||
// Open the cache
|
||||
const cache = await caches.open(name);
|
||||
// Get a list of entries. Each item is a Request object
|
||||
for (const request of await cache.keys()) {
|
||||
// If the request URL matches, add the response to the result
|
||||
if (request.url.includes(filename)) {
|
||||
result = request.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
findImage('devword')
|
||||
.then((imageURL) => {
|
||||
document.querySelector('.devlogo').src = imageURL;
|
||||
});
|
||||
findImage('wires')
|
||||
.then((imageURL) => {
|
||||
document.querySelector('.wires').src = imageURL;
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- This file lives in public/offline.html -->
|
||||
<div class="container">
|
||||
<div>
|
||||
<a href="/"><img class="devlogo" src=""/></a>
|
||||
<h1>It looks like you've lost your Internet connection.</h1>
|
||||
<img class="wires" src="" />
|
||||
<p>But you probably already knew that.</p>
|
||||
<p>
|
||||
Either way, it's a good opportunity to show you this cool offline page made with service workers, indicating just how cutting-edge we are over here at <a href="/">dev.to</a>.
|
||||
</p>
|
||||
<p>This must be frustrating, but to put it in context, Trump's still president, so a poor Internet connection can't be so bad, right? On the other hand, you don't have access to the Internet, so maybe he's been impeached by now, for all you know.
|
||||
<p>Have a nice day either way. Maybe you can go play outside, some fresh air could do you good. <3</p>
|
||||
</div>
|
||||
<canvas></canvas>
|
||||
<div class="content">
|
||||
<svg viewBox="0 0 235 234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="rainbow-logo"
|
||||
preserveAspectRatio="xMinYMin meet">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="80K">
|
||||
<polygon id="Shape" fill="#88AEDC" points="234.04 175.67 158.35 233.95 205.53 233.95 234.04 212"></polygon>
|
||||
<polygon id="Shape" points="234.04 140.06 112.11 233.95 112.13 233.95 234.04 140.08"></polygon>
|
||||
<polygon id="Shape" points="133.25 0.95 0.04 103.51 0.04 103.53 133.27 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F58F8E" fill-rule="nonzero" points="0.04 0.95 0.04 31.11 39.21 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#FEE18A" fill-rule="nonzero" points="39.21 0.95 0.04 31.11 0.04 67.01 85.84 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F3F095" fill-rule="nonzero" points="85.84 0.95 0.04 67.01 0.04 103.51 133.25 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#55C1AE" fill-rule="nonzero" points="133.27 0.95 0.04 103.53 0.04 139.12 179.49 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero" points="234.04 0.95 226.67 0.95 0.04 175.45 0.04 211.38 234.04 31.2"></polygon>
|
||||
<polygon id="Shape" fill="#88AEDC" fill-rule="nonzero" points="179.49 0.95 0.04 139.12 0.04 175.45 226.67 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F58F8E" fill-rule="nonzero" points="234.04 31.2 0.04 211.38 0.04 233.95 18.07 233.95 234.04 67.65"></polygon>
|
||||
<polygon id="Shape" fill="#FEE18A" fill-rule="nonzero" points="234.04 67.65 18.07 233.95 64.7 233.95 234.04 103.56"></polygon>
|
||||
<polygon id="Shape" fill="#F3F095" fill-rule="nonzero" points="234.04 103.56 64.7 233.95 112.11 233.95 234.04 140.06"></polygon>
|
||||
<polygon id="Shape" fill="#55C1AE" fill-rule="nonzero" points="234.04 140.08 112.13 233.95 158.35 233.95 234.04 175.67"></polygon>
|
||||
<polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero" points="234.04 212 205.53 233.95 234.04 233.95"></polygon>
|
||||
<g id="Group" transform="translate(37.000000, 77.000000)" fill="#FFFFFF">
|
||||
<path d="M28.2371517,0.75 C32.7510836,1.7 36.0111455,3.55 39.371517,7.05 C42.4309598,10.25 44.3368421,13.9 45.1393189,18 C45.7913313,21.45 45.7913313,58.55 45.1393189,62.05 C43.4340557,71.15 35.6600619,78.25 26.0303406,79.5 C24.0241486,79.75 17.3034056,80 11.1845201,80 L-7.10542736e-15,80 L-7.10542736e-15,1.42108547e-14 L12.4383901,1.42108547e-14 C21.2656347,1.42108547e-14 25.7795666,0.2 28.2371517,0.75 Z M14.5448916,40 L14.5448916,65.6 L19.7108359,65.4 C24.174613,65.25 25.1275542,65.05 27.1337461,63.9 C31.0458204,61.6 31.0959752,61.45 31.0959752,39.7 C31.0959752,18.5 31.0959752,18.5 27.4346749,16.1 C25.6291022,14.9 24.8767802,14.75 19.9616099,14.55 L14.5448916,14.4 L14.5448916,40 Z"
|
||||
id="Combined-Shape"></path>
|
||||
<path d="M93.7894737,7.25 L93.7894737,14.5 L68.2105263,14.5 L68.2105263,32.5 L83.7585139,32.5 L83.7585139,47 L68.2105263,47 L68.3108359,56.1 L68.4613003,65.25 L81.1504644,65.4 L93.7894737,65.5 L93.7894737,80 L78.993808,80 C62.5430341,80 59.9851393,79.7 57.3770898,77.4 C53.7157895,74.2 53.9164087,76.25 53.7659443,41.1 C53.6656347,19.2 53.8160991,8.85 54.1671827,7.45 C54.8693498,4.85 57.828483,1.65 60.4365325,0.75 C61.9913313,0.2 65.9034056,0.05 78.1411765,4.26325641e-14 L93.7894737,4.26325641e-14 L93.7894737,7.25 Z"
|
||||
id="Path"></path>
|
||||
<path d="M125.437152,28.1 C129.148607,42.35 132.258204,53.7 132.358514,53.35 C132.508978,53 135.668731,40.95 139.430341,26.5 L146.301548,0.25 L154.125697,0.1 C160.043963,7.10542736e-15 162,0.15 162,0.6 C162,1.05 144.64644,66.8 143.643344,70.1 C142.941176,72.4 139.179567,77.1 137.073065,78.35 C134.414861,79.85 130.502786,80.1 128.095356,78.85 C125.9387,77.75 123.079876,74.45 121.625387,71.35 C120.722601,69.45 105.97709,15.35 102.566563,1.35 L102.21548,0 L110.039628,0 C117.713313,0 117.913932,0 118.31517,1.1 C118.515789,1.75 121.725697,13.9 125.437152,28.1 Z"
|
||||
id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<h2> So, there's good news and bad news</h2>
|
||||
<h3>Bad news: It looks like you're offline</h3>
|
||||
<h3>Good news: You can draw a picture anywhere on this page while you wait to get it back!</h3>
|
||||
<h4>(pick a color below && start drawing!)</h4>
|
||||
</div>
|
||||
<div class="colors">
|
||||
</div>
|
||||
<svg width="75px" height="75px" viewBox="0 0 266 286" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class="signature">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard-3" transform="translate(-66.000000, -39.000000)" stroke="#F4908E" stroke-width="8">
|
||||
<g id="Group" transform="translate(70.000000, 44.000000)">
|
||||
<path d="M137.947881,11.0969119 C120.236214,10.7929621 127.259584,-4.63518682 110.600707,1.39809583 C98.4900537,5.78416547 5.38963223,31.9682026 1.99251552,84.34539 C0.138615017,112.929069 -0.563473858,141.639852 0.495802997,170.264134 C0.973626724,183.176113 16.3154795,204.585393 22.2134768,211.816457 C35.0843735,227.596436 61.6452079,206.201192 70.9197071,196.000824 C104.380023,159.200179 133.244668,118.47588 137.947881,67.1534449 C138.600896,60.027607 145.952931,5.41350351 126.011684,11.0969119 C112.376346,14.9830876 103.436568,65.3726702 102.950719,78.3517738 C101.357143,120.922959 86.4228272,211.00328 146.955431,222.813291 C172.852291,227.865812 169.286943,226.931981 192,226.931981"
|
||||
id="Path-2"></path>
|
||||
<path d="M80,277.169785 C120.408772,252.192233 121.434199,237.685468 133.304963,222.650446 C151.591469,199.489509 173.572805,172.509583 233.39048,84.1055622 C240.794147,73.1637472 242.286005,30.9559106 238.678367,28.2608272 C236.630233,26.7307705 219.030597,13.826187 211.887732,18.9306581 C202.734845,25.4715418 203.241886,57.600262 203.223682,60.0372493 C203.010014,88.6406571 203.914879,117.248834 205.052575,145.830265 C206.126657,172.81357 211.080162,198.940616 208.995298,226.072378 C206.84232,254.090552 155.519583,271.514023 133.304963,268.076421 C126.954422,267.093706 93.5574761,243.825981 102.987596,240.93683 C113.776095,237.631506 146.615548,245.587641 160.390474,240.93683 C174.165399,236.286019 182.361602,234.057591 192.833448,229.336442 C203.454817,224.547881 249.685075,198.800486 259.8975,193.187538"
|
||||
id="Path-3"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<script type="text/javascript">
|
||||
const canvas = document.querySelector('canvas')
|
||||
const context = canvas.getContext('2d')
|
||||
const colors = ["#F4908E", "#F2F097", "#88B0DC", "#F7B5D1", "#53C4AF", "#FDE38C"]
|
||||
const colorDiv = document.querySelector(".colors")
|
||||
|
||||
colors.forEach(color => {
|
||||
const button = document.createElement("button")
|
||||
button.classList.add("color")
|
||||
button.style.backgroundColor = color
|
||||
colorDiv.appendChild(button)
|
||||
button.addEventListener('click', () => context.strokeStyle = color)
|
||||
})
|
||||
|
||||
const setSize = () => {
|
||||
// set dimensions on the canvas
|
||||
canvas.setAttribute('width', window.innerWidth)
|
||||
canvas.setAttribute('height', window.innerHeight)
|
||||
context.strokeStyle = colors[0]
|
||||
context.lineJoin = "round"
|
||||
context.lineWidth = 5
|
||||
}
|
||||
|
||||
setSize()
|
||||
|
||||
window.addEventListener("resize", setSize)
|
||||
|
||||
let firstX, firstY, secondX, secondY, paint
|
||||
|
||||
function getCoordinates(event) {
|
||||
// check to see if mobile or desktop
|
||||
if (["mousedown", "mousemove"].includes(event.type)) {
|
||||
// click events
|
||||
return [event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop]
|
||||
} else {
|
||||
// touch coordinates
|
||||
return [event.touches[0].pageX - canvas.offsetLeft, event.touches[0].pageY - canvas.offsetTop]
|
||||
}
|
||||
}
|
||||
|
||||
function addClick(event, canvas) {
|
||||
let [x, y] = getCoordinates(event)
|
||||
|
||||
secondX = firstX
|
||||
secondY = firstY
|
||||
firstX = x
|
||||
firstY = y
|
||||
}
|
||||
|
||||
function draw() {
|
||||
context.beginPath()
|
||||
context.moveTo(secondX, secondY)
|
||||
context.lineTo(firstX, firstY)
|
||||
context.closePath()
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
function startPaint(e) {
|
||||
addClick(event, this)
|
||||
paint = true
|
||||
}
|
||||
|
||||
function endPaint(e) {
|
||||
if (paint) {
|
||||
addClick(event, this)
|
||||
draw()
|
||||
}
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', startPaint)
|
||||
canvas.addEventListener('touchstart', startPaint)
|
||||
|
||||
const exit = _ => {
|
||||
paint = false
|
||||
firstX = null
|
||||
firstY = null
|
||||
}
|
||||
|
||||
canvas.addEventListener('mouseup', exit)
|
||||
canvas.addEventListener('mouseleave', exit)
|
||||
canvas.addEventListener('touchend', exit)
|
||||
|
||||
canvas.addEventListener('mousemove', endPaint)
|
||||
canvas.addEventListener('touchmove', endPaint)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue