1 / 27

Myth Busting: Top 5 Web App Myths

Myth Busting: Top 5 Web App Myths. 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.

flaura
Download Presentation

Myth Busting: Top 5 Web App Myths

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Myth Busting: Top 5 Web App Myths

  2. 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 Deploy on your service Reach Windows users Use your editor Push to your repo’s Push Stage Release Code Private Cloud

  4. Why Hosted Web Apps? Keep your web workflow for updating content Call native Universal APIs from JavaScript on your website Use Native Features

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

  6. Myth #1 - Web Apps stink?

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

  8. DEMOSponza Web App Myth #1 - Web Apps stink?

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

  10. W3C Web App 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" } http://w3c.github.io/manifest

  11. 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) { varphotoBlobUrl = URL.createObjectURL(result, { oneTimeOnly: true }); varimg = 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); } }); …

  12. DEMOBank of Contoso Myth #2 - Web Apps don’t follow web standards?

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

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

  15. DEMOHot Beats Myth #3 - Web Apps can’t run offline?

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

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

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

  19. DEMOVorlonJS Myth #4 - Web Apps are hard to debug?

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

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

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

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

  24. DEMONFC badge Myth #5: Web Apps have limited functionality?

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

More Related