Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Abdelrahman Omran

October 29, 2016

More Decks by Abdelrahman Omran

Other Decks in Programming


  1. omranic.com Abdelrahman Omran Rinvex Co-founder | Google Developer Expert |

    Software Architect 2 Work hard until you no longer have to introduce yourself. “ ”
  2. 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
  3. 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
  4. 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!
  5. 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 ✨
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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 ...
  13. 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
  14. 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.
  15. omranic.com Setup 4. Test the ready environment 40 Browse to

    your new PWA using Chrome Web Server via your localhost link 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 Ready to go This is a minimal PWA placeholder ready for development!
  16. 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
  17. 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
  18. 51