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

Progressive Web Apps For CakePHP developers

Progressive Web Apps For CakePHP developers

1097492785caf9ffeebffeb624202d8f?s=128

Otemuyiwa Prosper

June 10, 2017
Tweet

Transcript

  1. PROGRESSIVE WEB APPS FOR CAKEPHP DEVELOPERS PROSPER OTEMUYIWA - @unicodeveloper

  2. Speaker Bio The CakePHP 2017 Conference 2 ❖ Software Developer

    ❖ Consultant at Auth0 ❖ Open Sourcerer ❖ Self-Acclaimed Developer Evangelist ❖ Community Builder ❖ Jollof Rice Ambassador ❖ Google Developer Expert ❖ Live in Lagos, Nigeria
  3. What is a Progressive Web App? The CakePHP 2017 Conference

    3 A progressive web application is basically a website built using modern web technologies but acts and feels like a mobile app.
  4. What is a Progressive Web App? The CakePHP 2017 Conference

    4 Progressive Web Apps are experiences that combine the best of the web and the best of apps.
  5. Features of Progressive Web Apps? The CakePHP 2017 Conference 5

    What defines the existence of a Progressive Web App?
  6. Why Progressive Web Apps?

  7. Features of Progressive Web Apps? The CakePHP 2017 Conference 7

    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. Features of Progressive Web Apps? The CakePHP 2017 Conference 8

    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. Ermm..Okay, this sounds interesting

  10. This is really fancy but I have some questions for

    you, Prosper! - Developer of Life
  11. Questions from the Developer of Life The CakePHP 2017 Conference

    1 1 ❖ How does this bring cash to the table? ❖ How do I code this stuff? ❖ Do I have to write from scratch or there awesome tools out there? ❖ How do I convince my manager to make the switch? I am a diehard PHP developer, do I really have to learn JavaScript? ❖ This is a PHP Conference man! Should you even be talking about this stuff?
  12. Relax Buddy, I gotch you!

  13. If I can be an executive producer of the #Grateful

    Album at 4 months old… ...then you can build progressive web apps. - Asahd
  14. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 14 1. Flipkart Lite URL: https://www.flipkart.com
  15. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 15 ❖ 70% increase in conversion rate ❖ 3x less data usage ❖ 40% higher re-engagement rate URL: https://www.flipkart.com
  16. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 16 2. Housing Go URL: https://www.housing.com
  17. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 17 ❖ 30% faster page load ❖ 10% longer average session ❖ 40% lower bounce rate URL: https://www.housing.com
  18. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 18 3. Konga EZ URL: https://kongax.konga.com
  19. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 19 URL: https://kongax.konga.com ❖ 92% less data for initial load ❖ 82% less data to complete first transaction
  20. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 20 4. Ali Express URL: https://aliexpress.com
  21. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 21 ❖ 104% in conversion rate for new users. ❖ 74% increase in user sessions. ❖ 2x more pages visited per session per user across all browsers. URL: https://aliexpress.com
  22. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 22 5. Twitter Lite URL: https://mobile.twitter.com
  23. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 23 URL: https://mobile.twitter.com ❖ 76% in the no. of tweets sent. ❖ 2.7% increase in page views ❖ Interactive in <5s on 3G
  24. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 24 6. Forbes URL: https://forbes.com
  25. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 25 ❖ 100 % increase in engagement ❖ 43% increase in sessions per user ❖ 3x increase in scroll depth ❖ 20% increase in ad viewability URL: https://forbes.com
  26. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 26 7. Truecaller URL: https://www.truecaller.com
  27. Production Use Cases Of Progressive Web Apps The CakePHP 2017

    Conference 27 URL: https://www.truecaller.com ❖ 100 % increase in engagement ❖ Time to interactive moved from 2.1s to 1.6s ❖ 91/100 lighthouse score
  28. How to make Progressive Web Apps The CakePHP 2017 Conference

    28 Know thy Service Workers
  29. What are Service Workers? The CakePHP 2017 Conference 29 “A

    Service Worker is an air traffic controller. Think of your web apps requests as planes taking off. Service Worker is the air traffic controller that routes the requests. It can load from the network or even off the cache.” Jeff Posnick - Google
  30. What are Service Workers? The CakePHP 2017 Conference 30 A

    service worker is a programmable proxy, a script, that your browser runs in the background. It has the ability to intercept, handle http requests and also respond to them in various ways. It responds to network requests, push notifications, connectivity changes and many more
  31. What are Service Workers? The CakePHP 2017 Conference 31

  32. What are Service Workers? The CakePHP 2017 Conference 32 ❖

    It is a JavaScript worker & can’t access the DOM directly. ❖ It allows you to control how network requests from your page are handled. ❖ It allows you to cache all static resources which automatically reduces network requests and improve performance. ❖ It allows you to serve up a custom page when the user is offline. With this powerful ability, you can serve up lots of resources from the cache and program it to practically do whatever you want!
  33. What are Service Workers? The CakePHP 2017 Conference 33 Registering

    the Service Worker - http://bit.ly/2mOtIuJ
  34. Offline Support With Service Workers The CakePHP 2017 Conference 34

    Go Pro & Add Offline Support easily to any web app with: sw-precache module - http://bit.ly/2s7N9Si
  35. Offline Support With Service Workers The CakePHP 2017 Conference 35

    Storage mechanism to consider for Offline Caching: IndexedDB Cache API - https://mzl.la/2sNDXA9 PouchDB sw-precache module - http://bit.ly/2s7N9Si Documentation - Offline Storage for PWAs: http://bit.ly/2sNSEU7
  36. Getting Users engaged by adding to the Home Screen

  37. Make the App Installable With Manifest The CakePHP 2017 Conference

    37 ❖ Create the Manifest file - manifest.json
  38. Make the App Installable With Manifest The CakePHP 2017 Conference

    38 ❖ Link to Manifest file in all your web app pages - manifest.json <link rel="manifest" href="/manifest.json">
  39. Make the App Installable With Manifest The CakePHP 2017 Conference

    39 ❖ Hide the Browser UI (optional) When launched from a user’s home screen, you can hide the browser, if you like. "display": "standalone" If not: "display": "browser"
  40. Make the App Installable With Manifest The CakePHP 2017 Conference

    40
  41. Push Notifications - Re-engage those users!

  42. Push Notifications The CakePHP 2017 Conference 42 Check if your

    browser supports Push Notifications
  43. Push Notifications The CakePHP 2017 Conference 43 Desktop Notification Prompt

  44. Push Notifications The CakePHP 2017 Conference 44 Desktop Subscribing to

    Push Notifications
  45. Push Notifications The CakePHP 2017 Conference 45 Desktop Receiving Notifications

  46. Push Notifications The CakePHP 2017 Conference 46 Mobile Receiving Notifications

  47. Improving Performance in Progressive Web Apps The CakePHP 2017 Conference

    47 ❖ Code Splitting With Webpack 2 ❖ Use <link rel=”preload”> to improve initial load time. ❖ Use <link rel=”dns-prefetch”> to attempt to resolve domain names before users click on a link. Twitter saw a 36% improvement in load time with this technique. ❖ Server-side rendering
  48. Measuring Progressive Web Apps The CakePHP 2017 Conference 48 ❖

    Webpagetest.org - ❖ Lighthouse - https://www.webpagetest.org http://bit.ly/2cXdjkU
  49. Measuring Progressive Web Apps The CakePHP 2017 Conference 49 Lighthouse

  50. Measuring Progressive Web Apps The CakePHP 2017 Conference 50 Lighthouse

    Lighthouse is an open-source tool from Google that audits a web app for PWA features. It provides a set of metrics to help guide you in building a PWA with a full application-like experience for your users. Lighthouse tests if your app: • Can load in offline or flaky network conditions • Is relatively fast • Is served from a secure origin • Uses certain accessibility best practices
  51. Measuring Progressive Web Apps The CakePHP 2017 Conference 51 Lighthouse

    1. Download as a Chrome Extension http://bit.ly/2soHveM 2. Install the node command line tool npm install -g lighthouse lighthouse http://airhorner.com --view
  52. Measuring Progressive Web Apps The CakePHP 2017 Conference 52 Lighthouse

  53. Measuring Progressive Web Apps The CakePHP 2017 Conference 53 TTI

    = 2.2s FMP = 1.4s Note: TTI - Time to Interactive FMP - First meaningful paint
  54. Measuring Progressive Web Apps The CakePHP 2017 Conference 54

  55. Measuring Progressive Web Apps The CakePHP 2017 Conference 55 Webpagetest.org

  56. Measuring Progressive Web Apps The CakePHP 2017 Conference 56 Webpagetest.org

    - Load time - First Byte - Start Render - Speed Index - DOM Elements
  57. Measuring Progressive Web Apps The CakePHP 2017 Conference 57 Webpagetest.org

    - Load time - First Byte - Start Render - Speed Index - DOM Elements npm install webpagetest --save const webpagetest = require(‘WebPageTest’); Alternative: Use The API
  58. Measuring Progressive Web Apps The CakePHP 2017 Conference 58 Webpagetest.org

    - Load time - First Byte - Start Render - Speed Index - DOM Elements npm install webpagetest --save const webpagetest = require(‘WebPageTest’); Alternative: Use The API
  59. Vanilla JS is cool, but... How do I make PWAs

    with JavaScript Frameworks?
  60. Vue.js - Progressive Web Apps The CakePHP 2017 Conference 60

    The Progressive JavaScript Framework ❖ npm install -g vue-cli ❖ vue init pwa badassapp ❖ cd badassapp ❖ npm install ❖ npm run dev Out-of-the-box
  61. Preact - Progressive Web Apps The CakePHP 2017 Conference 61

    The Fast 3kb alternative to React with the same ES6 API ❖ npm install -g preact-cli ❖ preact create badassapp ❖ cd badassapp ❖ npm start ❖ npm run build Out-of-the-box
  62. React.js - Progressive Web Apps The CakePHP 2017 Conference 62

    ❖ npm install -g create-react-app ❖ create-react-app badassapp ❖ cd badassapp ❖ npm install ❖ npm run start Out-of-the-box
  63. Polymer - Progressive Web Apps The CakePHP 2017 Conference 63

    ❖ npm install -g polymer-cli ❖ polymer init [template] ❖ cd badassapp ❖ polymer install ❖ polymer serve [options] Out-of-the-box
  64. Study & Reference code for making Progressive Web Apps

  65. Study & Reference Code Progressive Web Apps The CakePHP 2017

    Conference 65 ❖ Launched at Google I/O 2017 ❖ Hacker news PWA in React, Preact, Svelte, Vue, Angular, Polymer & viperHTML. https://hnpwa.com
  66. Learning all about Progressive Web Apps The CakePHP 2017 Conference

    66 Offline first - http://bit.ly/2seG8zP Instant Loading - http://bit.ly/2s8xH8q Push Notifications - http://bit.ly/2s8xH8q Google PWA Training - http://bit.ly/2pc5bkj
  67. Thank you #CakeFest Now go & be Progressive! - @unicodeveloper