Icon hinzugefügt

public/img/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="img/icons/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2425 5114 c-435 -33 -824 -153 -1173 -361 -336 -200 -675 -539 -875
+-875 -242 -405 -360 -838 -360 -1313 0 -475 118 -908 360 -1313 200 -336 539
+-675 875 -875 405 -242 838 -360 1313 -360 399 0 739 75 1093 244 274 130 484
+279 708 503 410 410 652 900 730 1477 21 150 23 470 5 614 -75 595 -337 1126
+-757 1535 -400 389 -892 628 -1449 704 -113 15 -381 27 -470 20z m-1410 -1566
+c3 -13 10 -32 15 -43 9 -22 55 -233 66 -302 4 -24 11 -43 16 -43 6 0 8 -9 5
+-20 -3 -10 -2 -20 2 -22 7 -3 71 -293 71 -321 0 -10 4 -17 9 -17 5 0 11 -12
+13 -27 17 -100 63 -299 71 -304 6 -4 7 -14 4 -23 -4 -9 -3 -16 1 -16 5 0 16
+-45 27 -100 16 -92 35 -140 35 -91 0 11 4 22 9 25 5 3 7 15 4 26 -3 11 -1 20
+5 20 5 0 12 17 15 38 8 54 47 235 54 252 3 8 5 21 4 29 -1 8 2 17 7 20 5 3 24
+81 42 174 19 92 37 167 41 167 4 0 5 9 2 21 -3 12 -1 24 4 28 9 5 44 155 61
+254 2 15 8 27 12 27 5 0 6 9 3 20 -3 11 -1 26 5 33 5 6 17 48 26 92 9 44 19
+90 22 103 l4 22 260 0 c143 0 260 -1 260 -3 0 -23 24 -125 32 -134 6 -7 8 -20
+4 -28 -3 -8 -2 -15 2 -15 5 0 21 -64 36 -142 16 -79 33 -149 38 -155 6 -7 8
+-19 5 -27 -3 -8 -2 -16 2 -18 7 -3 59 -233 69 -305 2 -18 8 -33 14 -33 5 0 8
+-8 6 -17 -1 -10 0 -22 4 -28 3 -5 20 -80 38 -165 18 -85 35 -157 39 -160 4 -3
+13 -39 21 -80 14 -82 23 -77 36 20 4 27 10 50 15 50 5 0 6 7 2 16 -3 9 -1 19
+4 23 5 3 25 78 43 166 18 88 36 162 39 165 7 6 71 297 71 323 0 10 4 17 10 17
+5 0 7 7 4 15 -4 8 -2 21 4 28 5 6 24 82 42 167 18 85 36 160 41 166 5 6 6 14
+3 17 -3 3 -2 12 2 19 5 7 14 36 19 63 l10 50 250 0 c470 0 718 -10 843 -35 61
+-13 112 -27 112 -31 0 -5 5 -9 11 -9 5 0 40 -14 77 -32 79 -37 174 -135 193
+-199 7 -21 16 -39 22 -39 5 0 7 -6 4 -14 -3 -8 -1 -16 6 -19 18 -6 17 -339 -1
+-345 -6 -2 -10 -7 -7 -11 2 -5 -7 -31 -20 -60 -14 -28 -25 -55 -25 -60 0 -6
+-10 -17 -22 -25 -12 -9 -19 -16 -16 -16 4 0 -10 -18 -32 -40 -22 -22 -43 -40
+-48 -40 -4 0 -18 -9 -30 -20 -12 -12 -22 -17 -22 -13 0 4 -4 3 -8 -3 -4 -5
+-34 -21 -67 -35 -45 -18 -54 -25 -37 -27 12 -2 22 -7 22 -10 0 -4 17 -16 38
+-27 46 -24 124 -101 146 -143 8 -16 22 -36 29 -44 7 -7 29 -44 47 -83 19 -38
+38 -72 42 -73 5 -2 6 -8 2 -13 -3 -5 0 -9 5 -9 6 0 11 -6 11 -14 0 -19 60
+-150 71 -154 5 -2 9 -9 9 -15 0 -7 8 -28 18 -47 11 -19 22 -47 25 -62 4 -15
+15 -34 25 -44 9 -10 16 -19 14 -21 -1 -2 4 -16 12 -32 13 -24 56 -131 56 -138
+0 -2 -122 -3 -271 -3 l-270 0 -21 50 c-11 27 -25 50 -30 50 -5 0 -6 5 -3 10 3
+6 1 10 -4 10 -6 0 -11 8 -11 17 0 15 -40 100 -177 380 -56 113 -130 203 -168
+203 -8 0 -15 5 -15 11 0 5 -4 7 -10 4 -5 -3 -10 -2 -10 3 0 17 -53 22 -301 28
+l-247 6 -16 -74 c-8 -40 -23 -111 -32 -158 -10 -47 -20 -87 -24 -90 -4 -3 -22
+-79 -41 -170 -18 -91 -36 -166 -40 -168 -4 -2 -5 -12 -2 -22 3 -11 0 -20 -6
+-20 -6 0 -11 -11 -11 -25 l0 -25 -308 0 -308 0 -24 115 c-13 63 -28 115 -33
+115 -5 0 -7 10 -6 23 2 12 1 27 -3 32 -3 6 -20 80 -38 165 -18 85 -37 158 -43
+161 -5 4 -7 16 -4 27 2 12 1 22 -3 24 -4 2 -20 64 -35 138 -15 74 -32 138 -37
+141 -6 4 -8 16 -5 28 3 12 2 21 -2 21 -4 0 -11 24 -17 53 -41 205 -59 283 -67
+288 -6 4 -7 14 -4 23 4 9 3 16 -2 16 -5 0 -12 19 -16 43 -8 42 -8 41 -27 -53
+-11 -52 -23 -97 -27 -100 -4 -3 -22 -79 -41 -170 -19 -91 -37 -166 -41 -168
+-4 -2 -4 -12 -2 -24 3 -11 1 -23 -4 -27 -9 -5 -50 -179 -61 -258 -2 -18 -8
+-33 -12 -33 -5 0 -6 -9 -3 -21 3 -12 1 -24 -4 -28 -9 -6 -83 -330 -83 -364 0
+-8 -4 -17 -8 -19 -5 -1 -15 -34 -23 -73 l-15 -70 -306 -3 -306 -2 -13 65 c-7
+36 -17 65 -22 65 -5 0 -7 9 -4 20 3 11 2 20 -3 20 -4 0 -10 15 -12 33 -10 67
+-61 302 -68 307 -6 4 -54 221 -68 303 -2 15 -8 27 -13 27 -5 0 -9 7 -9 16 0
+30 -70 348 -81 371 -6 11 -9 26 -5 31 3 6 2 12 -2 14 -4 1 -21 65 -37 141 -15
+75 -32 137 -38 137 -5 0 -7 14 -5 30 3 17 2 30 -2 30 -3 0 -21 74 -40 165 -19
+91 -38 165 -42 165 -4 0 -8 11 -8 25 l0 25 254 0 255 0 6 -22z"/>
+<path d="M3315 3192 c-43 -4 -55 -14 -55 -49 0 -13 -4 -23 -9 -23 -5 0 -7 -9
+-4 -20 3 -11 1 -26 -5 -33 -6 -7 -23 -73 -38 -147 -15 -74 -31 -136 -35 -138
+-4 -2 -5 -12 -2 -22 3 -11 0 -20 -6 -20 -6 0 -11 -8 -11 -18 0 -17 13 -19 158
+-25 363 -15 426 -7 493 63 21 22 35 40 31 40 -4 0 0 4 8 10 17 11 27 191 12
+230 -5 14 -9 27 -9 30 0 3 -11 18 -26 34 -15 16 -27 33 -27 38 0 5 -4 6 -10 3
+-5 -3 -10 -1 -10 4 0 6 -3 10 -7 9 -5 -1 -21 4 -37 11 -16 6 -48 14 -70 16
+-57 7 -293 11 -341 7z"/>
+</g>
+</svg>

