Persistenten storage hinzugefügt

bin/build.js

@@ -26,17 +26,6 @@ let uglifyOptions = {
         },
         // toplevel: true
     },
-    // compress: {
-    //     ecma: "es6",
-    //     keep_fargs: false,
-    //     toplevel: true,
-    //     dead_code: true,
-    //     unused: true,
-    //     passes: 1,
-    // },
-    // sourceMap:{
-    //     url:"inline"
-    // },
     output: {
         beautify: true
     }
@@ -67,10 +56,10 @@ let regeneratorOptions = {
 };
 
 if (shouldIncludeSourcemap){
-    // uglifyOptions["sourceMap"] = {url: "inline"};
+    uglifyOptions["sourceMap"] = {url: "inline"};
-    uglifyOptions2["sourceMap"] = {url: "inline"};
+    uglifyOptions2["sourceMap"] = {url: "inline", content: "inline"};
-    // babelOptions["sourceMaps"] = "inline";
+    babelOptions["sourceMaps"] = "inline";
-    // regeneratorOptions["sourceMaps"] = "inline";
+    regeneratorOptions["sourceMaps"] = "inline";
 }
 
 const options = require('../rollup.config');

bin/build.sh

@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 
 cd $(dirname "$0")/..
-npm run build
+npm run build 1

public/html/application/fragment/settings.html

@@ -1 +1 @@
-<div class="max-height fill-me"><div class="row max-width grow flex-center"><div class="columns small-centered small-12 smedium-11 medium-9 large-7"><div class="row setting-row hidden" id=install-button><span class="columns small-6" data-translation=install></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=theme-chooser><span class="columns small-6" data-translation=theme></span> <span class="columns small-6 text-right"><div id=theme-name></div></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=sound></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-sound name=play-sound value=1 data-default=1> <span class=slider></span></span></label> <label class="switch row setting-row"><span class="columns small-6" data-translation=music></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-music name=play-music value=1 data-default=1> <span class=slider></span></span></label><div class="row setting-row" id=credits-button><span class="columns small-6" data-translation=credits></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=privacy-policy-button><span class="columns small-6" data-translation=privacy-policy></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=impressum-button><span class="columns small-6" data-translation=impressum></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=contact-button><span class="columns small-6" data-translation=contact></span> <span class="columns small-6 text-right" data-translation=">"></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=track></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=track-switch name=matomoShouldTrack value=1 data-default=1 data-raw=1> <span class=slider></span></span></label><div class="row setting-row hidden"><div class=column id=storage-info></div></div><button id=reset-levels class="button hidden" data-translation=reset-levels></button></div></div></div>
+<div class="max-height fill-me"><div class="row max-width grow flex-center"><div class="columns small-centered small-12 smedium-11 medium-9 large-7"><div class="row setting-row hidden" id=install-button><span class="columns small-6" data-translation=install></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=theme-chooser><span class="columns small-6" data-translation=theme></span> <span class="columns small-6 text-right"><div id=theme-name></div></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=sound></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-sound name=play-sound value=1 data-default=1> <span class=slider></span></span></label> <label class="switch row setting-row"><span class="columns small-6" data-translation=music></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=play-music name=play-music value=1 data-default=1> <span class=slider></span></span></label><div class="row setting-row" id=credits-button><span class="columns small-6" data-translation=credits></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=privacy-policy-button><span class="columns small-6" data-translation=privacy-policy></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=impressum-button><span class="columns small-6" data-translation=impressum></span> <span class="columns small-6 text-right" data-translation=">"></span></div><div class="row setting-row" id=contact-button><span class="columns small-6" data-translation=contact></span> <span class="columns small-6 text-right" data-translation=">"></span></div><label class="switch row setting-row"><span class="columns small-6" data-translation=track></span> <span class="columns small-6 text-right"><input type=checkbox class=setting id=track-switch name=matomoShouldTrack value=1 data-default=1 data-raw=1> <span class=slider></span></span></label><div class="row setting-row hidden"><span class="column small-12" id=storage-info></span></div><button id=reset-levels class="button hidden" data-translation=reset-levels></button></div></div></div>

src/js/init.js

