Progressive Web Application functionality to Moqui

base-component/webroot/screen/includes/Header.html.ftl

@@ -8,7 +8,10 @@
     <#assign parentMenuName = (sri.screenUrlInfo.parentScreen.getDefaultMenuName())!"">
     <#assign defaultMenuName = sri.screenUrlInfo.targetScreen.getDefaultMenuName()>
     <title><#if html_title?has_content>${html_title}<#else><#if parentMenuName?has_content>${ec.resource.expand(parentMenuName, "")} - </#if><#if defaultMenuName?has_content>${ec.resource.expand(defaultMenuName, "")}</#if></#if></title>
-    <link rel="apple-touch-icon" href="/MoquiLogo100.png"/>
+    <#-- See: https://stackoverflow.com/questions/5110776/apple-touch-icon-for-websites and https://web.dev/learn/pwa/web-app-manifest/#icons-in-safari -->
+    <link rel="apple-touch-icon" href="/MoquiLogoMaskable180.png"/>
+    <#assign manifestUrl = sri.getScreenPathHasTransition("manifest.webmanifest")!>
+    <#if manifestUrl?has_content><link rel="manifest" href="${manifestUrl}manifest.webmanifest"></#if>
 <#-- Style Sheets -->
 <#list sri.getThemeValues("STRT_STYLESHEET") as styleSheetLocation>
     <#assign hrefUrl = sri.buildUrl(styleSheetLocation).url>

base-component/webroot/screen/webroot.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
-This software is in the public domain under CC0 1.0 Universal plus a 
+This software is in the public domain under CC0 1.0 Universal plus a
 Grant of Patent License.
 
 To the extent possible under law, the author(s) have dedicated all

base-component/webroot/screen/webroot/apps.xml

@@ -37,6 +37,39 @@ along with this software (see the LICENSE.md file). If not, see
         <actions><script>ec.web.sendQzSignedResponse(message)</script></actions>
         <default-response type="none"/>
     </transition>
+    <transition name="manifest.webmanifest" read-only="true">
+        <actions><script><![CDATA[
+            def manifestOut = [
+                    name: "Moqui",
+                    short_name: "Moqui",
+                    icons: [
+                            [
+                                    // See https://web.dev/learn/pwa/web-app-manifest/#maskable-icons and https://web.dev/learn/pwa/web-app-manifest/#icons
+                                    src: '/MoquiLogoMaskable512.png',
+                                    type: "image/png",
+                                    sizes: "512x512",
+                                    // See https://web.dev/maskable-icon
+                                    purpose: "any maskable"
+                            ],
+                    ],
+                    // TODO: Figure out how to get the current screen and display the url here and possible use it as an id?
+                    start_url: '/',
+                    display: "fullscreen",
+                    prefer_related_applications: true
+            ];
+            ec.web.sendJsonResponse(manifestOut)
+            ]]></script>
+        </actions>
+        <default-response type="none"/>
+    </transition>
+
+    <transition name="serviceWorker.js" read-only="true">
+        <actions><script><![CDATA[
+            ec.web.sendResourceResponse("component://webroot/screen/webroot/serviceWorker.js")
+            ]]></script>
+        </actions>
+        <default-response type="none"/>
+    </transition>
 
     <subscreens default-item="AppList"/>
 

base-component/webroot/screen/webroot/js/MoquiLib.js

@@ -589,6 +589,12 @@ if (window.Inputmask) {
     });
 }
 
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+        .register('/serviceWorker.js')
+        .then(() => { console.log('Service Worker Registered'); });
+}
+
 /* doesn't work because Chart.js is loaded as needed on screens, and after this loads, leaving commented here as would be nice:
 if (window.Chart) {
     Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {

base-component/webroot/screen/webroot/qapps.xml

@@ -16,6 +16,8 @@ along with this software (see the LICENSE.md file). If not, see
         require-authentication="false" screen-theme-type-enum-id="STT_INTERNAL_QUASAR" default-menu-title="Applications" allow-extra-path="true">
     <!-- NOTE: require-authentication=false so no permission required but in pre-actions if no user logged in goes to login screen -->
 
+    <transition-include name="manifest.webmanifest" location="component://webroot/screen/webroot/apps.xml"/>
+
     <pre-actions><script><![CDATA[
         // if user not logged in save current path and params then redirect to Login
         if (!ec.user.userId) { ec.web.saveScreenLastInfo(null, null); sri.sendRedirectAndStopRender('/Login') }

base-component/webroot/screen/webroot/serviceWorker.js

@@ -0,0 +1,14 @@
+self.addEventListener('install', (e) => {
+    // e.waitUntil(
+    //     caches.open('moqui-store').then((cache) => cache.addAll([
+    //         '/favicon.ico'
+    //     ])),
+    // );
+});
+
+self.addEventListener('fetch', (e) => {
+    // console.log(e.request.url);
+    // e.respondWith(
+    //     caches.match(e.request).then((response) => response || fetch(e.request)),
+    // );
+});

base-component/webroot/screen/webroot/vapps.xml

@@ -16,6 +16,8 @@ along with this software (see the LICENSE.md file). If not, see
         require-authentication="false" screen-theme-type-enum-id="STT_INTERNAL" default-menu-title="Applications" allow-extra-path="true">
     <!-- NOTE: require-authentication=false so no permission required but in pre-actions if no user logged in goes to login screen -->
 
+    <transition-include name="manifest.webmanifest" location="component://webroot/screen/webroot/apps.xml"/>
+
     <pre-actions><script><![CDATA[
         // if user not logged in save current path and params then redirect to Login
         if (!ec.user.userId) { ec.web.saveScreenLastInfo(null, null); sri.sendRedirectAndStopRender('/Login') }