public/index.html

@@ -12,8 +12,21 @@
 
     <link rel="manifest" href="js/manifest.json">
 
-    <meta name="application-name" content="Matrix">
-    <meta name="msapplication-config" content="img/browserconfig.xml">
+
+
+    <link rel="apple-touch-icon" sizes="180x180" href="img/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
+    <!--<link rel="manifest" href="img/icons/site.webmanifest">-->
+    <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="shortcut icon" href="img/icons/favicon.ico">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-config" content="img/icons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+
+
+
+    <meta name="application-name" content="WordRotator">
 
     <title>WordRotator</title>
 
@@ -229,6 +242,10 @@
         alert(error);
         document.body.innerHTML = error;
     }
+
+    window.addEventListener('beforeinstallprompt', e => {
+        console.log("beforeinstallprompt 2", e);
+    });
 </script>
 </body>
 </html>

public/js/app.js

@@ -4603,6 +4603,31 @@ InitPromise.addPromise(function(app){
     app.addDeepLink("newPassword", SetNewPasswordSite);
 });
 
+class InstallManager{
+    static init(){
+        console.log("init");
+        window.addEventListener('beforeinstallprompt', e => {
+        console.log("beforeinstallprompt", e);
+            this.deferredPromt = e;
+            if (this.canInstallListener){
+                this.canInstallListener(this.deferredPromt);
+            }
+        });
+    }
+    static setCanInstallListener(listener, callIfCanInstall){
+        this.canInstallListener = listener;
+        callIfCanInstall = Helper.nonNull(callIfCanInstall, true);
+
+        if (callIfCanInstall && Helper.nonNull(this.deferredPromt)){
+            this.canInstallListener(this.deferredPromt);
+        }
+    }
+}
+InstallManager.init();
+window.addEventListener("load", () => {
+    console.log("loaded");
+});
+
 class Matomo {
 
     static init() {
@@ -4825,6 +4850,8 @@ class AudioChain {
         this.startTime = null;
         this.pauseTime = null;
         this.source = null;
+
+        this.running = false;
     }
 
     setBuffer(buffer) {
@@ -4842,8 +4869,7 @@ class AudioChain {
         }
     }
 
-    async start(delay, offset, duration)
-    {
+    async start(delay, offset, duration) {
         let source = this.context.createBufferSource();
 
         source.loop = this.shouldLoop;
@@ -4859,48 +4885,24 @@ class AudioChain {
         source.start(delay, offset, duration);
         this.startTime = (new Date()).getTime();
         this.source = source;
+        this.running = true;
     }
 
-    async stop(delay){
-        if (Helper.isNotNull(this.source)){
-            this.pauseTime = ((new Date()).getTime())-this.startTime;
+    async stop(delay) {
+        if (Helper.isNotNull(this.source)) {
+            this.pauseTime = ((new Date()).getTime()) - this.startTime;
             return this.source.stop(delay);
         }
+        this.running = false;
         return null;
     }
 
-    async resume(){
-        console.log("resume-Time:", Helper.nonNull(this.pauseTime, 0)/1000.0);
-        return this.start(null, Helper.nonNull(this.pauseTime, 0)/1000.0);
-    }
-}
-
-class InitPromise$1
-{
-    static addPromise(promise)
-    {
-        if (typeof promise === 'function')
-        {
-            let func = promise;
-            promise = InitPromise$1.mainPromise.then(function(app){
-                return (func(app));
-            });
+    async resume() {
+        if (!this.running) {
+            return this.start(null, Helper.nonNull(this.pauseTime, 0) / 1000.0);
         }
-        InitPromise$1.promises.push(promise);
-    }
-
-    static resolve(app)
-    {
-        InitPromise$1.mainResolver(app);
-        return InitPromise$1.mainPromise.then(function(){
-            return Promise.all(InitPromise$1.promises);
-        });
     }
 }
-InitPromise$1.promises = [];
-InitPromise$1.mainPromise = new Promise(function(resolver){
-    InitPromise$1.mainResolver = resolver;
-});
 
 class SoundManager {
     static getInstance() {
@@ -4938,7 +4940,7 @@ class SoundManager {
         audioObject.timeOffset = Helper.nonNull(options.timeOffset, audioObject.timeOffset, 0);
         this.channels[channel] = audioObject;
 
-        if (audioObject.muted){
+        if (audioObject.muted) {
             this.stop(channel);
         }
 
@@ -4972,7 +4974,7 @@ class SoundManager {
             source.setBuffer(buffer);
 
             //to prevent gap in mp3-files
-            source.setLooping(this.channels[channel].loop, 0.3, buffer.duration-0.3);
+            source.setLooping(this.channels[channel].loop, 0.3, buffer.duration - 0.3);
 
             source.start();
 
@@ -4989,21 +4991,31 @@ class SoundManager {
             oldAudio.source.stop();
         }
     }
+
     get(channel) {
         channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
         return this.channels[channel];
     }
 
+    async resume(channel){
+        channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
+        if (!this.channels[channel].muted && Helper.isNotNull(this.channels[channel].source)) {
+            return this.channels[channel].source.resume();
+        }
+    }
+
     handleVisibilityChange() {
-        if (document.hidden){
-            for (let k in this.channels){
-                this.channels[k].source.stop();
+        if (document.hidden) {
+            for (let k in this.channels) {
+                if (Helper.isNotNull(this.channels[k].source)) {
+                    this.channels[k].source.stop();
+                }
             }
         }
-        else{
-            for (let k in this.channels){
-                if (!this.channels[k].muted){
-                        this.channels[k].source.resume();
+        else {
+            for (let k in this.channels) {
+                if (!this.channels[k].muted && Helper.isNotNull(this.channels[k].source)) {
+                    this.channels[k].source.resume();
                 }
             }
         }
@@ -6053,6 +6065,8 @@ class LevelSite extends WordRotatorBaseSite {
             volume: 0.7
         }, SoundManager.CHANNELS.SOUND);
 
+        soundManager.resume(SoundManager.CHANNELS.MUSIC);
+
         return super.onConstruct(args);
     }
 
@@ -6851,6 +6865,7 @@ InitPromise.resolve(app).then(async function(){
     app.start(MenuSite);
     Translator.setLanguage("de");
 
-    // let matomo = new Matomo();
-    // console.log(await matomo._askIsTracking());
+    InstallManager.setCanInstallListener(e => {
+        console.log("can install!", e);
+    });
 });

public/js/manifest.json

@@ -3,17 +3,18 @@
     "short_name":"WordRotator",
     "icons": [
         {
-            "src": "/img/android-chrome-192x192.png",
+            "src": "../img/icons/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/img/android-chrome-512x512.png",
+            "src": "../img/icons/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
     ],
-    "background_color": "#ff0000",
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
     "display": "standalone",
     "start_url":"/"
 }

src/js/init.js

@@ -18,7 +18,7 @@ import "./lib/pwa-user-management"
 
 import {SettingsManager, SettingsSite} from "./lib/pwa-core";
 
-import {Matomo, SoundManager} from "./lib/pwa-assets";
+import {InstallManager, Matomo, SoundManager} from "./lib/pwa-assets";
 import {MenuSite} from "../module/Application/pwa/js/site/MenuSite";
 import {WordRotatorSettingFragment} from "../module/Application/pwa/js/Fragment/WordRotatorSettingFragment";
 
@@ -70,7 +70,7 @@ InitPromise.resolve(app).then(async function(){
     app.start(MenuSite);
     Translator.setLanguage("de");
 
-    // let matomo = new Matomo();
-    // console.log(await matomo._askIsTracking());
+    InstallManager.setCanInstallListener(e => {
+        console.log("can install!", e);
+    });
 });
- 

src/js/lib/pwa-assets.js

@@ -8,6 +8,31 @@ class DelayPromise extends Promise {
     }
 }
 
+class InstallManager{
+    static init(){
+        console.log("init");
+        window.addEventListener('beforeinstallprompt', e => {
+        console.log("beforeinstallprompt", e);
+            this.deferredPromt = e;
+            if (this.canInstallListener){
+                this.canInstallListener(this.deferredPromt);
+            }
+        });
+    }
+    static setCanInstallListener(listener, callIfCanInstall){
+        this.canInstallListener = listener;
+        callIfCanInstall = Helper.nonNull(callIfCanInstall, true);
+
+        if (callIfCanInstall && Helper.nonNull(this.deferredPromt)){
+            this.canInstallListener(this.deferredPromt);
+        }
+    }
+}
+InstallManager.init();
+window.addEventListener("load", () => {
+    console.log("loaded");
+});
+
 class Matomo {
 
     static init() {
@@ -246,6 +271,8 @@ class AudioChain {
         this.startTime = null;
         this.pauseTime = null;
         this.source = null;
+
+        this.running = false;
     }
 
     setBuffer(buffer) {
@@ -263,8 +290,7 @@ class AudioChain {
         }
     }
 
-    async start(delay, offset, duration)
-    {
+    async start(delay, offset, duration) {
         let source = this.context.createBufferSource();
 
         source.loop = this.shouldLoop;
@@ -280,48 +306,24 @@ class AudioChain {
         source.start(delay, offset, duration);
         this.startTime = (new Date()).getTime();
         this.source = source;
+        this.running = true;
     }
 
-    async stop(delay){
-        if (Helper.isNotNull(this.source)){
-            this.pauseTime = ((new Date()).getTime())-this.startTime;
+    async stop(delay) {
+        if (Helper.isNotNull(this.source)) {
+            this.pauseTime = ((new Date()).getTime()) - this.startTime;
             return this.source.stop(delay);
         }
+        this.running = false;
         return null;
     }
 
-    async resume(){
-        console.log("resume-Time:", Helper.nonNull(this.pauseTime, 0)/1000.0);
-        return this.start(null, Helper.nonNull(this.pauseTime, 0)/1000.0);
-    }
-}
-
-class InitPromise$1
-{
-    static addPromise(promise)
-    {
-        if (typeof promise === 'function')
-        {
-            let func = promise;
-            promise = InitPromise$1.mainPromise.then(function(app){
-                return (func(app));
-            });
+    async resume() {
+        if (!this.running) {
+            return this.start(null, Helper.nonNull(this.pauseTime, 0) / 1000.0);
         }
-        InitPromise$1.promises.push(promise);
-    }
-
-    static resolve(app)
-    {
-        InitPromise$1.mainResolver(app);
-        return InitPromise$1.mainPromise.then(function(){
-            return Promise.all(InitPromise$1.promises);
-        });
     }
 }
-InitPromise$1.promises = [];
-InitPromise$1.mainPromise = new Promise(function(resolver){
-    InitPromise$1.mainResolver = resolver;
-});
 
 class SoundManager {
     static getInstance() {
@@ -359,7 +361,7 @@ class SoundManager {
         audioObject.timeOffset = Helper.nonNull(options.timeOffset, audioObject.timeOffset, 0);
         this.channels[channel] = audioObject;
 
-        if (audioObject.muted){
+        if (audioObject.muted) {
             this.stop(channel);
         }
 
@@ -393,7 +395,7 @@ class SoundManager {
             source.setBuffer(buffer);
 
             //to prevent gap in mp3-files
-            source.setLooping(this.channels[channel].loop, 0.3, buffer.duration-0.3);
+            source.setLooping(this.channels[channel].loop, 0.3, buffer.duration - 0.3);
 
             source.start();
 
@@ -410,21 +412,31 @@ class SoundManager {
             oldAudio.source.stop();
         }
     }
+
     get(channel) {
         channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
         return this.channels[channel];
     }
 
+    async resume(channel){
+        channel = Helper.nonNull(channel, SoundManager.CHANNELS.DEFAULT);
+        if (!this.channels[channel].muted && Helper.isNotNull(this.channels[channel].source)) {
+            return this.channels[channel].source.resume();
+        }
+    }
+
     handleVisibilityChange() {
-        if (document.hidden){
-            for (let k in this.channels){
-                this.channels[k].source.stop();
+        if (document.hidden) {
+            for (let k in this.channels) {
+                if (Helper.isNotNull(this.channels[k].source)) {
+                    this.channels[k].source.stop();
+                }
             }
         }
-        else{
-            for (let k in this.channels){
-                if (!this.channels[k].muted){
-                        this.channels[k].source.resume();
+        else {
+            for (let k in this.channels) {
+                if (!this.channels[k].muted && Helper.isNotNull(this.channels[k].source)) {
+                    this.channels[k].source.resume();
                 }
             }
         }
@@ -502,4 +514,4 @@ class TabbedFragment extends Fragment {
     }
 }
 
-export { DelayPromise, Matomo, RotateHelper, ScaleHelper, AudioChain, SoundManager, TabbedFragment };
+export { DelayPromise, InstallManager, Matomo, RotateHelper, ScaleHelper, AudioChain, SoundManager, TabbedFragment };

src/module/Application/pwa/js/site/LevelSite.js

@@ -44,6 +44,8 @@ export class LevelSite extends WordRotatorBaseSite {
             volume: 0.7
         }, SoundManager.CHANNELS.SOUND);
 
+        soundManager.resume(SoundManager.CHANNELS.MUSIC);
+
         return super.onConstruct(args);
     }
 

src/scss/_wordrotatorTheme.scss

@@ -90,7 +90,7 @@ body {
     }
   }
   label{
-    font-size: 1em;
+    font-size: 1em !important;
 
   }
   .setting-row{

sw-config.js

@@ -47,6 +47,10 @@ module.exports = {
             handler: "networkFirst"
             // handler: "networkFirst"
         },
+        // {
+        //     urlPattern: /^.*\/img\/icons\/.*$/,
+        //     handler: "networkFirst"
+        // },
         {
             urlPattern: /^.*\/(version)\/.*$/,
             handler: "cacheFirst"