Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressivewebapps by sheddy nathan for isdev2017

399 views

Published on

Journey to PWA's

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Progressivewebapps by sheddy nathan for isdev2017

  1. 1. Progressive Web Apps: Bridging The Gap Mail Me: akintayoshedrack@gmail.com
  2. 2. Speaker profile.  TECH ENTHUSIAST  PYTHON AND JAVASCRIPT NINJA  OBVIOUSLY, AM HUMAN  STUDENT  FRONT-END DEVELOPER AT CAMERAMAN.NG  FOOD LOVER  VSCODE ADVOCATE WINDOWS OS NO.1 FAN Sheddy_Nathan Github.com/hactivist123
  3. 3. Contents  Overview of PWA  Native Apps Vs PWA  PWA Baseline Implementation  Case Studies  Lacking Features  PWA - Wish lists  Conclusion
  4. 4. Overview of PWA
  5. 5. Overview  Progressive Web Apps are user experiences that have the reach of the web  Reliable - Load instantly and never show the ‘downasaur’  Fast - Respond quickly to user interactions  Engaging - Feel like a natural app on the device
  6. 6. Overview
  7. 7. 60% of world-wide mobile connections are 2G
  8. 8. PWA Baseline Implementation
  9. 9. PWA Baseline Implementation Required Recommended o HTTPS + Service Worker o Web App Manifest o App shell caching o Splash screen o Smooth navigation o Cross browser support o Push notifications o Advanced Offline Support
  10. 10. PWA Baseline Implementation  Client-side proxy written in JavaScript  Can intercept requests  Can decide to go idle or to re-activate themselves  Safari and Edge support is still in Development  Must use HTTPS Service Workers
  11. 11. Service worker
  12. 12. Register service worker if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service- worker.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); }
  13. 13. Install service worker (service-worker.js) var cacheName = 'Cache-name-1'; var dataCacheName = 'dataCache-name-v1'; var filesToCache = [ '/', '/index.html', '/app/app_client.min.js', '/assets/css/main.css', '/images/resources/128.png', '/images/resources/144.png', '/images/resources/152.png', ]; self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }).then(function(){ return self.skipWaiting(); })
  14. 14. Update service worker self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (key !== cacheName) { console.log('[ServiceWorker] Removing old cache', key); return caches.delete(key); } })); }) ); return self.clients.claim(); });
  15. 15. Fetch Data self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
  16. 16. PWA Baseline Implementation  Shell is cached using service worker  Uses cached data from indexedDB or any other web storage  Updates cached view with online data when loaded  Cached shell can load instantly on repeat visits. App Shell
  17. 17. PWA Baseline Implementation  Rich native presence on user’s home screen  Launch app in full-screen mode  Control the screen orientation for optimal viewing  Define “splash screen” launch, theme colour for site Web App Manifests { "short_name": "My Cool App", "name": "My Totally Cool Application", "icons":[ {"src": "launcher-icon-3x.png", "sizes": "192x192", "type": "image/png"}, {"src": "launcher-splash.png", "sizes": "512x512", "type": "image/png"}], "start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape" }
  18. 18. PWA Baseline Implementation  User who visits 2x in a given time period will be prompted with “add to home screen”  One tap to add to home screen  Opens full screen by showing splash screen on load (no URL bar) Web App Manifests
  19. 19. PWA Baseline Implementation  Show content when on flaky networks  Store data locally using service workers  Local Stroage, WebSQL or IndexedDB  Use an abstraction, like PouchDB  Caching Pattern  Cache only or Network only  Try cache first, then network  Try network first, then cache Offline
  20. 20. PWA Baseline Implementation  App can request Background Sync  Service Worker triggers Sync Event when it is appropriate (Network, Battery…)  Also plans for periodic Background Sync Background Sync
  21. 21. PWA Baseline Implementation  System level notifications, like apps  Register/Receive push notification using service worker  Ask to notify users with specific information  Can send notifications even when page closed Push Notifications
  22. 22. Push notifications self.addEventListener('push', function(event) { var title = 'Hello Push Notification'; var body = 'Welcome to my website.'; var icon = '/images/resources/152.png'; var tag = 'simple-push-example-tag'; event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag }) ); });
  23. 23. PWA Baseline Implementation  For first-time visitors, load pages in <10s on 3G connections  For repeat visitors, instant loading of page in <500 milliseconds  Always scrolling at 60 frames/second  Content shouldn’t jump as images are loaded Instant loading and smooth navigation
  24. 24. Case Studies
  25. 25. Case Studies  3x time spent on site, from 1 minute to 3.5 minutes  Seeing 40% visitors return week over week  70% greater conversion rate among those arriving via “Add to Homescreen”  3X lower data usage Flipkart
  26. 26. Case Studies  76% more web conversions  30% more monthly active users on Android, 14% more on iOS  4X higher interaction rate from “Add to Homescreen” Alibaba
  27. 27. Case Studies  38% more conversions  40% lower bounce rate  10% longer average session  30% faster page load Housing.com
  28. 28. PWA - Wish lists
  29. 29. PWA - Wishlists  Automatic grant of permissions for Push notification when added to home screen.  Events to instrument uninstalls  Deduping between native and web app from the same publisher (Push notification)  Deep linking into the installed web app  Some equivalent of Device ID  More top browsers including progressive features  Discoverability on the store as well on the user’s phone
  30. 30. Conclusion
  31. 31. Conclusion If you target the Next Billion Users, PWAs are the way to go If you are planning for a product, Traditionally, you’d have to build You can, right now, in most cases, just build And once Safari implements Service Worker, it will be just Desktop/Mobile web + Native Android + Native iOS PWA + Native iOS app PWA
  32. 32. 1Bmonthly mobile Chrome users
  33. 33. Thank You!

×