Html app structure - carlosgm02/uwp-languages GitHub Wiki
A Universal Windows Platform HTML project is the one used for Web UWP app creation. It has a group of needed files to work specifically for HTML, that runs in a normal window and visual design.
Structure is the same for JavaScript and TypeScript (the two only web scripting programming languages supported by the Universal Windows Platform), and it doesn't differ too much from the XAML structure. Actually, Web UWP apps are not naturally obfuscated, so the code will be available for everyone that has the APPX package.
These files and folders are inside a Web UWP app project:
- References: This project folder includes dlls that are added to the project from local or internet sources, Nuget packages, app dependencies and UWP extensions.
- Components: This folder has the main controls, libraries (like WinJS or React-UWP), fonts and styles used in the MainPage written into javascript files.
- Assets: This folder has all the assets (media) of the app. By default, the manifest file references to this folder for the tile icons, app list icons, splash screen image and the app icon.
- App.html: This file represents the application and it's the one that defines how Refresh (or iframe) and Navigator will work for loading MainPage.
- App.html.(x): This code file specifies the redirection and loading of the MainPage (or an online website) by the use of Refresh (or iframe) and Navigator.
- MainPage.html: This HTML file has the UI of the first (or the only one) page of the web application. The code that the controls will run when used or clicked is specified in the MainPage.html.(file extension of the programming language, e.g. .ts from TypeScript) code file.
- MainPage.html.(x): This code file has all the instructions for the app HTML controls, components, app logic and event handlers.
- Package.appxmanifest: Is the app manifest project file, which states the assets, app orientation, package name, app name, capabilities, app certificate, app version, and available tile images.
- msapp-error.html: This file is the one that replaces the online content if the web app has content from an internet source and it can't be loaded (for example when there's no internet connection).
- WWAHost.exe: This file is the one which executes the JavaScript and TypeScript code as the Web app host.
- Project.json: This file has the dependencies list, used framework (default is uap10.0), and runtimes list.
- Project.lock.json: Has the locked status, version number and targets of the app compiling.
- (ProjectName)_TemporaryKey.pfx: This certificate file is the one which signs temporarily the app project. When a project doesn't have this file, it can be generated by the package.appxmanifest file project.
- ProjectName.(x): Is the project file, which has the target properties, SDK versions, target compiling and other project properties. The file extension will change depending on the programming language project (e.g. a JavaScript project will have .jsproj file extension).
- ProjectName.sln: This is the Visual Studio solution file that references the projects included in the same solution and the main project for building/compiling.
This file represents the application and it's the one that defines how Refresh (or iframe) and Navigator will work for loading MainPage.
When the project is targeting a progressive web app, it is recommended to use the iframe, but Refresh can be used too.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Application</title>
<meta http-equiv="refresh" content="0; url=/MainPage.html">
<script src="/App.html.ts">
</script>
</head>
<body>
</body>
</html>If App.html had targeted a progressive web app, the file would have been like this. Note that the 'style' markup content is the equivalent to the App.html.css file in the JavaScript and TypeScript samples.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Application</title>
<script src="/App.html.ts">
</script>
<style>
html, body, iframe {
height: 100%;
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
overflow: hidden;
}
body {
display: -ms-grid;
-ms-grid-rows: auto 1fr;
-ms-grid-columns: 1fr;
}
body > iframe {
-ms-grid-row: 1;
-ms-grid-column-align: center;
}
</style>
</head>
<body>
<iframe onload="contentLoaded(event)" style="height: 100%; width: 100%;">
</iframe>
</body>
</html>This code file specifies the redirection and loading of the MainPage by the use of Refresh and Navigator. When the app targets progressive web app, iframe is recommended for loading the content of the online website.
It is coded in the selected programming language for the web UWP application project, so if TypeScript programming language is selected for the project, it will be called App.html.ts.
The file begins with the declared variables. To change the location of the local or online page, the MainPage declaration in the "const MainPage" needs to be replaced by the new location or URL declaration.
(function () {
"use strict";
let app = WinJS.Application;
let activation = Windows.ApplicationModel.Activation;
let sched = WinJS.Utilities.Scheduler;
const ui = WinJS.UI;
const nav = WinJS.Navigation;
const MainPage = "/MainPage.html";Then there's the addEventListener (that checks if the app is running), with the ui animation settings that make the web app run smooth and faster.
app.addEventListener("activated", function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
ui.disableAnimations();
var p = ui.processAll().then(function () {
return nav.navigate(nav.location || Application.navigator.home, nav.state);
}).then(function () {
return sched.requestDrain(sched.Priority.aboveNormal + 1);
}).then(function () {
ui.enableAnimations();
});
args.setPromise(p);
}
});And then goes the isConnected utility (that checks internet connection in the web app), and the redirect to the MainPage (or an online website) thanks to window.location.href. Its content can be replaced by 'MainPage' to modify the location or the URL directly from the 'const MainPage' declaration.
utilities.isConnected = function () {
let connectivity = Windows.Networking.Connectivity;
let profile = connectivity.NetworkInformation.getInternetConnectionProfile();
if (profile) {
return (profile.getNetworkConnectivityLevel() != connectivity.NetworkConnectivityLevel.internetAccess);
}
else {
return false;
}
}
window.location.href = "/MainPage.html"
app.start();
})();MainPage (or an online website) can also be loaded inside the iframe. To use this instead of the Refresh, the window.location.href and its content need to be replaced by the next TypeScript code.
window.reset = function () {
document.querySelector("iframe").src = MainPage;
};
window.contentLoaded = function () {
let frame = document.querySelector("iframe");
if (frame.src.indexOf(MainPage) !== -1) {
Array.prototype.forEach.call(frame.contentDocument.querySelectorAll("a[target]"), function (a) {
a.target = "";
});
}
};
window.onerror = function () {
let errorMessage = '';
let errorName = '';
if (customEventObject.detail.error) {
errorMessage = customEventObject.detail.error.message;
errorName = customEventObject.detail.error.name;
}
else {
errorMessage = customEventObject.detail.exception.message;
errorName = 'Exception';
}
let optionsObject = { errName: errorName, errMsg: errorMessage };
nav.navigate("/msapp-error.html", optionsObject);
return true;
};
document.addEventListener("DOMContentLoaded", function () {
let frame = document.querySelector("iframe");
frame.src = MainPage;
});This HTML file has the UI of the first (or the only one) page of the web application. If the iframe (or even Refresh) was placed in the MainPage, the page would need to reference an 'script' markup to App.html.(x).
The file begins with the first head properties and script references.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>MainPage</title>
<script src="/MainPage.html.js">
</script>
<script src="/Components/Navigator.js">
</script>The next part is the 'style', which is the equivalent of the MainPage.html.css file in the JavaScript and TypeScript samples, and the body markup, where the controls and components are defined in the page.
<style>
html, body {
height: 100%;
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
overflow: hidden;
}
body {
display: -ms-grid;
-ms-grid-rows: auto 1fr;
-ms-grid-columns: 1fr;
}
</style>
</head>
<body>
</body>
</html>This code file has all the instructions for the app HTML controls, components, app logic and event handlers.
It is coded in the selected programming language for the web UWP application project, so if JavaScript programming language is selected for the project, it will be called MainPage.html.js.
The file begins with the declared variables.
var app = WinJS.Application;
var nav = WinJS.Navigation;
var sched = WinJS.Utilities.Scheduler;
var ui = WinJS.UI;
var activation = Windows.ApplicationModel.Activation;
(function () {
"use strict";Then goes the addEventListener (that checks if the app is running) and the back button settings for the web app.
app.addEventListener("activated", function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
var currentview = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
currentview.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.visible;
currentview.onbackrequested = onBackRequested;
function onBackRequested(eventArgs) {
if (WinJS.Navigation.canGoBack) {
WinJS.Navigation.back(1).done(function (successInformation) {
}, function (error) {
});
}
}
} else
}
nav.history = app.sessionState.history || {};
nav.history.current.initialPlaceholder = true;
args.setPromise(p);
}
});And finally the oncheckpoint, which checks the app history is working.
app.oncheckpoint = function (args) {
app.sessionState.history = nav.history;
};
app.start();
})();