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

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

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

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

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

6. Progressive Web Application Basics

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

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

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

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

11. { "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

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

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

14. Network request - Typical Network Web App

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

16. Basic Service Worker Demo Erik Noren

17. PWAs in the Microsoft Store

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

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

20. Packaging and Installing Demo Erik Noren

21. Windows 10 APIs in PWAs

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

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

24. Using Windows APIs Demo Erik Noren

25. Windows Machine Learning in PWA

26. WinML Workflow

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

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

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

31. Creating PWA Windows apps in Visual Studio Andreas Erben

32. Scenario:Run IIS Locally

33. Create PWA UWP Project Manually

34. Create PWA UWP project manually

35. Create PWA UWP project manually

36. Create PWA UWP project manually

37. PWA project visual assets

38. PWA project visual assets

39. WinML in PWA Demo Andreas Erben

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

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

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

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