Progressive Web Apps
Download as PPTX, PDF1 like149 views
The document discusses the significance of Progressive Web Apps (PWAs), highlighting their ability to work on any device, enhance functionality, and provide a native app-like experience. It emphasizes key features of PWAs such as offline support, responsiveness, and installability, along with tools and best practices for developing them, including service workers and web app manifests. Additionally, it references various frameworks and testing techniques to ensure optimal performance and integration of PWAs.
Progressive Web Apps
- 2. STEVE JOBS “You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today” 2007
- 3. STEVE JOBS “You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today” 2007
- 4. STEVE JOBS “You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today” 2007
- 5. ALEX RUSSELL Progressive Web Apps: Escaping Tabs Without Losing Our Soul 2015
- 7. WHAT IT’S NOT A Tool A Framework
- 8. WHAT THEY ARE Progressive Works on any device and enhance functionality progressively. Discoverable Better discovery and integration with search. Linkable Ability to retain or reload its state and be shareable from a link. Responsive Fit any device’s form factor and screen size. Current Application and content is up to date when connected to the Internet. Re-engageable Promotes re-engagement through features such as push notifications. Performant Works as fast or faster than a native app. Connected to users Direct feedback to you through ratings and reviews App-like Looks like a native app and uses the application shell model with minimal page refreshes. Connectivity-agnostic Works with low connectivity or offline. Installable Install on the device’s desktop, start menu, or task bar making it readily available.
- 9. MINIMUM HTTPS Web App Manifest Service Worker
- 10. RECOMMENDED Cross Platform Responsive Deep linking Best Practices
- 11. SUPPORT
- 12. WHY?
- 13. CONNECTIVITY Service worker takes care of bad connection • By caching • Showing custom offline page
- 14. PLATFORM INDEPENDENT 100% code share Not in the store (per se)
- 15. WHY? No lengthy installation process Don’t occupy device storage Discoverable Secure Fast Cheap
- 16. WHAT ABOUT…?
- 17. I NEED A NATIVE APP FOR Geolocation
- 18. I NEED A NATIVE APP FOR GeolocationW3C API
- 19. I NEED A NATIVE APP FOR Authentication
- 20. I NEED A NATIVE APP FOR AuthenticationWeb API
- 21. I NEED A NATIVE APP FOR Payment
- 22. I NEED A NATIVE APP FOR Payment Request API
- 23. I NEED A NATIVE APP FOR USB Bluetooth VR Gamepad
- 24. I NEED A NATIVE APP FOR Web USB API Web Bluetooth API WebVR Web Gamepad API
- 25. IF IT’S REALLY NOT THERE (YET)
- 26. WHO?
- 28. EXAMPLES Twitter
- 31. MAKING PWA
- 32. ANALYZING
- 33. LIGHTHOUSE
- 34. LIGHTHOUSE Chrome Extension Dev Tools Audit CLI Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.
- 35. WEBHINT webhint is a linting tool that will help you with your site's accessibility, speed, security and more, by checking your code for best practices and common error Online scanner CLI Visual Studio Code integration
- 36. GETTING STARTED
- 37. PWA BUILDER 1. Provide a URL 2. Generate a Manifest 3. Build a Service Worker 4. Publish the App Generate your Progressive Web App
- 38. WEB APP MANIFEST W3C standard Contains all info about app Working Draft - 18 October 2018 <link rel="manifest" href="/manifest.webmanifest">
- 39. SERVICE WORKER Runs in background Handles cache, push, sync programmable network proxy
- 41. FETCH Modern replacement of XMLHttpRequest Relies on promises
- 42. WHAT’S NEXT?
- 43. NOT SHOWN
- 44. NOT SHOWN Push notifications Notifications API + Push API Build on top of the Service Worker API Background Sync Defer actions until stable connection
- 45. FRAMEWORKS
- 46. Performance Resilience Progressive web app JavaScript Libraries for adding offline support to web apps • Precaching • Runtimecaching Strategies • Request routing • Backgroundsync • Helpful debugging
- 47. PREACT-CLI App creation Index.html app shell generation Browser list autoprefixing Firebase configuration for server push Powered by sw-precache
- 48. VUE Vue-cli & @vue/cli-plugin-pwa Uses WorkBox Can automatically generate service worker or start with existing one
- 49. ANGULAR @angular-cli ng add @angular/pwa - Turn your application into a PWA by adding an app manifest and service worker
- 50. TIPS
- 51. TESTING F12 tools Connect phone with USB Chrome://inspect Android debugger needs to be running “adb.exe start-server” Custom domain with SSL DNS directs to local IP, ie 192.168.1.13
- 52. TESTING • Test on real devices • Throttling is not enough • Offline checkbox doesn’t affect websockets
- 53. PWA SLACK https://join.slack.com/t/progressive-web-apps/shared_invite/enQtMjY0NDI2MjAxNTc1LWM4ZWYyNDZhNDRlZDUyNTk5YThhZGQwOWRhZTkwZjAwNTlhNzA3MzY0ZWM0NWQxZmVkZjJhNWEzNTZkYmQ3ZTY • Events • Tooling • Help • Examples
- 54. SERVICEWORKE.RS
- 56. CHROME DEV SUMMITNovember 12-13
Editor's Notes
- #6: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
- #12: Since IOS 11.3 also on IOS!
- #19: Uber & Google maps Go
- #21: Windows Hello
- #28: https://preview.startbucks.com
- #29: https://mobile.twitter.com
- #30: https://pinterest.com
- #31: https://Instagram.com
- #32: Build demosite with bootstrap studio and deploy with FTP. LightHouse PWA Builder Create Icon Add manifest Add Service worker with offline page
- #36: Was SonarWhal Started my MS Edge team, wanted open source and community driven
- #43: Build demosite with bootstrap studio and deploy with FTP.
- #48: Static index.html
- #56: Maxime Salnikov Building an Angular PWA: Angular Service Worker or Workbox?