Frontend part of the tiles caching

src/constants.js

@@ -73,6 +73,7 @@ if (process.env.MAPTILER_API_KEY) {
     };
 }
 export const DEFAULT_TILE_SERVER = 'cartodb-voyager';
+export const DEFAULT_TILE_CACHING_DURATION = -1;
 
 export const GEOCODING_API_ENDPOINT = 'https://api-adresse.data.gouv.fr/search/';
 

src/i18n/en.json

@@ -118,10 +118,13 @@
         "customTileServer": "Custom tile server",
         "customTileServerURL": "Custom tile server URL",
         "customTileServerURLHint": "For example: http://tile.thunderforest.com/cycle/{z}/{x}/{y}.png",
+        "defaultDuration": "Default duration",
         "defaultOrientationMode": "Default orientation mode",
         "fixedNorth": "Fixed (North up)",
         "locale": "Language",
+        "noCaching": "No caching",
         "skipOnboarding": "Skip onboarding",
+        "tileCachingDuration": "Cache map tiles for",
         "tileServer": "Map tiles server"
     },
     "shareMapViewModal": {

src/store/mutations.js

@@ -2,7 +2,12 @@ import Vue from 'vue';
 
 import { messages, getBrowserLocales } from '@/i18n';
 import { storageAvailable } from '@/tools';
-import { DEFAULT_TILE_SERVER, TILE_SERVERS, VERSION } from '@/constants';
+import {
+    DEFAULT_TILE_CACHING_DURATION,
+    DEFAULT_TILE_SERVER,
+    TILE_SERVERS,
+    VERSION,
+} from '@/constants';
 import * as types from './mutations-types';
 
 function loadDataFromStorage(name) {
@@ -50,6 +55,7 @@ let hasPreventSuspendPermission = null;
 let hasVibratePermission = null;
 let shouldAutorotateMap = null;
 let skipOnboarding = null;
+let tileCachingDuration = null;
 let tileServer = null;
 if (storageAvailable('localStorage')) {
     handleMigrations();
@@ -67,6 +73,11 @@ if (storageAvailable('localStorage')) {
         tileServer = null;
     }
 
+    tileCachingDuration = loadDataFromStorage('tileCachingDuration');
+    if (tileCachingDuration !== null && !Number.isInteger(tileCachingDuration)) {
+        tileCachingDuration = null;
+    }
+
     locale = loadDataFromStorage('locale');
     if (!(locale in messages)) {
         locale = null;
@@ -123,6 +134,9 @@ export const initialState = {
         ),
         shouldAutorotateMap: shouldAutorotateMap !== null ? shouldAutorotateMap : false,
         skipOnboarding: skipOnboarding || false,
+        tileCachingDuration: (
+            tileCachingDuration !== null ? tileCachingDuration : DEFAULT_TILE_CACHING_DURATION
+        ),
         tileServer: tileServer || DEFAULT_TILE_SERVER,
     },
 };

src/views/Settings.vue

@@ -27,6 +27,15 @@
                         required
                         ></v-select>
 
+                    <v-select
+                        :items="tileCachingDurationOptions"
+                        v-model="tileCachingDuration"
+                        item-text="name"
+                        item-value="duration"
+                        :label="$t('settings.tileCachingDuration')"
+                        required
+                        ></v-select>
+
                     <v-text-field
                         :hint="$t('settings.customTileServerURLHint')"
                         :label="$t('settings.customTileServerURL')"
@@ -51,6 +60,7 @@
 <script>
 import { TILE_SERVERS } from '@/constants';
 import { AVAILABLE_LOCALES } from '@/i18n';
+import { capitalize } from '@/tools';
 
 import PermissionsSwitches from '@/components/PermissionsSwitches.vue';
 
@@ -102,6 +112,34 @@ export default {
                 this.$store.dispatch('unmarkIntroAsSeen');
             },
         },
+        tileCachingDuration: {
+            get() {
+                return this.$store.state.settings.tileCachingDuration;
+            },
+            set(tileCachingDuration) {
+                this.$store.dispatch('setSetting', { setting: 'tileCachingDuration', value: tileCachingDuration });
+            },
+        },
+        tileCachingDurationOptions() {
+            return [
+                {
+                    duration: 0,
+                    name: this.$i18n.t('settings.noCaching'),
+                },
+                {
+                    duration: -1,
+                    name: this.$i18n.t('settings.defaultDuration'),
+                },
+                {
+                    duration: 3600 * 24,
+                    name: capitalize(this.$i18n.tc('relativeDate.day', 1, { count: 1 })),
+                },
+                {
+                    duration: 3600 * 24 * 7,
+                    name: capitalize(this.$i18n.tc('relativeDate.day', 7, { count: 7 })),
+                },
+            ];
+        },
         tileServer: {
             get() {
                 const tileServerStore = this.$store.state.settings.tileServer;
@@ -130,6 +168,7 @@ export default {
             name: AVAILABLE_LOCALES[iso].name,
         }));
         i18nItems.sort((a, b) => a.iso > b.iso);
+
         return {
             i18nItems,
             orientationModes: [