From 9ab2b08adffbc746d40d8e3ec0affd31e4284210 Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 24 Mar 2021 03:42:33 -0500 Subject: [PATCH] Added desktop PWA support --- stashr/routes.py | 3 + stashr/static/js/service-worker.js | 86 ++++++++++++++++++++++++++++ stashr/static/manifest/manifest.json | 12 +++- stashr/static/offline.html | 10 ++++ stashr/templates/base.html | 8 +++ 5 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 stashr/static/js/service-worker.js create mode 100644 stashr/static/offline.html diff --git a/stashr/routes.py b/stashr/routes.py index a5a7cc3..a626717 100644 --- a/stashr/routes.py +++ b/stashr/routes.py @@ -705,6 +705,9 @@ def custom_image_static(foldername, filename): filename ) +@app.route('/service-worker.js') +def custom_service_worker(): + return app.send_static_file('js/service-worker.js') """------------------------------------------------------------------------------------------- -- DEVELOPMENT diff --git a/stashr/static/js/service-worker.js b/stashr/static/js/service-worker.js new file mode 100644 index 0000000..0a9fdbe --- /dev/null +++ b/stashr/static/js/service-worker.js @@ -0,0 +1,86 @@ +/* +Copyright 2015, 2019, 2020, 2021 Google LLC. All Rights Reserved. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +// Incrementing OFFLINE_VERSION will kick off the install event and force +// previously cached resources to be updated from the network. +const OFFLINE_VERSION = 2; +const CACHE_NAME = "offline"; +// Customize this with a different URL if needed. +const OFFLINE_URL = "/static/offline.html"; + +self.addEventListener("install", (event) => { + event.waitUntil( + (async () => { + const cache = await caches.open(CACHE_NAME); + // Setting {cache: 'reload'} in the new request will ensure that the + // response isn't fulfilled from the HTTP cache; i.e., it will be from + // the network. + await cache.add(new Request(OFFLINE_URL, { cache: "reload" })); + })() + ); + // Force the waiting service worker to become the active service worker. + self.skipWaiting(); +}); + +self.addEventListener("activate", (event) => { + event.waitUntil( + (async () => { + // Enable navigation preload if it's supported. + // See https://developers.google.com/web/updates/2017/02/navigation-preload + if ("navigationPreload" in self.registration) { + await self.registration.navigationPreload.enable(); + } + })() + ); + + // Tell the active service worker to take control of the page immediately. + self.clients.claim(); +}); + +self.addEventListener("fetch", (event) => { + // We only want to call event.respondWith() if this is a navigation request + // for an HTML page. + if (event.request.mode === "navigate") { + event.respondWith( + (async () => { + try { + // First, try to use the navigation preload response if it's supported. + const preloadResponse = await event.preloadResponse; + if (preloadResponse) { + return preloadResponse; + } + + // Always try the network first. + const networkResponse = await fetch(event.request); + return networkResponse; + } catch (error) { + // catch is only triggered if an exception is thrown, which is likely + // due to a network error. + // If fetch() returns a valid HTTP response with a response code in + // the 4xx or 5xx range, the catch() will NOT be called. + console.log("Fetch failed; returning offline page instead.", error); + + const cache = await caches.open(CACHE_NAME); + const cachedResponse = await cache.match(OFFLINE_URL); + return cachedResponse; + } + })() + ); + } + + // If our if() condition is false, then this fetch handler won't intercept the + // request. If there are any other fetch handlers registered, they will get a + // chance to call event.respondWith(). If no fetch handlers call + // event.respondWith(), the request will be handled by the browser as if there + // were no service worker involvement. +}); \ No newline at end of file diff --git a/stashr/static/manifest/manifest.json b/stashr/static/manifest/manifest.json index d6e62fd..d8e1805 100644 --- a/stashr/static/manifest/manifest.json +++ b/stashr/static/manifest/manifest.json @@ -16,6 +16,16 @@ "start_url": "/", "background_color": "#3367D6", "display": "fullscreen", + "orientation": "portrait", "scope": "/", - "theme_color": "#3367D6" + "theme_color": "#3367D6", + "shortcuts": [ + { + "name": "All Volumes", + "short_name": "Volumes", + "description": "All Volumes", + "url": "/volumes", + "icons": [{ "src": "/static/assets/stashr-192.png", "sizes": "192x192"}] + } + ] } diff --git a/stashr/static/offline.html b/stashr/static/offline.html new file mode 100644 index 0000000..51c82b7 --- /dev/null +++ b/stashr/static/offline.html @@ -0,0 +1,10 @@ + + +Stashr - OFFLINE + + + +Stashr is currently Offline + + + \ No newline at end of file diff --git a/stashr/templates/base.html b/stashr/templates/base.html index 8005e66..ace2700 100644 --- a/stashr/templates/base.html +++ b/stashr/templates/base.html @@ -196,6 +196,14 @@ Vue.use(VueToast); {% block script %}{% endblock %} {{ emit_tep('base_page_script') }} +// SERVICE WORKER +// Check that service workers are supported +window.addEventListener("load", () => { + if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("service-worker.js"); + } +}); +