Merge pull request 'Add Offline Page' (#57) from Korbs/poketube:main into main

Reviewed-on: https://codeberg.org/Ashley/poke/pulls/57
This commit is contained in:
Ashley 2023-12-15 05:29:53 +00:00
commit 6b0bf898e6
9 changed files with 127 additions and 8 deletions

View file

@ -93,3 +93,9 @@ a {
</div> </div>
</body> </body>
</html> </html>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>

View file

@ -1417,3 +1417,8 @@ document.getElementById('search').addEventListener('keyup', function () {
<% } catch (error) { %> <% } catch (error) { %>
<% } %> <% } %>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>

View file

@ -109,3 +109,8 @@ body {
</div> </div>
</body> </body>
</html> </html>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>

View file

@ -3131,3 +3131,9 @@ window.addEventListener('load', () => {
<% } catch (error) { %> <% } catch (error) { %>
<%- error %> <%- error %>
<% } %> <% } %>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>

View file

@ -469,4 +469,8 @@ Web
</body> </body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>

View file

@ -578,4 +578,8 @@ font-weight: 1000;
</body> </body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>

47
pwa/offline.html Normal file
View file

@ -0,0 +1,47 @@
<!--
This Source Code Form is subject to the terms of the GNU General Public License:
Copyright (C) 2021-2023 POKETUBE (https://codeberg.org/Ashley/poketube)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/.
-->
<!DOCTYPE html><html>
<head>
<title>PokeTube</title>
</head>
<body>
<div id="error-page">
<div id="error-page-content" align="center">
<h1 style="color:#fff;font-family:'PokeTube Flex',sans-serif;font-weight:900;white-space:yes;font-style: italic;font-size: 45px;" align="center">Oh no ;-;</h1>
<h3>Looks like you're offline, check your internet connection and try again.</h3>
</div>
</div>
</body>
</html>
<style>
body{
background:#111;
margin: auto;
transform: translateY(13em)
}
p,a,h3{
text-align:center;
color:#fff;
}
nav,error-page,div{
justify-content: center;
background: #111
}
</style>

34
pwa/service-worker.js Normal file
View file

@ -0,0 +1,34 @@
'use strict';
var cacheVersion = 1;
var currentCache = {
offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline';
this.addEventListener('install', event => {
event.waitUntil(
caches.open(currentCache.offline).then(function (cache) {
return cache.addAll([
offlineUrl
]);
})
);
});
this.addEventListener('fetch', event => {
if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
event.respondWith(
fetch(event.request.url).catch(error => {
return caches.match(offlineUrl);
})
);
}
else {
event.respondWith(caches.match(event.request)
.then(function (response) {
return response || fetch(event.request);
})
);
}
});

View file

@ -87,10 +87,18 @@ module.exports = function (app, config, renderTemplate) {
renderTemplate(res, req, "content-settings.ejs"); renderTemplate(res, req, "content-settings.ejs");
}); });
app.get("/offline", function (req, res) {
res.sendFile("offline.html", { root: location_pwa });
});
app.get("/manifest.json", function (req, res) { app.get("/manifest.json", function (req, res) {
res.sendFile("manifest.json", { root: location_pwa }); res.sendFile("manifest.json", { root: location_pwa });
}); });
app.get("/service-worker.js", function (req, res) {
res.sendFile("service-worker.js", { root: location_pwa });
});
app.get("/customize", function (req, res) { app.get("/customize", function (req, res) {
const tab = req.query.tab; const tab = req.query.tab;