Jeff BurtoftSenior Program ManagerHosted Web Apps and Platform Innovations

Hosted Web Apps and Web Platform Innovations

2-665

Introducing Windows Web AppsHosted Web AppsPackaged Web AppsWebViewTooling

Agenda

Windows 10 Apps

The Journey to One Windows

Windows Desktop

IoTHoloLensSurface

Hub

Windows Phone

XBox

ONE CORE OSONE APP PLATFORMONE STORE

Windows 10

EdgeHTML.dll Chakra

Hosted contentAlways up-to-date

Packaged contentOffline first

Hosted Web Apps

Hosted Web App JeopardyHosted Appardy

Friendless In Seattle

The Fog Do it LiveChild’s

PlayHawks >

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,000

Friendless In Seattle

The Fog Do it LiveChild’s

PlayHawks >

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,000

• Keep your web workflow for updating content

Hosted Web Apps

Code

Visual StudioNotepad++

BracketsVim

ATOMSublime Text

Emacs

Use your

editor

Push

GitSVN

Visual Studio OnlineGitHub

BitbucketGitlab

Push to your repo’s Host

Amazon WSHerokuParse

Private CloudMicrosoft Azure

Deploy on

your

service

Release

Reach Windows users

Friendless In Seattle

The Fog Do it LiveChild’s

PlayHawks >

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,000

Friendless In Seattle

The Fog Do it LiveChild’s

PlayHawks >

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,000

• 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 access

• Add a Voice Command Definition file on your server

• Add a meta element tag in your HTML• Handle 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 argumentsvar speechRecognitionResult = args.result;// Get the recognized command, defined in the VCD filevar command = speechRecognitionResult.rulePath[0];// Get the full string of text that was spokenvar textSpoken = speechRecognitionResult.text;

}});

Friendless In Seattle

The Fog Do it LiveChild’s

PlayHawks >

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,000

Final AppardyCategory: Do it Live

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

Packaged JavaScript Apps

Default policy applied to local contentscript-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:”>

Default CSP is the security model for packaged apps

Content Security Policy OverviewDirective 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 ‘self’ 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

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

• 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

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

• Improved communication between Application and Web Content

AddWebAllowedObject

Without AddWebAllowedObject

• Improved communication between Application and Web Content

AddWebAllowedObject

With AddWebAllowedObject

Windows 10 App

C#/C++ --sharedObject() -- JS

WebView Demo

• Clear Data API• Clears 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();

• New Window Event• Allows 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);}

• Permission Requests• Notifies 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();

}}

• Windows Universal API access using JavaScript• Just 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();}

Tooling

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

application

www.manifoldJS.com

Manifold.js Demo

• 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

Summary

Questions?

© 2015 Microsoft Corporation. All rights reserved.