Merge pull request #2822 from sbwalker/dev

move PWA elements back to _Host

Oqtane.Client/UI/ThemeBuilder.razor

@@ -53,19 +53,10 @@
             var url = (resource.Url.Contains("://")) ? resource.Url : PageState.Alias.BaseUrl + resource.Url;
             headcontent += CreateLink(url, resource.Integrity, resource.CrossOrigin) + "\n";
         }
-        // PWA manifest
-        if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null)
-        {
-            headcontent += "<link id=\"app-manifest\" rel=\"manifest\" />\n";
-        }
         SiteState.Properties.HeadContent = headcontent;
 
         // set page body content
         var bodycontent = "";
-        if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null)
-        {
-            bodycontent += CreatePWAScript(PageState.Alias, PageState.Site, PageState.Route);
-        }
         if (bodycontent != "")
         {
             SiteState.Properties.BodyContent = bodycontent;
@@ -161,45 +152,4 @@
     {
         return "<link rel=\"stylesheet\" href=\"" + url + "\"" + (!string.IsNullOrEmpty(integrity) ? " integrity=\"" + integrity + "\"" : "") + (!string.IsNullOrEmpty(crossorigin) ? " crossorigin=\"" + crossorigin + "\"" : "") + " type=\"text/css\"/>";
     }
-
-    private string CreatePWAScript(Alias alias, Site site, Route route)
-    {
-        return
-        "<script>" + Environment.NewLine +
-        "    // PWA Manifest" + Environment.NewLine +
-        "    setTimeout(() => {" + Environment.NewLine +
-        "        var manifest = {" + Environment.NewLine +
-        "            \"name\": \"" + site.Name + "\"," + Environment.NewLine +
-        "            \"short_name\": \"" + site.Name + "\"," + Environment.NewLine +
-        "            \"start_url\": \"" + route.SiteUrl + "/\"," + Environment.NewLine +
-        "            \"display\": \"standalone\"," + Environment.NewLine +
-        "            \"background_color\": \"#fff\"," + Environment.NewLine +
-        "            \"description\": \"" + site.Name + "\"," + Environment.NewLine +
-        "            \"icons\": [{" + Environment.NewLine +
-        "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaAppIconFileId.Value) + "\"," + Environment.NewLine +
-        "                \"sizes\": \"192x192\"," + Environment.NewLine +
-        "                \"type\": \"image/png\"" + Environment.NewLine +
-        "                }, {" + Environment.NewLine +
-        "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaSplashIconFileId.Value) + "\"," + Environment.NewLine +
-        "                \"sizes\": \"512x512\"," + Environment.NewLine +
-        "                \"type\": \"image/png\"" + Environment.NewLine +
-        "            }]" + Environment.NewLine +
-        "       };" + Environment.NewLine +
-        "       const serialized = JSON.stringify(manifest);" + Environment.NewLine +
-        "       const blob = new Blob([serialized], {type: 'application/javascript'});" + Environment.NewLine +
-        "       const url = URL.createObjectURL(blob);" + Environment.NewLine +
-        "       document.getElementById('app-manifest').setAttribute('href', url);" + Environment.NewLine +
-        "    }, 1000);" + Environment.NewLine +
-        "</script>" + Environment.NewLine +
-        "<script>" + Environment.NewLine +
-        "    // PWA Service Worker" + Environment.NewLine +
-        "    if ('serviceWorker' in navigator) {" + Environment.NewLine +
-        "        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {" + Environment.NewLine +
-        "            console.log('ServiceWorker Registration Successful');" + Environment.NewLine +
-        "        }).catch (function(err) {" + Environment.NewLine +
-        "            console.log('ServiceWorker Registration Failed ', err);" + Environment.NewLine +
-        "        });" + Environment.NewLine +
-        "    };" + Environment.NewLine +
-        "</script>";
-    }
 }

Oqtane.Server/Pages/_Host.cshtml

@@ -11,6 +11,10 @@
     <script src="js/app.js"></script>
     <script src="js/loadjs.min.js"></script>
     <link rel="stylesheet" href="css/app.css" />
