Add button to add to Home screen

2020-02-09 11:41:00 -08:00 · 2020-02-09 11:41:00 -08:00 · dc4240e702
parent 997e9422eb
commit dc4240e702
16 changed files with 101 additions and 30 deletions
--- a/locale/translations.go
+++ b/locale/translations.go
@ -19,6 +19,7 @@ var translations = map[string]string{
    "action.download": "Herunterladen",
    "action.import": "Importieren",
    "action.login": "Anmelden",
+    "action.home_screen": "Zum Startbildschirm hinzufügen",
    "tooltip.keyboard_shortcuts": "Tastenkürzel: %s",
    "tooltip.logged_user": "Angemeldet als %s",
    "menu.unread": "Ungelesen",
@ -328,6 +329,7 @@ var translations = map[string]string{
    "action.download": "Download",
    "action.import": "Import",
    "action.login": "Login",
+    "action.home_screen": "Add to home screen",
    "tooltip.keyboard_shortcuts": "Keyboard Shortcut: %s",
    "tooltip.logged_user": "Logged as %s",
    "menu.unread": "Unread",
@ -617,6 +619,7 @@ var translations = map[string]string{
    "action.download": "Descargar",
    "action.import": "Importar",
    "action.login": "Iniciar sesión",
+    "action.home_screen": "Añadir a la pantalla principal",
    "tooltip.keyboard_shortcuts": "Atajo de teclado: %s",
    "tooltip.logged_user": "Registrado como %s",
    "menu.unread": "No leídos",
@ -906,6 +909,7 @@ var translations = map[string]string{
    "action.download": "Télécharger",
    "action.import": "Importer",
    "action.login": "Se connecter",
+    "action.home_screen": "Ajouter à l'écran d'accueil",
    "tooltip.keyboard_shortcuts": "Raccourci clavier : %s",
    "tooltip.logged_user": "Connecté en tant que %s",
    "menu.unread": "Non lus",
@ -1215,6 +1219,7 @@ var translations = map[string]string{
    "action.download": "Scarica",
    "action.import": "Importa",
    "action.login": "Accedi",
+    "action.home_screen": "Aggiungere alla schermata Home",
    "tooltip.keyboard_shortcuts": "Scorciatoia da tastiera: %s",
    "tooltip.logged_user": "Autenticato come %s",
    "menu.unread": "Da leggere",
@ -1504,6 +1509,7 @@ var translations = map[string]string{
    "action.download": "Download",
    "action.import": "Importeren",
    "action.login": "Inloggen",
+    "action.home_screen": "Toevoegen aan startscherm",
    "tooltip.keyboard_shortcuts": "Sneltoets: %s",
    "tooltip.logged_user": "Ingelogd als %s",
    "menu.unread": "Ongelezen",
@ -1811,6 +1817,7 @@ var translations = map[string]string{
    "action.download": "Pobierz",
    "action.import": "Importuj",
    "action.login": "Zaloguj się",
+    "action.home_screen": "Dodaj do ekranu głównego",
    "tooltip.keyboard_shortcuts": "Skróty klawiszowe: %s",
    "tooltip.logged_user": "Zalogowany jako %s",
    "menu.unread": "Nieprzeczytane",
@ -2126,6 +2133,7 @@ var translations = map[string]string{
    "action.download": "Загрузить",
    "action.import": "Импорт",
    "action.login": "Войти",
+    "action.home_screen": "Добавить на домашний экран",
    "tooltip.keyboard_shortcuts": "Сочетания клавиш: %s",
    "tooltip.logged_user": "Авторизован как %s",
    "menu.unread": "Непрочитанное",
@ -2423,6 +2431,7 @@ var translations = map[string]string{
    "action.download": "下载",
    "action.import": "导入",
    "action.login": "登陆",
+    "action.home_screen": "添加到主屏幕",
    "tooltip.keyboard_shortcuts": "快捷键: %s",
    "tooltip.logged_user": "当前登录 %s",
    "menu.unread": "未读",
@ -2710,13 +2719,13 @@ var translations = map[string]string{
 }

 var translationsChecksums = map[string]string{
-	"de_DE": "48a150c0d6c13f1d75e51f9c68c04c70c272674c6acdfed2d6667cfaca2b01db",
-	"en_US": "84eb60749bf7d5ce8e9f51af573584f66faf79af98f43f422515d34a963a9f68",
-	"es_ES": "186adde92917b7ebedea6cb0e8532f3e548ca47931270fb8fb3d84f832854657",
-	"fr_FR": "679abce075ab70ccb61f17be8f3e75a6bbb68cd20afb945cb238d97e483bedde",
-	"it_IT": "fcc5285b1e2866219e6de1aba59f37426ddaa48ebe83a880bb23dd92e52358c6",
-	"nl_NL": "11b80c1461d3d089c864748e738422552c878ffcb2b1e95b9e9abe238c42a85b",
-	"pl_PL": "2cb075ac066add7ec59c25970a91e78fc0cb940ffb47995cc4faafc0123ffed6",
-	"ru_RU": "b88acde2af7fbf76259b700f5a0bac7b5500db71add53b8b7ae638f7127c2dff",
-	"zh_CN": "0400139a88fce1650863e4ddcdfe9bf6c7cf11e5c16a74936ce3529b3e7ef681",
+	"de_DE": "2269a754f4af398fe6af44324eda8ed7daa708a11eb50f7bb0b779d6ed482ad8",
+	"en_US": "5256a170a5be7ba8e79ed0897475c416ce755797e9ab1173375dc5113515c2d8",
+	"es_ES": "19f48e44422712789a3736399e5d5fe9f88cc7fa3e4c228fdceec03f5d3666cd",
+	"fr_FR": "e6032bfec564e86f12182ea79f0ed61ec133ed0c04525571ab71e923cc5de276",
+	"it_IT": "39a466b969ffadf27e4bc3054ab36fe8b2bceb0d9c0a68d940d76a418d999073",
+	"nl_NL": "fc10720566f37e88da60add9eaefa6f79cb6b021e9f3c192e50dfc5720553d69",
+	"pl_PL": "fc99fbde29904f3680e95ed337e7d9b2c0755cc8137c2694d8b781c91007ae19",
+	"ru_RU": "a01fc70baedd9555370e29827ef8c9aba32a4fb8f07942feb7474bcac232a2fe",
+	"zh_CN": "3bd2c9841413c072d1977dc500d8adecef4f947b28f3a8d3e8d4f0e5c39584ad",
 }
--- a/locale/translations/de_DE.json
+++ b/locale/translations/de_DE.json
@ -14,6 +14,7 @@
    "action.download": "Herunterladen",
    "action.import": "Importieren",
    "action.login": "Anmelden",
+    "action.home_screen": "Zum Startbildschirm hinzufügen",
    "tooltip.keyboard_shortcuts": "Tastenkürzel: %s",
    "tooltip.logged_user": "Angemeldet als %s",
    "menu.unread": "Ungelesen",
--- a/locale/translations/en_US.json
+++ b/locale/translations/en_US.json
@ -14,6 +14,7 @@
    "action.download": "Download",
    "action.import": "Import",
    "action.login": "Login",
+    "action.home_screen": "Add to home screen",
    "tooltip.keyboard_shortcuts": "Keyboard Shortcut: %s",
    "tooltip.logged_user": "Logged as %s",
    "menu.unread": "Unread",
--- a/locale/translations/es_ES.json
+++ b/locale/translations/es_ES.json
@ -14,6 +14,7 @@
    "action.download": "Descargar",
    "action.import": "Importar",
    "action.login": "Iniciar sesión",
+    "action.home_screen": "Añadir a la pantalla principal",
    "tooltip.keyboard_shortcuts": "Atajo de teclado: %s",
    "tooltip.logged_user": "Registrado como %s",
    "menu.unread": "No leídos",
--- a/locale/translations/fr_FR.json
+++ b/locale/translations/fr_FR.json
@ -14,6 +14,7 @@
    "action.download": "Télécharger",
    "action.import": "Importer",
    "action.login": "Se connecter",
+    "action.home_screen": "Ajouter à l'écran d'accueil",
    "tooltip.keyboard_shortcuts": "Raccourci clavier : %s",
    "tooltip.logged_user": "Connecté en tant que %s",
    "menu.unread": "Non lus",
--- a/locale/translations/it_IT.json
+++ b/locale/translations/it_IT.json
@ -14,6 +14,7 @@
    "action.download": "Scarica",
    "action.import": "Importa",
    "action.login": "Accedi",
+    "action.home_screen": "Aggiungere alla schermata Home",
    "tooltip.keyboard_shortcuts": "Scorciatoia da tastiera: %s",
    "tooltip.logged_user": "Autenticato come %s",
    "menu.unread": "Da leggere",
--- a/locale/translations/nl_NL.json
+++ b/locale/translations/nl_NL.json
@ -14,6 +14,7 @@
    "action.download": "Download",
    "action.import": "Importeren",
    "action.login": "Inloggen",
+    "action.home_screen": "Toevoegen aan startscherm",
    "tooltip.keyboard_shortcuts": "Sneltoets: %s",
    "tooltip.logged_user": "Ingelogd als %s",
    "menu.unread": "Ongelezen",
--- a/locale/translations/pl_PL.json
+++ b/locale/translations/pl_PL.json
@ -14,6 +14,7 @@
    "action.download": "Pobierz",
    "action.import": "Importuj",
    "action.login": "Zaloguj się",
+    "action.home_screen": "Dodaj do ekranu głównego",
    "tooltip.keyboard_shortcuts": "Skróty klawiszowe: %s",
    "tooltip.logged_user": "Zalogowany jako %s",
    "menu.unread": "Nieprzeczytane",
--- a/locale/translations/ru_RU.json
+++ b/locale/translations/ru_RU.json
@ -14,6 +14,7 @@
    "action.download": "Загрузить",
    "action.import": "Импорт",
    "action.login": "Войти",
+    "action.home_screen": "Добавить на домашний экран",
    "tooltip.keyboard_shortcuts": "Сочетания клавиш: %s",
    "tooltip.logged_user": "Авторизован как %s",
    "menu.unread": "Непрочитанное",
--- a/locale/translations/zh_CN.json
+++ b/locale/translations/zh_CN.json
@ -14,6 +14,7 @@
    "action.download": "下载",
    "action.import": "导入",
    "action.login": "登陆",
+    "action.home_screen": "添加到主屏幕",
    "tooltip.keyboard_shortcuts": "快捷键: %s",
    "tooltip.logged_user": "当前登录 %s",
    "menu.unread": "未读",
--- a/template/html/login.html
+++ b/template/html/login.html
@ -25,4 +25,7 @@
    </div>
    {{ end }}
 </section>
+<footer id="prompt-home-screen">
+    <a href="#" id="btn-add-to-home-screen">★ {{ t "action.home_screen" }}</a>
+</footer>
 {{ end }}
--- a/template/views.go
+++ b/template/views.go
@ -1047,6 +1047,9 @@ var templateViewsMap = map[string]string{
    </div>
    {{ end }}
 </section>
+<footer id="prompt-home-screen">
+    <a href="#" id="btn-add-to-home-screen">★ {{ t "action.home_screen" }}</a>
+</footer>
 {{ end }}
 `,
 	"search_entries": `{{ define "title"}}{{ t "page.search.title" }} ({{ .total }}){{ end }}
@ -1324,7 +1327,7 @@ var templateViewsMapChecksums = map[string]string{
 	"history_entries":     "87e17d39de70eb3fdbc4000326283be610928758eae7924e4b08dcb446f3b6a9",
 	"import":              "1b59b3bd55c59fcbc6fbb346b414dcdd26d1b4e0c307e437bb58b3f92ef01ad1",
 	"integrations":        "6104ff6ff3ac3c1ae5e850c78250aab6e99e2342a337589f3848459fa333766a",
-	"login":               "2e72d2d4b9786641b696bedbed5e10b04bdfd68254ddbbdb0a53cca621d200c7",
+	"login":               "0657174d13229bb6d0bc470ccda06bb1f15c1af65c86b20b41ffa5c819eef0cc",
 	"search_entries":      "274950d03298c24f3942e209c0faed580a6d57be9cf76a6c236175a7e766ac6a",
 	"sessions":            "5d5c677bddbd027e0b0c9f7a0dd95b66d9d95b4e130959f31fb955b926c2201c",
 	"settings":            "56f7c06f24eef317353582b0191aa9a5985f46ed755accf97e723ceb4bba4469",
--- a/ui/static/css.go
+++ b/ui/static/css.go
--- a/ui/static/css/common.css
+++ b/ui/static/css/common.css
@ -151,6 +151,29 @@ a:hover {
    display: none;
 }

+/* PWA prompt */
+#prompt-home-screen {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    text-align: center;
+    background: #000;
+    opacity: 85%;
+}
+
+#btn-add-to-home-screen {
+    text-decoration: none;
+    line-height: 30px;
+    color: #fff;
+}
+
+#btn-add-to-home-screen:hover {
+    color: red;
+}
+
+/* Notification - "Toast" */
 .toast-wrap {
    visibility: hidden;
    opacity: 0;
@ -162,11 +185,11 @@ a:hover {
    text-align: center;
 }

- .toast-msg {
+.toast-msg {
    background-color: rgba(0,0,0,0.7);
    padding: 2px 5px;
    border-radius: 5px;
- }
+}
 
 .toastAnimate {
    animation: toastKeyFrames 2s;
@ -174,10 +197,10 @@ a:hover {

@keyframes toastKeyFrames {
    0% {visibility: hidden; opacity: 0;}
-   25% {visibility: visible; opacity: 1; z-index: 9999}
-   50% {visibility: visible; opacity: 1; z-index: 9999}
-   75% {visibility: visible; opacity: 1; z-index: 9999}
-   100% {visibility: hidden; opacity: 0; z-index: 0}
+    25% {visibility: visible; opacity: 1; z-index: 9999}
+    50% {visibility: visible; opacity: 1; z-index: 9999}
+    75% {visibility: visible; opacity: 1; z-index: 9999}
+    100% {visibility: hidden; opacity: 0; z-index: 0}
 }

@media (min-width: 600px) {
--- a/ui/static/js.go
+++ b/ui/static/js.go
@ -105,11 +105,12 @@ function handleConfirmationMessage(linkElement,callback){linkElement.style.displ
 function toast(msg){if(!msg)return;document.querySelector('.toast-wrap .toast-msg').innerHTML=msg;let toastWrapper=document.querySelector('.toast-wrap');toastWrapper.classList.remove('toastAnimate');setTimeout(function(){toastWrapper.classList.add('toastAnimate');},100);}
 document.addEventListener("DOMContentLoaded",function(){handleSubmitButtons();if(!document.querySelector("body[data-disable-keyboard-shortcuts=true]")){let keyboardHandler=new KeyboardHandler();keyboardHandler.on("g u",()=>goToPage("unread"));keyboardHandler.on("g b",()=>goToPage("starred"));keyboardHandler.on("g h",()=>goToPage("history"));keyboardHandler.on("g f",()=>goToFeedOrFeeds());keyboardHandler.on("g c",()=>goToPage("categories"));keyboardHandler.on("g s",()=>goToPage("settings"));keyboardHandler.on("ArrowLeft",()=>goToPrevious());keyboardHandler.on("ArrowRight",()=>goToNext());keyboardHandler.on("k",()=>goToPrevious());keyboardHandler.on("p",()=>goToPrevious());keyboardHandler.on("j",()=>goToNext());keyboardHandler.on("n",()=>goToNext());keyboardHandler.on("h",()=>goToPage("previous"));keyboardHandler.on("l",()=>goToPage("next"));keyboardHandler.on("o",()=>openSelectedItem());keyboardHandler.on("v",()=>openOriginalLink());keyboardHandler.on("V",()=>openOriginalLink(true));keyboardHandler.on("c",()=>openCommentLink());keyboardHandler.on("C",()=>openCommentLink(true));keyboardHandler.on("m",()=>handleEntryStatus());keyboardHandler.on("A",()=>markPageAsRead());keyboardHandler.on("s",()=>handleSaveEntry());keyboardHandler.on("d",()=>handleFetchOriginalContent());keyboardHandler.on("f",()=>handleBookmark());keyboardHandler.on("?",()=>showKeyboardShortcuts());keyboardHandler.on("#",()=>unsubscribeFromFeed());keyboardHandler.on("/",(e)=>setFocusToSearchInput(e));keyboardHandler.on("Escape",()=>ModalHandler.close());keyboardHandler.listen();}
 let touchHandler=new TouchHandler();touchHandler.listen();onClick("a[data-save-entry]",(event)=>handleSaveEntry(event.target));onClick("a[data-toggle-bookmark]",(event)=>handleBookmark(event.target));onClick("a[data-fetch-content-entry]",()=>handleFetchOriginalContent());onClick("a[data-action=search]",(event)=>setFocusToSearchInput(event));onClick("a[data-action=markPageAsRead]",()=>handleConfirmationMessage(event.target,()=>markPageAsRead()));onClick("a[data-toggle-status]",(event)=>handleEntryStatus(event.target));onClick("a[data-confirm]",(event)=>handleConfirmationMessage(event.target,(url,redirectURL)=>{let request=new RequestBuilder(url);request.withCallback(()=>{if(redirectURL){window.location.href=redirectURL;}else{window.location.reload();}});request.execute();}));if(document.documentElement.clientWidth<600){onClick(".logo",()=>toggleMainMenu());onClick(".header nav li",(event)=>onClickMainMenuListItem(event));}
-if("serviceWorker"in navigator){let scriptElement=document.getElementById("service-worker-script");if(scriptElement){navigator.serviceWorker.register(scriptElement.src);}}});})();`,
+if("serviceWorker"in navigator){let scriptElement=document.getElementById("service-worker-script");if(scriptElement){navigator.serviceWorker.register(scriptElement.src);}}
+window.addEventListener('beforeinstallprompt',(e)=>{e.preventDefault();let deferredPrompt=e;const promptHomeScreen=document.getElementById('prompt-home-screen');if(promptHomeScreen){promptHomeScreen.style.display="block";const btnAddToHomeScreen=document.getElementById('btn-add-to-home-screen');if(btnAddToHomeScreen){btnAddToHomeScreen.addEventListener('click',(e)=>{e.preventDefault();deferredPrompt.prompt();deferredPrompt.userChoice.then(()=>{deferredPrompt=null;promptHomeScreen.style.display="none";});});}}});});})();`,
 	"sw": `'use strict';self.addEventListener("fetch",(event)=>{if(event.request.url.includes("/feed/icon/")){event.respondWith(caches.open("feed_icons").then((cache)=>{return cache.match(event.request).then((response)=>{return response||fetch(event.request).then((response)=>{cache.put(event.request,response.clone());return response;});});}));}});`,
 }

 var JavascriptsChecksums = map[string]string{
-	"app": "d8e3f4b637310a178cafbfdc5d6726e590951147718de733f12bb90100c1b9d3",
+	"app": "f26277a4397cc129a40190d5b7f008611a4cbe052e3fad71b7a4f5de473a1bf9",
 	"sw":  "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9",
 }
--- a/ui/static/js/bootstrap.js
+++ b/ui/static/js/bootstrap.js
@ -69,4 +69,27 @@ document.addEventListener("DOMContentLoaded", function () {
            navigator.serviceWorker.register(scriptElement.src);
        }
    }
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+        // Prevent Chrome 67 and earlier from automatically showing the prompt.
+        e.preventDefault();
+
+        let deferredPrompt = e;
+        const promptHomeScreen = document.getElementById('prompt-home-screen');
+        if (promptHomeScreen) {
+            promptHomeScreen.style.display = "block";
+
+            const btnAddToHomeScreen = document.getElementById('btn-add-to-home-screen');
+            if (btnAddToHomeScreen) {
+                btnAddToHomeScreen.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    deferredPrompt.prompt();
+                    deferredPrompt.userChoice.then(() => {
+                        deferredPrompt = null;
+                        promptHomeScreen.style.display = "none";
+                    });
+                });
+            }
+        }
+    });    
 });