@@ -86,10 +86,11 @@ InitPromise.resolve(app).then(async function () {
     app.start(MenuSite);
     Translator.setLanguage("de");
 
-    InstallManager.setCanInstallListener(e => {
+    InstallManager.setCanInstallListener(e => {});
-    });
+    if (InstallManager.isInstalled()){
+        MyStorageManager.getInstance().persist();
+    }
 
-    MyStorageManager.getInstance().persist();
 
     window["applyAndroidBridge"] = AndroidBridge.applyDefinitions;
 });

src/js/lib/pwa-assets.js

@@ -17,39 +17,45 @@ class MyStorageManager {
     }
 
     async estimate() {
-        if ('storage' in navigator && 'estimate' in navigator.storage) {
+        if ('storage' in navigator && 'estimate' in navigator["storage"]) {
             // We've got the real thing! Return its response.
-            return navigator.storage.estimate();
+            return navigator["storage"]["estimate"]();
         }
 
         if ('webkitTemporaryStorage' in navigator &&
-            'queryUsageAndQuota' in navigator.webkitTemporaryStorage) {
+            'queryUsageAndQuota' in navigator["webkitTemporaryStorage"]) {
             // Return a promise-based wrapper that will follow the expected interface.
             return new Promise(function (resolve, reject) {
-                navigator.webkitTemporaryStorage.queryUsageAndQuota(
+                navigator["webkitTemporaryStorage"]["queryUsageAndQuota"](
                     function (usage, quota) {
-                        resolve({usage: usage, quota: quota});
+                        resolve({"usage": usage, "quota": quota});
                     },
-                    reject
                 );
             });
         }
         // If we can't estimate the values, return a Promise that resolves with NaN.
-        return Promise.resolve({usage: NaN, quota: NaN});
+        return Promise.resolve({"usage": NaN, "quota": NaN});
+    }
+
+    async isPersistent(){
+        if (this.canPersist()){
+            return navigator["storage"]["persisted"]();
+        }
+        return Promise.resolve(false);
     }
 
     canEstimateStorage() {
-        return ('storage' in navigator && 'estimate' in navigator.storage || 'webkitTemporaryStorage' in navigator &&
+        return ('storage' in navigator && 'estimate' in navigator["storage"]|| 'webkitTemporaryStorage' in navigator &&
-            'queryUsageAndQuota' in navigator.webkitTemporaryStorage);
+            'queryUsageAndQuota' in navigator["webkitTemporaryStorage"]);
     }
 
     canPersist() {
-        return (navigator.storage && navigator.storage.persist);
+        return (navigator["storage"] && navigator["storage"]["persist"]);
     }
 
     persist(){
         if (this.canPersist()){
-            return navigator.storage.persist();
+            return navigator["storage"]["persist"]();
         }
         return Promise.resolve(false);
     }
@@ -86,6 +92,10 @@ class InstallManager {
         });
     }
 
+    static isInstalled(){
+        return matchMedia("(display-mode: standalone)").matches;
+    }
+
     static setCanInstallListener(listener, callIfCanInstall) {
         this.canInstallListener = listener;
         callIfCanInstall = Helper.nonNull(callIfCanInstall, true);

src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js

@@ -83,12 +83,29 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
         });
 
         let storageManager = MyStorageManager.getInstance();
