feat: Display Snackbar for PWA installation reminder - MEED-7119 - Meeds-io/MIPs#134

Author: boubaker

webapp/portlet/src/main/resources/locale/portlet/Portlets_en.properties

@@ -915,3 +915,6 @@ nodeIconPickerDrawer.cancel=cancel
 nodeIconPickerDrawer.showMore=Show more
 nodeIconPickerDrawer.searchPlaceholder=Filter by name
 nodeIconPickerDrawer.edit=Update
+
+pwa.feature.suggest=Get the Best Experience on the App
+pwa.feature.suggest.install=Install

webapp/portlet/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -2740,6 +2740,14 @@
     </depends>
   </module>
 
+  <module>
+    <name>pwa</name>
+    <load-group>baseGRP</load-group>
+    <script>
+      <path>/js/pwa.js</path>
+    </script>
+  </module>
+
   <module>
     <name>jquery</name>
     <as>$</as>

webapp/portlet/src/main/webapp/groovy/social/webui/UISocialPortalApplicationHead.gtmpl

@@ -68,11 +68,4 @@
      eXo.env.portal.attachmentObjectTypes = ['<%=StringUtils.join(supportedAttachmentObjectTypes, "', '")%>'];
      eXo.env.portal.customStylesheetEnabled = <%=featureService.isFeatureActiveForUser("customStylesheet", userName)%>;
      eXo.env.portal.pwaEnabled = <%=featureService.isFeatureActiveForUser("pwa", userName)%>;
-     if (eXo.env.portal.pwaEnabled) {
-       window.deferredPwaPrompt;
-       window.addEventListener('beforeinstallprompt', (e) => {
-         e.preventDefault();
-         window.deferredPwaPrompt = e;
-       });
-     }
 </script>

webapp/portlet/src/main/webapp/js/pwa.js

@@ -0,0 +1,31 @@
+(function() {
+  return {
+    init: () => {
+      if (window.eXo.env.portal.pwaEnabled
+        && !window?.matchMedia('(display-mode: standalone)')?.matches) {
+        window.addEventListener('beforeinstallprompt', (e) => {
+          e.preventDefault();
+          window.deferredPwaPrompt = e;
+          if (window.localStorage && !window.localStorage.getItem('pwa.suggested')) {
+            window.deferredPwaPromptTimeout = window.setTimeout(async () => {
+              document.dispatchEvent(new CustomEvent('alert-message', {detail:{
+                alertMessage: window.vueI18nMessages['pwa.feature.suggest'],
+                alertLinkText: window.vueI18nMessages['pwa.feature.suggest.install'],
+                alertType: 'info',
+                alertLinkCallback: async () => {
+                  document.dispatchEvent(new CustomEvent('close-alert-message'));
+                  await window.deferredPwaPrompt.prompt();
+                  const { outcome } = await window.deferredPwaPrompt.userChoice;
+                  if (outcome === 'accepted') {
+                    window.deferredPwaPrompt = null;
+                  }
+                  window.localStorage.setItem('pwa.suggested', 'true');
+                },
+              }}));
+            }, 15000);
+          }
+        });
+      }
+    },
+  };
+})();

webapp/portlet/src/main/webapp/js/vue-i18n-wrapper.js

@@ -45,6 +45,7 @@
     fallbackLocale: 'en',
     messages: i18nMessages,
   });
+  window.vueI18nMessages = i18n.messages?.[eXo.env.portal.language];
 
   /**
    * Load translated strings from the given URLs and for the given language

webapp/portlet/src/main/webapp/vue-apps/user-setting-pwa/components/UserSettingPwa.vue

@@ -16,7 +16,7 @@
             </v-list-item-content>
             <v-list-item-action>
               <v-btn
-                :aria-label="$t(UserSettings.pwa.install)"
+                :aria-label="$t('UserSettings.pwa.install')"
                 :loading="loading"
                 :disabled="disabledButton"
                 class="btn"
@@ -56,10 +56,11 @@ export default {
         this.displayed = false;
       }
     });
-    this.enabled = eXo.env.portal.pwaEnabled
-      && !!window.deferredPwaPrompt
-      && !window?.matchMedia('(display-mode: standalone)')?.matches;
+    this.enabled = !!window.deferredPwaPrompt;
     if (this.enabled) {
+      if (window.deferredPwaPromptTimeout) {
+        window.clearTimeout(window.deferredPwaPromptTimeout);
+      }
       window.addEventListener('appinstalled', this.hideApplication);
     }
   },
@@ -85,5 +86,4 @@ export default {
     },
   },
 };
-</script>
-
+</script>