PWAs, Microsoft Edge, and More!

A talk around PWAs and and what we are doing on the Edge team to support them. This was presented at the MS NERD building as part of the Boston Frontend Developers Meetup group.

Transcript

1. PWAs, Microsoft Edge, and More! Kirupa Chinnathambi (@kirupa)
2. Lived here!
3. Feel free to interrupt and ask me questions at any time!
4. A lot of what you are about to see is forward-looking. Some of the information may change. Things may get delayed. Things may ship ahead of schedule. Things may never ship at all.
5. 1. What are Progressive Web Apps? 2. What can we do today? 3. What to expect!
6. What are Progressive Web Apps (PWA)?
7. They are web apps that have taken on some desirable capabilities of native apps.
8. These are web apps that: • Work offline / reliably under poor network conditions • Support push notifications • Can be launched from an icon on the home screen (on Android devices) • Start and run really fast!
9. To build a PWA today, you need just three things!
10. You Need a Web App Make sure it runs in the browser and is served over HTTPs. (You really shouldn’t do anything special.)
12. { "lang": "en", "short_name": "Wash Post", "name": "The Washington Post", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "img/launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/pwa/?utm_source=homescreen", "display": "standalone", "orientation": "portrait", "background_color": "black" } Web Application Manifest This is nothing more than a JSON file that provides information about the web site. With this information, we can do all sorts of app-like things.
13. Service Workers Service workers act as proxy servers that sit between web applications, the browser, and the network (when available). They make it easy for you to: 1. Create offline experiences 2. Intercept network requests 3. Deal with caching properly 4. Access push notifications and background sync APIs
14. What can we do today?
15. Under Development Shipped Shipped Under Consideration
17. This doesn’t mean you can’t start to build an awesome PWA today.
18. Progressive Enhancement
19. Provide a version that satisfies the largest addressable audience. Layer on additional (cooler!) functionality based on hardware / browser / bandwidth capabilities.
21. On devices/browsers that support more advanced technologies: • Web Notifications • Caching/Offline • App Icons (Something like Modernizr helps with all of this!)
22. Libraries and frameworks will make building PWAs straightforward.
24. What to expect!
25. We love PWAs!
26. It’s not a web app vs native app argument for us!
27. We love PWAs! We love web apps. We love native apps.
28. We love apps!
29. Since 2011 as part of the Windows 8 developer experience, we made HTML/CSS/JavaScript one of the primary languages you can use to build native Windows applications.
30. Hosted Web Apps Your app content is served from a public URL. Packaged Web Apps Your app content is entirely local and part of your application.
31. PWAs in the Windows ecosystem will behave similar to Hosted Web Apps.
32. DEMO: Hosted Web App
33. When your web site is run as an app, you get a Start menu icon, integration with the Settings UIs, better security, and resource utilization for free.
34. If you want to, you can enhance your app to integrate more deeply with the OS/Hardware.
35. if (typeof Windows !== "undefined") { // Windows specific code goes here } They way to detect if your content is running as a Windows app:
36. Cortana (Voice Integration), Inking, Notifications, Secure Storage, and a whole lot more.
37. As a PWA developer, why should you care?
38. 1 You shouldn’t have to do any extra work!
39. By creating a web app manifest, you are sending a clear signal that you want to be treated like an app.
40. 2 Greater reach!
42. 3 For many users, the primary way they get their content is through apps.
43. 4 ”Browser” improvements benefit your browser-based content as well as your App-based content.
44. The same Edge rendering engine and Chakra JavaScript runtime power both web sites and web apps.
45. For example, we don’t support Service Workers today. (We will support it soon!)
46. If you built your offline/caching solution around Progressive Enhancement principles, your apps will automatically benefit once Service Workers support gets added!
47. 5 Keep your existing workflow, tools, etc.
48. 1. You should build PWAs today 2. Use Progressive Enhancement 3. Your PWAs on Windows will be treated just like a native app
49. Progress of Web Apps https://aka.ms/progress_of_web_apps Edge Platform Status https://status.microsoftedge.com Keeping the Progressive in PWAs https://aka.ms/pwa_dev_summit_2016
50. Ask me questions! Kirupa Chinnathambi (@kirupa) kirupac@microsoft.com https://www.kirupa.com