-        if (storageManager.canEstimateStorage() && false) {
+        if (storageManager.canEstimateStorage()) {
             console.log("can estimate storage!");
-            storageManager.estimate().then(storage => {
+            Promise.all([storageManager.estimate(), storageManager.isPersistent()]).then(res => {
+                let storage = res[0];
+                let isPersisted = res[1];
                 let storageObject = this.findBy("#storage-info");
-                storageObject.appendChild(Translator.makePersistentTranslation("storage-info", [Math.round(storage.usage/(1024*1024)*100)/100, Math.round(storage.quota/(1024*1024)*100)/100, Math.round(storage.usage/storage.quota*10000)/100]));
+                        console.log(isPersisted);
+                storageObject.appendChild(Translator.makePersistentTranslation("storage-info", [
+                    Math.round(storage.usage / (1024 * 1024) * 100) / 100,
+                    Math.round(storage.quota / (1024 * 1024) * 100) / 100,
+                    Math.round(storage.usage / storage.quota * 10000) / 100,
+                    ((isPersisted) ? "" : "nicht")]));
                 storageObject.parentElement.classList.remove("hidden");
+                storageObject.parentElement.addEventListener("click", () => {
+                    storageManager.persist().then(isPersisted => {
+                        console.log(isPersisted);
+                        storageObject.removeAllChildren().appendChild(Translator.makePersistentTranslation("storage-info", [
+                            Math.round(storage.usage / (1024 * 1024) * 100) / 100,
+                            Math.round(storage.quota / (1024 * 1024) * 100) / 100,
+                            Math.round(storage.usage / storage.quota * 10000) / 100,
+                            ((isPersisted) ? "" : "nicht")]));
+                    });
+                })
             });
         }
 

src/module/Application/pwa/js/WordRotatorDb.js

@@ -69,6 +69,10 @@ export class WordRotatorDb extends MyDb {
         level.played = true;
         return await this.saveObj(level, WordRotatorDb.OBJECT_STORE.LEVEL);
     }
+
+    async countLevels(){
+
+    }
 }
 
 WordRotatorDb.OBJECT_STORE = {

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

@@ -152,6 +152,7 @@ export class LevelSite extends WordRotatorBaseSite {
             const db = WordRotatorDb.getInstance();
             const nextLevelJson = await db.loadNextLevel(LevelSite.RENDERER_TYPES);
 
+                console.log("nextLevelJson", nextLevelJson);
             if (nextLevelJson === null) {
                 this.startSite(EndSite);
                 this.finish();
@@ -190,6 +191,7 @@ export class LevelSite extends WordRotatorBaseSite {
             return this.tutorial();
         }
         catch (e) {
+            console.log("Fehler!");
             console.error(e);
         }
     }

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

@@ -179,6 +179,7 @@ export class MenuSite extends WordRotatorBaseSite {
         const dateLastSync = Helper.nonNull(localStorage.getItem("date-last-sync"), 0);
         const db = WordRotatorDb.getInstance();
 
+        // let numberLevels = db.countLevels();
         let newLastSync = null;
         let maxRuns = 1;
         let levelPromises = [];
@@ -199,7 +200,7 @@ export class MenuSite extends WordRotatorBaseSite {
             maxRuns = res["maxRuns"];
 
             let levels = res["levels"];
-            for (let i = 0, n = levels.length; i < n; i++) {
+            for (let i = 0; i < levels.length; i++) {
                 let currentLevel = levels[i];
                 levelPromises.push(db.loadLevel(levels[i]["id"]).then(level => {
                     currentLevel["played"] = (Helper.nonNull(Helper.nonNull(level, {}).played, false));

src/module/Application/pwa/public/html/application/fragment/settings.html

@@ -52,7 +52,8 @@
                 </span>
             </label>
             <div class='row setting-row hidden' >
-                <div class = "column" id='storage-info'></div>
+                <span class = "column small-12" id='storage-info'></span>
+                <!--<span class='columns small-2 text-right' data-translation=">"></span>-->
             </div>
 
             <!--<iframe-->

src/module/Application/pwa/translations/de.json

@@ -32,5 +32,5 @@
   "credits-sister-text":"Ich danke meiner Lieblingsschwester, denn ohne Sie würde diese App nicht so aussehen, wie sie aussieht (wahrscheinlich eher schlechter :p)",
   "credits-coin-text":"Sound:<br/>Der Münz-Sound ist von der Webseite <a href = '{0}' target='_blank' rel='noopener' class = 'link'>{0}</a>. Alle Rechte für diesen Münz-Sound gehören <a target='_blank' rel='noopener' href = '{0}' class = 'link'>{0}</a>.",
   "credits-music-text":"Musik:<br/>Bright And Beautiful - GEMAfreie Musik von <a href = '{0}' target='_blank' rel='noopener' class = 'link'>{0}</a><br/>Licensed under Creative Commons: By Attribution 4.0 International (CC BY 4.0)<br/><a href = '{1}' target='_blank' rel='noopener' class = 'link'>{1}</a><br/>Angepasst (geschnitten) für diese App",
-"storage-info":"Ungefähr {0}/{1}MB genutzt ({2}%)"
+"storage-info":"Ungefähr {0}/{1}MB genutzt ({2}%, {3} persistent)"
 }