Myth Busting: Top 5 Web App Myths

To a user it looks like a regular native app they have downloaded. Hosted Web Apps Your web site To a user it looks like a regular native app they have downloaded. The app is actually a container. We call it a Hosted Web App. The content of the app loads dynamically from your web server Container app Creating a Hosted Web App takes minutes Device

Why Hosted Web Apps? Keep your web workflow for updating content Stage Deploy on your service Private Cloud Release Reach Windows users Code Use your editor Push Push to your repo’s

Why Hosted Web Apps? Keep your web workflow for updating content Microsoft Build 2016 11/15/2018 1:48 PM Why Hosted Web Apps? Keep your web workflow for updating content Call native Universal APIs from JavaScript on your website Use Native Features © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Track ratings, analytics, get paid Microsoft Build 2016 11/15/2018 1:48 PM Why Hosted Web Apps? Keep your web workflow for updating content Call native Universal APIs from JavaScript on your website Publish your web apps to the store Track ratings, analytics, get paid © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Myth #1 - Web Apps stink?

Microsoft Build 2016 11/15/2018 1:48 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Case study: Shazam How it works: Interface, app logic Audio processing app package HTML CSS JS .CPP How it works: Interface, app logic Audio processing

DEMO Sponza Web App Myth #1 - Web Apps stink? Microsoft Build 2016 © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Myth #2 – Web Apps don’t follow web standards?

W3C Web App Manifest http://w3c.github.io/manifest { Microsoft Build 2016 11/15/2018 1:48 PM W3C Web App Manifest http://w3c.github.io/manifest { "name": "Super Web App", "short_name": "SuperWA", "start_url": "http://www.example.com", "icons": [ "src": "tiny.png", "sizes": "70x70" }, "src": "square.png", "sizes": "150x150" "src": "apple-touch-icon-72x72-precomposed.png", "sizes": "72x72" ], "display": "standalone", "orientation": "landscape" } © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Direct or polyfill access to native APIs // Native API access from JavaScript where supported (Windows 10) if (window.Windows) { var camera = new Windows.Media.Capture.CameraCaptureUI(); camera.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(functi on (result) { if (result) { var photoBlobUrl = URL.createObjectURL(result, { oneTimeOnly: true }); var img = new Image(); img.src = photoBlobUrl; … // Cordova polyfill to bridge to native APIs for other platforms if (cordova && cordova.plugins){ cordova.plugins.notification.local.on("click", function (notification) { if (notification.id == 10) { joinMeeting(notification.data.meetingId); } }); …

DEMO Bank of Contoso Myth #2 - Web Apps don’t follow web standards? Microsoft Build 2016 11/15/2018 1:48 PM DEMO Bank of Contoso Myth #2 - Web Apps don’t follow web standards? © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Myth #3 - Web Apps can’t run offline?

Offline (or low-bandwidth) strategies Microsoft Build 2016 11/15/2018 1:48 PM Offline (or low-bandwidth) strategies Web Standards technologies (Application Cache, Indexed DB, local Storage…) Upcoming standards (Service Workers, Web Notifications) Hybrid content (hosted and packaged) Default offline pages msapp-error.html Native APIs © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

DEMO Hot Beats Myth #3 - Web Apps can’t run offline? Microsoft Build 2016 11/15/2018 1:48 PM DEMO Hot Beats Myth #3 - Web Apps can’t run offline? © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Myth #4: Web Apps are hard to debug?

F12 Tools inside Web Apps Analyze how your page elements are being interpreted by the browser and accessibility tools Toggle the accessibility tree view View element specific accessibility properties

VorlonJS: x-plat remote web debug tool http://vorlonjs.io Interactive console XHR Panel DOM Explorer Resource Explorer Node.js Express.js Socket.io Passport.js Object Explorer Network Monitor Modernizr ngInspector

DEMO VorlonJS Myth #4 - Web Apps are hard to debug? Microsoft Build 2016 11/15/2018 1:48 PM DEMO VorlonJS Myth #4 - Web Apps are hard to debug? © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Myth #5: Web Apps have limited functionality?

Fetch API Generalizes network Request and Response Promise-based Building block for ServiceWorker network management fetch(url, { method: "POST", headers: { "Content-Type": "text/plain" }, body: object }).then(function(res) { if (res.ok) { alert("Sent!") } else if (res.status == 401) { alert("Oops! You are not authorized."); } }, function(e) { alert("Error!"); });

Web Notifications Integrated in the Windows 10 Action Center Microsoft Build 2016 11/15/2018 1:48 PM Web Notifications Integrated in the Windows 10 Action Center Custom icons, titles, messages var notify = new Notification( "New message from Bob!", {icon: "bob.png", title: "Microsoft Bob"} ); notify.onclick = function() { showBobsMessage(); }; © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Access to unlimited native APIs Microsoft Build 2016 11/15/2018 1:48 PM Access to unlimited native APIs In Windows 10: Call into C#, C++ or Windows Runtime directly from JavaScript Access to any hardware capability in UWP Activated by OS Background tasks or background audio Support for additional media formats not available in browsers © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

DEMO NFC badge Myth #5: Web Apps have limited functionality? Microsoft Build 2016 11/15/2018 1:48 PM DEMO NFC badge Myth #5: Web Apps have limited functionality? © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Hosted Web Apps: Build great Windows apps with your existing website code aka to http://microsoftedge.github.io/WebAppsDocs/en-US/win10/HWA.htm