+    @if (!string.IsNullOrEmpty(Model.PWAScript))
+    {
+        <link id="app-manifest" rel="manifest" />
+    }
     @Html.Raw(Model.HeadResources)
     <component type="typeof(Oqtane.Head)" render-mode="@((RenderMode)Enum.Parse(typeof(RenderMode), Model.RenderMode, true))" />
 </head>
@@ -46,6 +50,10 @@
 		{
 			@Html.Raw(Model.ReconnectScript)
 		}
+        @if (!string.IsNullOrEmpty(Model.PWAScript))
+        {
+            @Html.Raw(Model.PWAScript)
+        }
         @Html.Raw(Model.BodyResources)
         <component type="typeof(Oqtane.Body)" render-mode="@((RenderMode)Enum.Parse(typeof(RenderMode), Model.RenderMode, true))" />
     }

Oqtane.Server/Pages/_Host.cshtml.cs

@@ -65,6 +65,7 @@ namespace Oqtane.Pages
         public string RemoteIPAddress = "";
         public string HeadResources = "";
         public string BodyResources = "";
+        public string PWAScript = "";
         public string ReconnectScript = "";
         public string Message = "";
 
@@ -125,6 +126,10 @@ namespace Oqtane.Pages
                         {
                             ReconnectScript = CreateReconnectScript();
                         }
+                        if (site.PwaIsEnabled && site.PwaAppIconFileId != null && site.PwaSplashIconFileId != null)
+                        {
+                            PWAScript = CreatePWAScript(alias, site, route);
+                        }
                         if (!string.IsNullOrEmpty(site.HeadContent))
                         {
                             ProcessHeadContent(site.HeadContent, "site");
@@ -349,6 +354,47 @@ namespace Oqtane.Pages
             }
         }
 
+        private string CreatePWAScript(Alias alias, Site site, Route route)
+        {
+            return
+            "<script>" + Environment.NewLine +
+            "    // PWA Manifest" + Environment.NewLine +
+            "    setTimeout(() => {" + Environment.NewLine +
+            "        var manifest = {" + Environment.NewLine +
+            "            \"name\": \"" + site.Name + "\"," + Environment.NewLine +
+            "            \"short_name\": \"" + site.Name + "\"," + Environment.NewLine +
+            "            \"start_url\": \"" + route.SiteUrl + "/\"," + Environment.NewLine +
+            "            \"display\": \"standalone\"," + Environment.NewLine +
+            "            \"background_color\": \"#fff\"," + Environment.NewLine +
+            "            \"description\": \"" + site.Name + "\"," + Environment.NewLine +
+            "            \"icons\": [{" + Environment.NewLine +
+            "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaAppIconFileId.Value) + "\"," + Environment.NewLine +
+            "                \"sizes\": \"192x192\"," + Environment.NewLine +
+            "                \"type\": \"image/png\"" + Environment.NewLine +
+            "                }, {" + Environment.NewLine +
+            "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaSplashIconFileId.Value) + "\"," + Environment.NewLine +
+            "                \"sizes\": \"512x512\"," + Environment.NewLine +
+            "                \"type\": \"image/png\"" + Environment.NewLine +
+            "            }]" + Environment.NewLine +
+            "       };" + Environment.NewLine +
+            "       const serialized = JSON.stringify(manifest);" + Environment.NewLine +
+            "       const blob = new Blob([serialized], {type: 'application/javascript'});" + Environment.NewLine +
+            "       const url = URL.createObjectURL(blob);" + Environment.NewLine +
+            "       document.getElementById('app-manifest').setAttribute('href', url);" + Environment.NewLine +
+            "    }, 1000);" + Environment.NewLine +
+            "</script>" + Environment.NewLine +
+            "<script>" + Environment.NewLine +
+            "    // PWA Service Worker" + Environment.NewLine +
+            "    if ('serviceWorker' in navigator) {" + Environment.NewLine +
+            "        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {" + Environment.NewLine +
+            "            console.log('ServiceWorker Registration Successful');" + Environment.NewLine +
+            "        }).catch (function(err) {" + Environment.NewLine +
+            "            console.log('ServiceWorker Registration Failed ', err);" + Environment.NewLine +
+            "        });" + Environment.NewLine +
+            "    };" + Environment.NewLine +
+            "</script>";
+        }
+
         private string CreateReconnectScript()
         {
             return