Progressive Web Apps / GDG DevFest - Season 2016
3 likes1,839 views
The document presents a comprehensive guide on building Progressive Web Apps (PWAs), emphasizing their significance and core features, such as offline support and push notifications. It outlines a step-by-step codelab for participants to create and deploy their first PWA using Firebase and other web technologies. Additionally, it provides insights into service workers, essential for managing network requests and enabling rich functionalities within PWAs.
Progressive Web Apps / GDG DevFest - Season 2016
- 1. Progressive Web Apps GDG DevFest / Season 2016 1
- 2. omranic.com Abdelrahman Omran Rinvex Co-founder | Google Developer Expert | Software Architect 2 Work hard until you no longer have to introduce yourself.“ ”
- 3. omranic.com Rinvex Industry Specific Enterprise Solutions 3 Value, Reach, Impact rinvex.com
- 4. omranic.com We’re about to start an exciting tour together, so get your mind clear and ready for the journey. Our Goals We will understand, and build together a progressive web app, now! 4 Build / 2 steps Follow the step-by-step codelab, use the provided materials, and build your first PWA Get Ready Awesome things coming your way, you’ll learn new things, and get new skills, let’s have fun together! Awesomeness Inside Launch / 1 step Deploy your first PWA online using Firebase cloud hosting and share it with others Understand / 2 steps What’s Progressive Web Apps, Why it’s important now, and How to use it effectively
- 5. omranic.com Our Agenda You should be excited about what’s coming! 5 PWA Introduction Service Worker Introduction Setup Environment Quick Deployment Codelab Step-by-step
- 6. omranic.com Your tweet, facebook, or G+ post must contain the following hashtags #ProgressiveWebApps #DevFest16 Activity Announcement Twitter/FB/G+ livestream what’s happening, you may win a special SWAG! 6 1 2 3 4 You must mention GDG chapter’s twitter account, Facebook page, or Google plus page Write something new you’ve learned, a new or exciting feature, add emoji and post photos Mention the speaker, re-share and re-tweet others, and keep posting all day!
- 7. omranic.com Follow the instructor step-by-step from start to end, and implement all features explained Activity Announcement #2 Follow the codelab, and deploy online during the session & win a special SWAG! 7 1 2 3 4 Be honest & follow the steps, don’t jump to conclusion, the main goal here is to learn while having fun Deploy your demo online using Firebase cloud hosting, and try to access it through your mobile Finally, show your working online demo to the instructor, it must be fully functional with offline support ✨
- 8. PWA Introduction What’s Progressive Web Apps and why it’s important?
- 9. omranic.com Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience. What’s Progressive Web Apps 9 PWA in a nutshell Google's Progressive Web Apps are blurring the lines between apps and the mobile web.“ ”― Business Insider
- 10. omranic.com PWA Characteristics Key features of PWA 10 Progressive enhancement used throughout Progressive Easily discovered by search engines Discoverable It’s the web, linkable by definition Linkable UI fits device’s form factor and screen size Responsive Looks & interacts like a native app App-like
- 11. omranic.com PWA Characteristics Key features of PWA 11 Offline-first & cache support via service workers Connectivity Independent Engage users through push notifications Re-engageable Install to device’s home screen, run in fullscreen Installable Always get newest data from server Fresh Always served over HTTPS Secure
- 12. omranic.com PWA Characteristics Key features of PWA 12 Zero steps barrier, Just Use It! Low Friction Uses web technologies, HTML, JavaScript, and CSS Just Web Smooth navigations keep the experience silky smooth Fast With service workers at the heart Instant Loading Many PWA features still in labs, yet to come Shiny Future
- 13. omranic.com Some Facts Industry Analysis 13 A study has shown that, on average, an app loses 20% of its users for every step between the user’s first contact with the app and the user starting to use the app. Usage Friction Roughly 80 percent of smartphone app time is spent with users’ top three apps, notwithstanding the fact that people typically engage with 25 apps per month, while 100+ sites navigated to. Usage Frequency Web apps will generally be easier to deploy and maintain (there’s always one source of truth), compared to the massive version fragmentation of native apps on platforms like Android. Version Fragmentation
- 14. Service Worker Introduction At the core of Progressive Web Apps comes Service Workers
- 15. omranic.com A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future service workers will support other things like periodic sync or geofencing. The core features discussed here is the ability to intercept and handle network requests, including programmatically managing a cache of responses. What’s a Service Worker 15 SW in a nutshell In short, a service worker is an asynchronous background thread that takes control of all network requests in a page, acting as a proxy. “ ”― Booking Blog
- 16. omranic.com Service Worker Lifecycle Events: Install, Activate, Fetch 16
- 17. omranic.com Service Worker Lifecycle Service Worker Install Event 17
- 18. omranic.com Service Worker Lifecycle Service Worker Install Event 18
- 19. omranic.com Service Worker as a Proxy Service Worker Request Interception 19
- 20. omranic.com Service Worker Fetch Modes Cache Only 20
- 21. omranic.com Service Worker Fetch Modes Network Only 21
- 22. omranic.com Service Worker Fetch Modes Cache, Falling Back To Network 22
- 23. omranic.com Service Worker Fetch Modes Network, Falling Back To Cache 23
- 24. omranic.com Service Worker Fetch Modes Stale While Revalidate 24
- 25. omranic.com Service Worker Fetch Modes Cache Then Network 25
- 26. omranic.com Service Worker Fetch Modes Cache & Network Race 26
- 27. omranic.com Service Worker Fetch Modes Generic Fallback 27
- 28. omranic.com Service Worker Push Message SW Push Notification Flow 28
- 29. omranic.com Service Worker Notes Important point you must know 29 Works on HTTPS only, or localhost1 2 3 4 Has controlled scopes Should be on same origin Not supported in Firefox, private mode Only One SW activated at a time5 6 7 8 Shipped in Chrome, Firefox, and Opera In Development in Microsoft Edge Under Consideration in Safari, iOS Should be progressive9 10 11 12 Doesn’t control origin page on first load Run on background, in a separate thread Doesn’t have access to page DOM Open tabs must be closed for old service workers to die, and new workers take effect13 14 15 16 Use self.skipWaiting() with self.clients.claim() to skip waiting, and enforce the new SW Unregistering a SW doesn’t clear SW cache ...
- 30. Questions? Do you’ve any question 30
- 32. Twitter: Omranic Mobile: +201228160181 Email: [email protected] Website: https://omranic.com
- 33. Setup Environment Get ready for the journey, prepare your environment
- 34. omranic.com Alongside NodeJs, npm is required for the deployment step as well This codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste. Prerequisites What you'll need 34 Power on your laptop, and login to your account Laptop Download code samples from the provided Github repository Code Samples Latest version of Google Chrome browser is recommended Chrome 52+ Any text editor will be sufficient, don’t use word processors Text Editor Recommended but your own web server of choice will be OK Web Server For Chrome Basic Knowledge Notes Basic knowledge of HTML, CSS, JavaScript, and Chrome DevTools You’ll need a Google account to create a new Firebase Project Google Account Internet Connection Appropriate internet connection required for testing & deployment NodeJs is required for the deployment step, where you’ll install firebase cli tools NodeJS npm
- 35. omranic.com Weather Web App Using PWA techniques 35 - Progressive - App-like - Fresh - Responsive - Linkable - Safe - Connectivity independent - Discoverable and installable Features What you'll learn - How to design and construct an app using the "app shell" method - How to make your app work offline - How to store data for use offline later Basic Knowledge HTML, CSS, JavaScript, and Chrome DevTools This codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.
- 36. omranic.com Codelab Based on Google’s Codelab 36 goo.gl/AVsL6p
- 37. omranic.com Setup 1. Download Source Code 37 goo.gl/kTLicS
- 38. omranic.com Setup 2. Install web server 38 goo.gl/Jd8IAC
- 39. omranic.com Setup 3. Run web server 39 1 2 3 4 5
- 40. omranic.com Setup 4. Test the ready environment 40 Browse to your new PWA using Chrome Web Server via your localhost link http://127.0.0.1:8887 Visit your app localy You can access your app on the local network You can browse your new PWA using Chrome Web Server over the local network via this link http://192.168.1.2:8887 Ready to go This is a minimal PWA placeholder ready for development!
- 41. omranic.com Architect your App Shell What is the app shell? 41
- 42. omranic.com Architect your App Shell Design the App Shell 42 Ask yourself - What needs to be on screen immediately? - What other UI components are key to our app? - What supporting resources are needed for the app shell? For example images, JavaScript, styles, etc. Our Weather App Components - Header with a title, and add/refresh buttons - Container for forecast cards - A forecast card template - A dialog box for adding new cities - A loading indicator
- 43. Quick Project Code Review Let’s review the basic PWA we’ll work on
- 44. Codelab: 1. Start with a fast first load goo.gl/JSwvvn
- 45. Codelab: 2. Pre-cache the App Shell goo.gl/2CizGK
- 46. Codelab: 3. Cache the forecast data goo.gl/uly6OD
- 47. Codelab: 4. Native integration & Deployment goo.gl/u9u6xM
- 49. Twitter: Omranic Mobile: +201228160181 Email: [email protected] Website: https://omranic.com
- 50. omranic.com Credits 50 Microsoft® and PowerPoint® are trademarks or registered trademarks of Microsoft Corporation. © 2016 Google Inc, used with permission. Google and the Google logo are registered trademarks of Google Inc. Google Drive® is a registered trademark of Google Inc. Photos in this template were downloaded from pixabay.com and freepik.com. Attribution is located in each slide notes and the Credits slide. The Template provides a theme with four basic colors: The backgrounds were created by Free Google Slides Templates. Vectorial Shapes in this Template were created by Free Google Slides Templates and downloaded from pexels.com and unsplash.com. Icons in this Template are part of Google® Material Icons and 1001freedownloads.com. Shapes & Icons Backgrounds Images Fonts Color Palette Trademarks The fonts used in this template are taken from Google fonts. ( Dosis,Open Sans ) You can download the fonts from the following url: https://www.google.com/fonts/ #93c47dff #0097a7ff #78909cff #eeeeeeff #f7b600ff #00ce00e3 #de445eff #000000ff
- 51. 51