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.

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.

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.

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.

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.

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

Hosted Web Apps

Hosted Web App Jeopardy Hosted Appardy Hosted Web App Jeopardy

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

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

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.

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

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

Hosted Web Apps XML Manifest URI Allow List (Under-the-hood) 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 access

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="http://mysite.com/vcd.xml"/>" content="http://flightarcade.azurewebsites.net/vcd/vcd.xml"/> // 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; } });

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.

Final Appardy Category: Do it Live

Packaged JavaScript Apps

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

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:”>

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

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.

WebView Control

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

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); }

AddWebAllowedObject Improved communication between Application and Web Content Without AddWebAllowedObject

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

WebView Demo

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();

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); }

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(); }

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.

Tooling

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

www.manifoldJS.com

Manifold.js Demo

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

Questions?