/
Jeff Jeff

Jeff - PowerPoint Presentation

debby-jeon
debby-jeon . @debby-jeon
Follow
425 views
Uploaded On 2016-04-23

Jeff - PPT Presentation

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

500 000 2000 webview 000 500 webview 2000 100 web apps content windows src hosted var event app control notification live addweballowedobject

Share:

Link:

Embed:

Download Presentation from below link

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.


Presentation Transcript

Slide1
Slide2

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