kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate PWA script injection

Browse Source
This commit is contained in:
sbwalker 2023-05-16 08:00:48 -04:00
parent 3b214a0105
commit 5e652364c9
5 changed files with 65 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Oqtane.Client/UI/PageState.cs
View File

@ -13,6 +13,7 @@ namespace Oqtane.UI
public Page Page { get; set; }
public User User { get; set; }
public Uri Uri { get; set; }
public Route Route { get; set; }
public Dictionary<string, string> QueryString { get; set; }
public string UrlParameters { get; set; }
public int ModuleId { get; set; }

1
Oqtane.Client/UI/SiteRouter.razor
View File

@ -223,6 +223,7 @@
Page = page,
User = user,
Uri = new Uri(_absoluteUri, UriKind.Absolute),
Route = route,
QueryString = querystring,
UrlParameters = route.UrlParameters,
ModuleId = moduleid,

67
Oqtane.Client/UI/ThemeBuilder.razor
View File

@ -30,15 +30,33 @@
}
// set page head content
var content = "";
var headcontent = "";
// favicon
var favicon = "favicon.ico";
if (PageState.Site.FaviconFileId != null)
{
favicon = Utilities.FileUrl(PageState.Alias, PageState.Site.FaviconFileId.Value);
}
content += $"<link id=\"app-favicon\" rel=\"shortcut icon\" type=\"image/x-icon\" href=\"{favicon}\" />\n";
content += PageState.Page.Meta ?? "";
SiteState.Properties.HeadContent = content;
headcontent += $"<link id=\"app-favicon\" rel=\"shortcut icon\" type=\"image/x-icon\" href=\"{favicon}\" />\n";
// PWA manifest
if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null)
{
headcontent += "<link id=\"app-manifest\" rel=\"manifest\" />";
}
// meta
headcontent += PageState.Page.Meta ?? "";
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;
}
DynamicComponent = builder =>
{
@ -68,4 +86,45 @@
await interop.RemoveElementsById("app-stylesheet-page-", "", "app-stylesheet-page-" + batch + "-00");
await interop.RemoveElementsById("app-stylesheet-module-", "", "app-stylesheet-module-" + batch + "-00");
}
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>";
}
}

8
Oqtane.Server/Pages/_Host.cshtml
View File

@ -8,10 +8,6 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="~/" />
@if (!string.IsNullOrEmpty(Model.PWAScript))
{
<link id="app-manifest" rel="manifest" />
}
<script src="js/app.js"></script>
<script src="js/loadjs.min.js"></script>
<link rel="stylesheet" href="css/app.css" />
@ -52,10 +48,6 @@
{
@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))" />
}

46
Oqtane.Server/Pages/_Host.cshtml.cs
View File

@ -65,7 +65,6 @@ namespace Oqtane.Pages
public string RemoteIPAddress = "";
public string HeadResources = "";
public string BodyResources = "";
public string PWAScript = "";
public string ReconnectScript = "";
public string Message = "";
@ -126,10 +125,6 @@ namespace Oqtane.Pages
{
ReconnectScript = CreateReconnectScript();
}
if (site.PwaIsEnabled && site.PwaAppIconFileId != null && site.PwaSplashIconFileId != null)
{
PWAScript = CreatePWAScript(alias, site, route);
}
var ThemeType = site.DefaultThemeType;
// get jwt token for downstream APIs
@ -357,47 +352,6 @@ 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