From 8b6b441edc5ef4f3448d4e0ae5adbaa6af321ef7 Mon Sep 17 00:00:00 2001 From: Josef Citrine Date: Thu, 2 Jun 2016 20:58:29 +0100 Subject: [PATCH] Updated offline mode with a basic offline page --- public/manifest.json | 2 + public/offline.html | 59 ++++++++++ public/service-worker.js | 51 +++++---- public/styles/offline.css | 232 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 325 insertions(+), 19 deletions(-) create mode 100644 public/offline.html create mode 100644 public/styles/offline.css diff --git a/public/manifest.json b/public/manifest.json index 0e256ba4..133c8434 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -18,6 +18,8 @@ "type": "image/png" } ], + "theme_color": "#84528A", + "background_color": "#EEE", "start_url": "/", "display": "standalone", "orientation": "portrait" diff --git a/public/offline.html b/public/offline.html new file mode 100644 index 00000000..0961b769 --- /dev/null +++ b/public/offline.html @@ -0,0 +1,59 @@ + + + + + + + + Pony.fm - Unlimited Pony Music Hosting + + + + + + + + + +
+
+ +
+
+
+
+ +
+

No connection :(

+

Pony.fm needs an internet connection to work

+
+
+ + \ No newline at end of file diff --git a/public/service-worker.js b/public/service-worker.js index 5f0a0d39..0e24768e 100644 --- a/public/service-worker.js +++ b/public/service-worker.js @@ -14,34 +14,47 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -var urlsToCache = [ - '/', - '/build/styles/app.css', - '/build/scripts/app.js', - '/build/scripts/templates.js', - '/templates/directives/player.html', - '/templates/directives/search.html', - '/templates/directives/tracks-list.html', - '/templates/directives/users-list.html', - '/templates/directives/albums-list.html', - '/templates/directives/playlists-list.html', - '/templates/home/index.html', +var urlsToCache = [ + '/offline.html', + '/styles/offline.css', + '/images/ponyfm-logo-white.svg' ]; -var CACHE_NAME = 'pfm-cache-v1'; +var CACHE_NAME = 'pfm-offline-v1'; // Set the callback for the install step self.addEventListener('install', function(event) { - // Doesn't do anything right now - // Could never get offline to fully - // work without bugs :( - // Perform install steps event.waitUntil( caches.open(CACHE_NAME) - .then(function(cache) { - console.log('Opened cache'); + .then(function(cache) { + cache.addAll(urlsToCache); }) ); }); + +// Delete old caches +self.addEventListener('activate', function (event) { + event.waitUntil(caches.keys().then(function (cacheNames) { + return Promise.all(cacheNames.map(function (cacheName) { + if (cacheName != CACHE_NAME) { + return caches.delete(cacheName); + } + })); + })); +}); + +// Basic offline mode +// Just respond with an offline error page for now +self.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request).then(function(response) { + return response || fetch(event.request); + }).catch(function () { + if (event.request.mode == 'navigate') { + return caches.match('/offline.html'); + } + }) + ) +}); diff --git a/public/styles/offline.css b/public/styles/offline.css new file mode 100644 index 00000000..e473da5b --- /dev/null +++ b/public/styles/offline.css @@ -0,0 +1,232 @@ +/* + * Pony.fm - A community for pony fan music. + * Copyright (C) 2016 Josef Citrine + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero 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 Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +* { + box-sizing: border-box; +} +html { + font-family: sans-serif; + font-size: 10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +html, +body { + height: 100%; + font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + overflow: hidden; + padding: 0px !important; + background: rgb(68, 68, 68); +} +body { + margin: 0px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857; + color: rgb(51, 51, 51); + background-color: rgb(255, 255, 255); +} +article, aside, details, figcaption, figure, footer, +header, hgroup, main, menu, nav, section, summary { + display: block; +} +.mobile-header { + display: none; +} +a { + background-color: transparent; + color: rgb(194, 136, 156); + text-decoration: none; +} +img { + border: 0px; + vertical-align: middle; +} +.now-playing { + margin-left: 160px; + height: 64px; + position: relative; + z-index: 500; + border-bottom: 1px solid rgb(188, 188, 188); + background: rgb(255, 255, 255); +} +ul, +ol { + margin-top: 0px; + margin-bottom: 10px; +} +.sidebar { + width: 160px; + height: 100%; + list-style: none; + padding: 0px; + margin: 0px; + font-size: 10pt; + position: absolute; + bottom: 0px; + left: 0px; + background: rgb(81, 81, 81); +} +.sidebar > a { + display: block; + float: left; + width: 160px; + height: 64px; + line-height: 42px; + color: rgb(255, 255, 255); + font-size: 24pt; + font-weight: lighter; + z-index: 600; + font-family: "Josefin Sans", sans-serif; + position: relative; + background: rgb(132, 82, 138); +} +.sidebar > a img.logo { + padding-left: 6px; + width: 100%; + max-width: 94%; + padding-top: 13px; +} +.sidebar li { + margin: 0px; + padding: 0px; + line-height: normal; +} +.sidebar li.x-attribution { + position: absolute; + bottom: 0px; + max-width: 100%; + margin: 0px; + padding: 0px; + text-align: right; +} +.sidebar li > a { + display: block; + padding: 10px 0px 10px 25px; + overflow: hidden; + color: rgba(255, 255, 255, 0.8); +} +.sidebar li.x-attribution a { + padding: 10px; +} +.sidebar li.x-attribution span { + font-size: 90%; + text-transform: lowercase; + margin: 7px 0px; + display: block; +} +.sidebar li.x-attribution img { + width: 100%; +} +.site-content { + overflow: hidden; + margin-left: 160px; + height: 100%; + z-index: 100; + background: rgb(255, 255, 255); + box-sizing: border-box; + padding: 10px; +} +h1 { + font-size: 2em; + margin: 0.67em 0px; +} +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} +h1, .h1, h2, .h2, h3, .h3 { + margin-top: 20px; + margin-bottom: 10px; +} +h1, .h1 { + font-size: 36px; +} +.site-content h1, .site-content h2 { + margin: 1px 1px 5px; + font-size: 15pt; + color: rgb(194, 136, 156); + line-height: normal; + overflow: hidden; + font-weight: normal; +} +.offline h1 { + font-size: 2.7em; + text-align: center; + margin-top: 20px; +} +p { + margin: 0px 0px 10px; +} +.offline p { + text-align: center; + font-size: 1.2em; + margin-top: 10px; +} +.site-body { + height: calc(100% - 64px); +} +@media only screen and (max-width: 768px) { + .mobile-header { + display: block!important; + position: absolute; + z-index: 1001; + background: #84528A; + height: 64px; + width: 100%; + top: 0; + } + .mobile-header .logo { + text-align: center; + vertical-align: middle; + display: block; + margin-left: auto; + margin-right: auto; + height: 50px; + width: 160px; + padding-top: 16px; + } + .mobile-header .logo>img { + max-height: 90%; + } + .now-playing { + margin-left: 0; + position: fixed; + width: 100%; + bottom: 0; + z-index: 1010; + box-shadow: 0 0 8px rgba(0,0,0,.5); + } + .track-player { + margin-right: 0!important; + padding: 5px 10px; + } + .sidebar { + display: none; + } + .site-content { + margin-left: 0; + overflow: scroll; + padding: 5px; + } + .site-body { + padding-top: 64px; + } +} \ No newline at end of file