Pro Yearly is on sale from $80 to $50! »

Progressive Web Apps / GDG DevFest - Season 2016

Progressive Web Apps / GDG DevFest - Season 2016

My #ProgressiveWebApps presentation is available online now 🙂 Use it, learn more, and be awesome 👏 https://goo.gl/TbgI7d

D05cd3860dfbf8c68cba35bd6a7ae0ee?s=128

Abdelrahman Omran

October 29, 2016
Tweet

Transcript

  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 localhost 1 2 3 4 Has controlled scopes Should be on same origin Not supported in Firefox, private mode Only One SW activated at a time 5 6 7 8 Shipped in Chrome, Firefox, and Opera In Development in Microsoft Edge Under Consideration in Safari, iOS Should be progressive 9 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 effect 13 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

  31. 31 Abdelrahman Omran THANK YOU

  32. Twitter: Omranic Mobile: +201228160181 Email: me@omranic.com 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

  48. 48 Abdelrahman Omran THANK YOU

  49. Twitter: Omranic Mobile: +201228160181 Email: me@omranic.com 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