Add service worker and offline page (needed to install the webapp on mobile devices)

2025-02-25 18:45:27 -06:00 · 2021-09-10 22:35:59 +02:00 · 2021-09-10 22:35:59 +02:00 · 16d39ff9d0
commit 16d39ff9d0
parent e9f2f56634
14 changed files with 250 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -16,3 +16,4 @@ public/google*.html
 report.html
 composer.phar
 app.js.map
+.idea
--- a/frontend/src/serviceworker.js
+++ b/frontend/src/serviceworker.js
@ -0,0 +1,58 @@
+/*
+ * serviceworker.js
+ * Copyright (c) 2021 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+let staticCachePrefix = "firefly-III-"
+let staticCacheName = staticCachePrefix + new Date().getTime();
+let cachedFiles = [
+    '/offline',
+    '/v2/plugins/local-fonts/gf-source.css',
+    '/v2/css/app.css',
+];
+
+// Create cache on install
+self.addEventListener("install", event => {
+    this.skipWaiting();
+    event.waitUntil(
+        caches.open(staticCacheName).then(cache => cache.addAll(cachedFiles))
+    )
+});
+
+// Clear cache on activate
+self.addEventListener('activate', event => {
+    event.waitUntil(
+        caches.keys().then(cacheNames => {
+            return Promise.all(
+                cacheNames
+                    .filter(cacheName => (cacheName.startsWith(staticCachePrefix)))
+                    .filter(cacheName => (cacheName !== staticCacheName))
+                    .map(cacheName => caches.delete(cacheName))
+            );
+        })
+    );
+});
+
+// Serve from Cache or return the offline page
+self.addEventListener("fetch", event => {
+    event.respondWith(
+        caches.match(event.request)
+            .then(response => (response || fetch(event.request)))
+            .catch(() => caches.match('offline'))
+    )
+});
--- a/public/serviceworker.js
+++ b/public/serviceworker.js
@ -0,0 +1,58 @@
+/*
+ * serviceworker.js
+ * Copyright (c) 2021 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+let staticCachePrefix = "firefly-III-"
+let staticCacheName = staticCachePrefix + new Date().getTime();
+let cachedFiles = [
+    '/offline',
+    '/v2/plugins/local-fonts/gf-source.css',
+    '/v2/css/app.css',
+];
+
+// Create cache on install
+self.addEventListener("install", event => {
+    this.skipWaiting();
+    event.waitUntil(
+        caches.open(staticCacheName).then(cache => cache.addAll(cachedFiles))
+    )
+});
+
+// Clear cache on activate
+self.addEventListener('activate', event => {
+    event.waitUntil(
+        caches.keys().then(cacheNames => {
+            return Promise.all(
+                cacheNames
+                    .filter(cacheName => (cacheName.startsWith(staticCachePrefix)))
+                    .filter(cacheName => (cacheName !== staticCacheName))
+                    .map(cacheName => caches.delete(cacheName))
+            );
+        })
+    );
+});
+
+// Serve from Cache or return the offline page
+self.addEventListener("fetch", event => {
+    event.respondWith(
+        caches.match(event.request)
+            .then(response => (response || fetch(event.request)))
+            .catch(() => caches.match('offline'))
+    )
+});
--- a/resources/lang/en_GB/errors.php
+++ b/resources/lang/en_GB/errors.php
@ -47,5 +47,8 @@ return [
    'tell_more'               => 'Tell us more than "it says Whoops!"',
    'include_logs'            => 'Include error logs (see above).',
    'what_did_you_do'         => 'Tell us what you were doing.',
+    'offline_header'          => 'You are probably offline',
+    'offline_unreachable'     => 'Firefly III is unreachable. Your device is currently offline or the server is not working.',
+    'offline_github'          => 'If you are sure both your device and the server are online, please open a ticket on <strong><a href="https://github.com/firefly-iii/firefly-iii/issues">GitHub</a></strong>.',

 ];
--- a/resources/lang/en_US/errors.php
+++ b/resources/lang/en_US/errors.php
@ -47,5 +47,8 @@ return [
    'tell_more'               => 'Tell us more than "it says Whoops!"',
    'include_logs'            => 'Include error logs (see above).',
    'what_did_you_do'         => 'Tell us what you were doing.',
+    'offline_header'          => 'You are probably offline',
+    'offline_unreachable'     => 'Firefly III is unreachable. Your device is currently offline or the server is not working.',
+    'offline_github'          => 'If you are sure both your device and the server are online, please open a ticket on <strong><a href="https://github.com/firefly-iii/firefly-iii/issues">GitHub</a></strong>.',

 ];
--- a/resources/lang/it_IT/errors.php
+++ b/resources/lang/it_IT/errors.php
@ -47,5 +47,8 @@ return [
    'tell_more'               => 'Dicci di più di "dice Oops!"',
    'include_logs'            => 'Includi i log degli errori (vedi sopra).',
    'what_did_you_do'         => 'Dicci cosa stavi facendo.',
+    'offline_header'          => 'Sembreresti essere offline',
+    'offline_unreachable'     => 'Firefly III non è raggiungibile. Il tuo dispositivo sembrerebbe offline, o il server non sta funzionando.',
+    'offline_github'          => 'Se si è certi che sia il server che il dispositivo siano correttamente funzionanti, si può aprire un ticket <strong><a href="https://github.com/firefly-iii/firefly-iii/issues">GitHub</a></strong>.',

 ];
--- a/resources/views/errors/Offline.twig
+++ b/resources/views/errors/Offline.twig
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <base href="{{ route('index') }}/">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Firefly III | Offline</title>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="v2/plugins/local-fonts/gf-source.css" nonce="{{ JS_NONCE }}">
+    <link rel="stylesheet" href="v2/css/app.css" nonce="{{ JS_NONCE }}">
+
+</head>
+<body>
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12">
+            <div class="error-page">
+                <h2 class="headline text-danger"><span class="fas fa-unlink"></span></h2>
+
+                <div class="error-content">
+                    <h3><span class="fas fa-exclamation-triangle text-danger"></span> Offline</h3>
+                    <p>
+                        {{ trans('errors.offline_header') }}
+                    </p>
+                    <p>
+                        {{ trans('errors.offline_unreachable') }}
+                    </p>
+                    <p>
+                        {{ trans('errors.offline_github')|raw }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
+
--- a/resources/views/v1/layout/default.twig
+++ b/resources/views/v1/layout/default.twig
@ -228,5 +228,17 @@
    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 {% endif %}

+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+
 </body>
 </html>
--- a/resources/views/v1/layout/empty.twig
+++ b/resources/views/v1/layout/empty.twig
@ -61,5 +61,17 @@
    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 {% endif %}

+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+
 </body>
 </html>
--- a/resources/views/v1/layout/guest.twig
+++ b/resources/views/v1/layout/guest.twig
@ -76,5 +76,17 @@
    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 {% endif %}

+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+
 </body>
 </html>
--- a/resources/views/v1/layout/install.twig
+++ b/resources/views/v1/layout/install.twig
@ -36,5 +36,17 @@
 </div>
 <script src="v1/js/app.js?v={{ FF_VERSION }}" type="text/javascript" nonce="{{ JS_NONCE }}"></script>
 {% block scripts %}{% endblock %}
+
+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
 </body>
 </html>
--- a/resources/views/v2/layout/auth.twig
+++ b/resources/views/v2/layout/auth.twig
@ -19,5 +19,17 @@
 <body class="hold-transition login-page">
 {% block content %}{% endblock %}
 {% block scripts %}{% endblock %}
+
+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
 </body>
 </html>
--- a/resources/views/v2/layout/default.twig
+++ b/resources/views/v2/layout/default.twig
@ -46,9 +46,11 @@
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">
-                            {% if mainTitleIcon|default(false) %}<span class="fa fas {{ mainTitleIcon }}"></span>{% endif %}
+                            {% if mainTitleIcon|default(false) %}<span
+                                class="fa fas {{ mainTitleIcon }}"></span>{% endif %}
                            {{ title }} <small class="text-muted">
-                                {% if subTitleIcon|default(false) %}<span class="fa fas {{ subTitleIcon }}"></span>{% endif %}
+                                {% if subTitleIcon|default(false) %}<span
+                                    class="fa fas {{ subTitleIcon }}"></span>{% endif %}
                                {{ subTitle|default('') }}</small></h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
@ -91,6 +93,18 @@
 <script src="v2/js/vendor.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
 {% block scripts %}{% endblock %}

+<script nonce="{{ JS_NONCE }}">
+    // Initialize the service worker
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js?v={{ FF_VERSION }}', {
+            scope: '{{ route('index') }}'
+        }).then(
+            () => console.log('ServiceWorker registration successful'),
+            (err) => console.log('ServiceWorker registration failed: ', err)
+        );
+    }
+</script>
+
 </body>
 </html>

--- a/routes/web.php
+++ b/routes/web.php
@ -37,6 +37,13 @@ Route::group(
    }
 );

+Route::group(
+    ['middleware' => 'binders-only'],
+    static function () {
+        Route::get('offline', fn () => view('errors.Offline'));
+    }
+);
+
 /**
 * These routes only work when the user is NOT logged in.
 */