Add button to add to Home screen

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) {

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",
 }

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";
+                    });
+                });
+            }
+        }
+    });    
 });