Burtoft Senior Program Manager Hosted Web Apps and Platform Innovations Hosted Web Apps and Web Platform Innovations 2665 Introducing Windows Web Apps Hosted Web Apps Packaged Web Apps WebView ID: 290498
Download Presentation The PPT/PDF document "Jeff" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1Slide2
Jeff BurtoftSenior Program ManagerHosted Web Apps and Platform Innovations
Hosted Web Apps and Web Platform Innovations
2-665Slide3
Introducing Windows Web AppsHosted Web AppsPackaged Web AppsWebView
Tooling
AgendaSlide4
Windows 10 AppsSlide5
The Journey to One Windows
Windows Desktop
IoT
HoloLens
Surface Hub
Windows Phone
XBox
ONE CORE OS
ONE APP PLATFORM
ONE STORE
Windows 10Slide6
EdgeHTML.dll
Chakra
Hosted content
Always up-to-date
Packaged content
Offline firstSlide7
Hosted Web AppsSlide8
Hosted Web App Jeopardy
Hosted
AppardySlide9
Friendless
In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$100
$100
$100$100$500$500$500$500$500
$2000$2000$2000$2000$2000$1,000,000$1,000,000
$1,000,000$1,000,000$1,000,000Slide10
Friendless
In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$100
$100
$100$500$500$500$500$500
$2000$2000$2000$2000$2000$1,000,000$1,000,000
$1,000,000$1,000,000$1,000,000Slide11
Keep your web workflow for updating content
Hosted Web Apps
Code
Visual Studio
Notepad++
Brackets
Vim
ATOM
Sublime TextEmacs
Use your editor
PushGitSVNVisual Studio OnlineGitHubBitbucketGitlab
Push to your repo’s
HostAmazon WS
HerokuParsePrivate Cloud
Microsoft Azure
Deploy on
your service
Release
Reach
Windows
usersSlide12
Friendless
In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$100
$100
$100$500$500$500$500$500
$2000$2000$2000$2000$2000$1,000,000$1,000,000
$1,000,000$1,000,000$1,000,000Slide13
Friendless
In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$100
$100
$100$500$500$500$500$500
$2000$2000$2000$2000$1,000,000$1,000,000$1,000,000
$1,000,000$1,000,000Slide14
XML Manifest URI Allow List (Under-the-hood)
Hosted Web Apps
WindowsRuntimeAccess
=
"
all
" Match="
https://*.websites.net
/
"
"
allowForWebOnly
" Match=https://*.website.net/Developers can control the Universal APIs they want to expose
"none
" Match="
http://ads.website.net/"Default is no accessSlide15
Add a Voice Command Definition file on your serverAdd a meta element tag in your HTMLHandle the Cortana activation in your JavaScript
Cortana Integration
<meta
name="
msapplication-cortanavcd" content
="http
://mysite.com/vcd.xml"/>
" content
="http://flightarcade.azurewebsites.net/vcd/vcd.xml"/>
// Add an event listener for the activation eventif (Windows.UI.WebUI.WebUIApplication.addEventListener(“activated”, function (args)) {
// Handle the Voice Command activation event var activation = Windows.ApplicationModel.Activation; if (args.kind === activation.ActivationKind.voiceCommand
) { // Extract the result from the speech recognition from the event arguments var speechRecognitionResult
= args.result; // Get the recognized command, defined in the VCD file
var command = speechRecognitionResult.rulePath
[0];
// Get the full string of text that was spoken var
textSpoken = speechRecognitionResult.text;
}
});Slide16
Friendless
In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$100
$100
$100$500$500$500$500$500
$2000$2000$2000$2000$1,000,000$1,000,000$1,000,000
$1,000,000$1,000,000Slide17
Final Appardy Category: Do it LiveSlide18
Packaged JavaScript AppsSlide19
Native HTML5/JS apps on WindowsCopy and paste your server code locally
WebView can still navigate to remote contentLeverage the Edge rendering engineAlways up-to date
New security model using Content Security Policy
More frameworks just work
Packaged JavaScript AppsSlide20
Default policy applied to local content
script-
src
ms-appx
: data: 'unsafe-
eval
'; style-
src
ms-appx: data: 'unsafe-inline' object-src 'none'; font-src
ms-appx: data:;Custom policy specification availableLoad local content through ms-appx-web:///Specify policy in html page head with a metatag<meta http-equiv
="Content-Security-Policy" content="script-src
ms-appx: data:”>Default CSP is the security model for packaged appsSlide21
Content Security Policy Overview
Directive
Example
Controls
default-src
‘self’
JS, Images, CSS, Font’s,
XHRs, Frames, Media
script-src
‘self’ my.scripts.comJSstyle-src‘self’ my.style.com
CSSimg-src‘self’ my.cdn.com<img>connect-src
*XHR, WebSocketsfont-src
‘self’ my.fonts.comFontsobject-src
‘none’Plugins <object>, <embed>, <applet>
media-src
my.media.com<audio>, <video>
frame-src‘self’URIs that iFrames
can load
sandboxallow-scriptsEnables
sandbox for requested resource
report-uri
/my-report-uri.comURI where browser posts policy violation reportsSlide22
Packaged App DemoSlide23
WebView ControlSlide24
Uses the always current Edge rendering engineGreat for HTML5 and the modern web
Rich API SetAimed towards a powerful in App Browser for UAP AppsImproved App to WebView communication
Improved app performance and responsiveness
WebView is now off the UI thread
WebView ControlSlide25
AddWebAllowedObject APIEnables smooth interaction between the application and the WebView Control
Developers are able to directly inject a native C#/C++ object into the script engine
WebView Control – New API
// Injecting the Object:
var
notification=
new
Notification.ToastClass();webview.addWebAllowedObject(“UniversalWindowsAPIs "
, notification);// Calling from WebView:var notification= window.notification;
if (notification) {
notification.toastMessage('Hello World', 0);
}Slide26
Improved communication between Application and Web Content
AddWebAllowedObject
Without
AddWebAllowedObjectSlide27
Improved communication between Application and Web Content
AddWebAllowedObject
With
AddWebAllowedObject
Windows 10 App
C#/C++ --
sharedObject
() -- JSSlide28
WebView DemoSlide29
Clear Data APIClears all temporary internet files: AppCache
, IndexedDB, Dom Storage and cookies
WebView Control – New API
var
op =
MSApp.clearTemporaryWebDataAsync
();
op.oncomplete
=
function () { //Temporary web data cleared successfully var webview =
document.getElementById("myWebView"); webview.refresh();};op.start();Slide30
New Window EventAllows developers to handle content in WebView Attempting to open a new window
WebView Control – New Event
var
webview
=
document.getElementById
(
'WebView'
);//Subscribe to Eventwebview.addEventListener(" MSWebViewNewWindowRequested",
handleNewWindow, false);//Handle Eventfunction handleNewWindow
(e) { e.preventDefault();
//Navigate to the url in the
webview
webview.navigate
(e.uri);}Slide31
Permission RequestsNotifies the developer of getUserMedia
requests like geolocation, webcam, and pointer lock
WebView Control – New Event
document.getElementById
(
'
webview
'
).
addEventListener('MSWebViewPermissionRequested', handlePermission, false)
//Event handlervar handlePermission = function(){if (
e.permissionRequest.type === 'geolocation') {
e.permissionRequest.allow(); }}Slide32
Windows Universal API access using JavaScriptJust like hosted web apps, WebView can call APIs directly from web code
WebView Control
if
(
window.Windows
){
// Create an appointment with
Windows.ApplicationModel.Appointments.Appointment
();}Slide33
ToolingSlide34
Cordova
Packaged
Native Cordova app with the code stored locally
Hosted
Native Cordova app with the code stored on a server
Embedded
Cordova apps housed within a broader native applicationSlide35
www.manifoldJS.comSlide36
Manifold.js DemoSlide37
Web Apps are Universal Windows AppsHosted Web Apps allow you to leverage code on the server and enable platform integration
Packaged Apps are improved with Content Security PolicyEdge WebView gives you more granular controlManifoldJS
is the simplest way to build Hosted Apps cross platform
SummarySlide38
Questions?Slide39