1. Myth Busting: Top 5 Web App Myths

2. 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

3. 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

4. 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.

5. 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.

6. Myth #1 - Web Apps stink?

7. 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.

8. 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

9. 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.

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

11. W3C Web App Manifest http://w3c.github.io/manifest {
Microsoft Build 2016
11/15/2018 1:48 PM
W3C Web App Manifest {
"name": "Super Web App",
"short_name": "SuperWA",
"start_url": "
"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.

12. 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); }
}); …

13. 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.

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

15. 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.

16. 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.

17. Myth #4: Web Apps are hard to debug?

18. 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

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

20. 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.

21. Myth #5: Web Apps have limited functionality?

22. 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!");
});

23. 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.

24. 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.

25. 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.

26. Hosted Web Apps: Build great Windows apps with your existing website code aka to