1. Build 2015
4/16/2017
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Hosted Web Apps and Web Platform Innovations
Build 2014
4/16/2017
2-665
Hosted Web Apps and Web Platform Innovations
Jeff Burtoft
Senior Program Manager
Hosted Web Apps and Platform Innovations
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. Agenda Introducing Windows Web Apps Hosted Web Apps Packaged Web Apps
Build 2014
4/16/2017
Agenda
Introducing Windows Web Apps
Hosted Web Apps
Packaged Web Apps
WebView
Tooling
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Build 2014
4/16/2017
Windows 10 Apps
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. The Journey to One Windows
Build 2015
4/16/2017 7:05 PM
The Journey to One Windows
Windows Desktop
Windows 10
Windows Phone
ONE CORE OS
ONE APP PLATFORM
ONE STORE
XBox
IoT
HoloLens
Surface Hub
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. EdgeHTML.dll Chakra Packaged content Offline first Hosted content
Always up-to-date

7. Hosted Web Apps

8. Hosted Web App Jeopardy
Hosted Appardy
Hosted Web App Jeopardy

9. Friendless In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$500
$2000
$1,000,000

10. Friendless In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$500
$2000
$1,000,000

11. Hosted Web Apps Keep your web workflow for updating content
Build 2015
4/16/2017 7:05 PM
Hosted Web Apps
Keep your web workflow for updating content
Code
Visual Studio
Notepad++
Brackets
Vim
ATOM
Sublime Text
Emacs
Use your editor
Push
Git
SVN
Visual Studio Online
GitHub
Bitbucket
Gitlab
Push to your repo’s
Host
Amazon WS
Heroku
Parse
Private Cloud
Microsoft Azure
Deploy on your service
Release
Reach Windows users
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Friendless In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$500
$2000
$1,000,000

13. Friendless In Seattle
The Fog
Do it Live
Child’s Play
Hawks > 49ers
$100
$500
$2000
$1,000,000

14. Hosted Web Apps XML Manifest URI Allow List (Under-the-hood)
WindowsRuntimeAccess=
"all" Match="
"allowForWebOnly" Match=
Developers can control the Universal APIs they want to expose
"none" Match="
Default is no access

15. Cortana Integration Add a Voice Command Definition file on your server
Add a meta element tag in your HTML
Handle the Cortana activation in your JavaScript
<meta name="msapplication-cortanavcd" content=" content="
// Add an event listener for the activation event
if (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; }
});

16. Friendless In Seattle The Fog Do it Live Child’s Play Hawks > 49ers
$100
$500
$2000
$1,000,000
Build 2015
4/16/2017 7:05 PM
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17. Final Appardy Category: Do it Live

18. Packaged JavaScript Apps

19. Packaged JavaScript Apps
Native HTML5/JS apps on Windows
Copy and paste your server code locally
WebView can still navigate to remote content
Leverage the Edge rendering engine
Always up-to date
New security model using Content Security Policy
More frameworks just work

20. Default CSP is the security model for packaged apps
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 available
Load 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:”>

21. Content Security Policy Overview
Directive
Example
Controls
default-src
‘self’
JS, Images, CSS, Font’s, XHRs, Frames, Media
script-src
‘self’ my.scripts.com JS
style-src
‘self’ my.style.com
CSS
img-src
‘self’ my.cdn.com
<img>
connect-src *
XHR, WebSockets
font-src
‘self’ my.fonts.com
Fonts
object-src
‘none’
Plugins <object>, <embed>, <applet>
media-src
my.media.com
<audio>, <video>
frame-src
URIs that iFrames can load
sandbox
allow-scripts
Enables sandbox for requested resource
report-uri
/my-report-uri.com
URI where browser posts policy violation reports

22. Packaged App Demo Build 2015 4/16/2017 7:05 PM
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

23. WebView Control

24. WebView Control Uses the always current Edge rendering engine
Great for HTML5 and the modern web
Rich API Set
Aimed towards a powerful in App Browser for UAP Apps
Improved App to WebView communication
Improved app performance and responsiveness
WebView is now off the UI thread

25. WebView Control – New API
AddWebAllowedObject API
Enables smooth interaction between the application and the WebView Control
Developers are able to directly inject a native C#/C++ object into the script engine
// 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); }

26. AddWebAllowedObject
Improved communication between Application and Web Content
Without AddWebAllowedObject

27. C#/C++ --sharedObject() -- JS
AddWebAllowedObject
Improved communication between Application and Web Content
With AddWebAllowedObject
Windows 10 App
C#/C++ --sharedObject() -- JS

28. WebView Demo

29. WebView Control – New API
Clear Data API
Clears all temporary internet files: AppCache, IndexedDB, Dom Storage and cookies
var op = MSApp.clearTemporaryWebDataAsync();
op.oncomplete = function () {
//Temporary web data cleared successfully
var webview = document.getElementById("myWebView");
webview.refresh(); };
op.start();

30. WebView Control – New Event
New Window Event
Allows developers to handle content in WebView Attempting to open a new window
var webview = document.getElementById('WebView');
//Subscribe to Event
webview.addEventListener(" MSWebViewNewWindowRequested", handleNewWindow, false);
//Handle Event
function handleNewWindow(e) {
e.preventDefault();
//Navigate to the url in the webview
webview.navigate(e.uri); }

31. WebView Control – New Event
Permission Requests
Notifies the developer of getUserMedia requests like geolocation, webcam, and pointer lock
document.getElementById('webview').addEventListener('MSWebViewPermissionRequested', handlePermission, false)
//Event handler
var handlePermission = function(){
if (e.permissionRequest.type === 'geolocation') {
e.permissionRequest.allow(); }

32. WebView Control Windows Universal API access using JavaScript
Build 2015
4/16/2017 7:05 PM
WebView Control
Windows Universal API access using JavaScript
Just like hosted web apps, WebView can call APIs directly from web code
if (window.Windows){
// Create an appointment with Windows.ApplicationModel.Appointments.Appointment(); }
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

33. Tooling

34. Cordova Packaged Hosted Embedded
Native Cordova app with the code stored on a server
Embedded
Cordova apps housed within a broader native application
Native Cordova app with the code stored locally

36. Manifold.js Demo

37. Summary Web Apps are Universal Windows Apps
Hosted Web Apps allow you to leverage code on the server and enable platform integration
Packaged Apps are improved with Content Security Policy
Edge WebView gives you more granular control
ManifoldJS is the simplest way to build Hosted Apps cross platform

38. Questions?