Progressive Web Apps For CakePHP developers

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