Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
A better user experience in Progressive Web Apps (PWA) with Windows 10 APIs PowerPoint Presentation
Download Presentation
A better user experience in Progressive Web Apps (PWA) with Windows 10 APIs

A better user experience in Progressive Web Apps (PWA) with Windows 10 APIs

91 Vues Download Presentation
Télécharger la présentation

A better user experience in Progressive Web Apps (PWA) with Windows 10 APIs

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. A better user experience in Progressive Web Apps (PWA) with Windows 10 APIs Andreas Erben and Erik Noren BRK2466

  2. The Speakers Andreas Erben Microsoft MVP – Windows Development Twitter: @AndreasErben Andreas.Erben@daenet.com Erik Noren Solutions Architect Twitter: @ErikNoren GitHub: ErikNoren

  3. Agenda What are Progressive Web Apps (PWA) Publishing PWAs How to add value to PWAs on Windows 10 Windows Machine Learning and PWAs Summary

  4. Progressive Web Applications Work on static content just as well as dynamic Enhance user experience by Enabling offline scenarios Handling network changes gracefully Leveraging native functionality of device or platform Leave a site perfectly functional even if device has no PWA support

  5. Progressive Web Application Basics

  6. A PWA is Progressive Works on any device and enhance functionality progressively. Performant Works as fast or faster than a native app. Linkable Ability to retain or reload its state and be shareable from a link. Responsive Fit any device’s form factor and screen size. Connectivity-agnostic Works with low connectivity or offline. App-like Looks like a native app and uses the application shell model with minimal page refreshes. Installable Install on the device’s desktop, start menu, or task bar making it readily available. App-like Connectivity-agnostic Progressive Re-engageable Promotes re-engagement through features such as push notifications. Discoverable Better discovery and integration with search. Connected to users Direct feedback to you through ratings and reviews Current Application and content is up to date when connected to the Internet.

  7. Keep your workflow for web Web The same app runs across browsers and can take advantage of PWA features as needed / supported. Build Deploy Publish App WebContent PWA The same app serve as a store app with even more features and additional reach to store users. Deploy The work flow for web and PWAs are shared, so your deploy process doesn’t need to change to accommodate PWA. Build Build with web technology and web developers. Publish App Your PWA “app container” needs only to be published once. The content is always up to date because it comes from the web.

  8. CROSS PLATFORM Devices + IoT PC Xbox Surface Hub HoloLens X ACROSS WINDOWS PROGRESSIVE WEB APPS

  9. Minimum Viable – Progressive Web App HTTPS* Web App Manifest Service Worker *HTTPS not required when using localhost domain

  10. { "lang": "en", "short_name": "Wash Post", "name": "The Washington Post", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, ... ], "start_url": "/", "display": "standalone", "orientation": "portrait", "background_color": "black" } Web Application Manifest

  11. App Display Property Next versionof Windows Browser Standalone UI Minimal UI Runs in Edge as a separate windows or Tab. Full browser UI, no store listing Runs in App container in separate process. No browser UI, back button only. Microsoft store listing Runs in App container in separate process. Limited UI (navigation & read only nav bar). Microsoft store listing

  12. Minimum Viable – Progressive Web App HTTPS* Web App Manifest Service Worker *HTTPS not required when using localhost domain

  13. Network request - Typical Network Web App

  14. Web App Network Request - Service Worker in Play ServiceWorker Network Cache

  15. Basic Service Worker Demo Erik Noren

  16. PWAs in the Microsoft Store

  17. Getting Into the store Auto Indexing(beta) Self Publishing Bing Discovers PWAs on the Web and are automatically reviewed and listed into the store Developer opens a dev account for the Microsoft Store and publishing app under dev name.

  18. Self Publishing of App Open / Maintain Active Dev Center Account Adhere to Microsoft Store Policies Generate Appx with VS, PWA Builder CLI, or on PWABuilder.com

  19. Packaging and Installing Demo Erik Noren

  20. Windows 10 APIs in PWAs

  21. Dev Center analytics • In app Purchases • Promotability • No Data Storage Caps • Service Workers • Windows API access Value Add of Windows Store App

  22. Twitter’s adoption of PWA brought parity of features between web and Windows clients.

  23. Using Windows APIs Demo Erik Noren

  24. Windows Machine Learning in PWA

  25. WinML Workflow

  26. Windows Machine Learning Architecture • Load LearningModel (ONNX file) • Get LearningModelDevice • Create LearningModelSession • Preprocessing • Bind Input • LearningModelSession.Evaluate • Get Result • Postprocessing

  27. Azure AI Gallery https://gallery.azure.ai/

  28. ONNX Model Zoo https://github.com/onnx/models

  29. Creating PWA Windows apps in Visual Studio Andreas Erben

  30. Scenario:Run IIS Locally

  31. Create PWA UWP Project Manually

  32. Create PWA UWP project manually

  33. Create PWA UWP project manually

  34. Create PWA UWP project manually

  35. PWA project visual assets

  36. PWA project visual assets

  37. WinML in PWA Demo Andreas Erben

  38. Progressive Web Applications Work on static content just as well as dynamic Enhance user experience by Enabling offline scenarios Handling network changes gracefully Leveraging native functionality of device or platform Leave a site perfectly functional even if device has no PWA support

  39. The Speakers Andreas Erben Microsoft MVP – Windows Development Twitter: @AndreasErben Erik Noren Solutions Architect Twitter: @ErikNoren GitHub: ErikNoren

  40. Resources • BRK2111Aaron Gustafson - Beginning Progressive Web Apps • BRK3396Ali Alabbas - Building Performant Web Apps w/ Service Worker • BRK2079 - Windows AI platform and the intelligent edge • https://bit.ly/2poASpJ - Get Started with PWAs (Microsoft Docs) • https://mzl.la/2xzIp8U - Progressive Web Applications (Mozilla) • https://www.pwabuilder.com/ - Package and download PWAs • https://bit.ly/2QO9L4b - PWA Debugging (Microsoft Docs) • https://bit.ly/2DfRhXq - Microsoft Edge DevTools (Microsoft Store)

  41. Please evaluate this sessionYour feedback is important to us! Please evaluate this session through MyEvaluations on the mobile appor website. Download the app:https://aka.ms/ignite.mobileApp Go to the website: https://myignite.techcommunity.microsoft.com/evaluations