Progressive Web Apps For CakePHP developers

Slide 1

Slide 1 text

PROGRESSIVE WEB APPS FOR CAKEPHP DEVELOPERS PROSPER OTEMUYIWA - @unicodeveloper

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Features of Progressive Web Apps? The CakePHP 2017 Conference 5 What defines the existence of a Progressive Web App?

Slide 6

Slide 6 text

Why Progressive Web Apps?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Ermm..Okay, this sounds interesting

Slide 10

Slide 10 text

This is really fancy but I have some questions for you, Prosper! - Developer of Life

Slide 11

Slide 11 text

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?

Slide 12

Slide 12 text

Relax Buddy, I gotch you!

Slide 13

Slide 13 text

If I can be an executive producer of the #Grateful Album at 4 months old… ...then you can build progressive web apps. - Asahd

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

How to make Progressive Web Apps The CakePHP 2017 Conference 28 Know thy Service Workers

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

What are Service Workers? The CakePHP 2017 Conference 31

Slide 32

Slide 32 text

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!

Slide 33

Slide 33 text

What are Service Workers? The CakePHP 2017 Conference 33 Registering the Service Worker - http://bit.ly/2mOtIuJ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Getting Users engaged by adding to the Home Screen

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Make the App Installable With Manifest The CakePHP 2017 Conference 38 ❖ Link to Manifest file in all your web app pages - manifest.json

Slide 39

Slide 39 text

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"

Slide 40

Slide 40 text

Make the App Installable With Manifest The CakePHP 2017 Conference 40

Slide 41

Slide 41 text

Push Notifications - Re-engage those users!

Slide 42

Slide 42 text

Push Notifications The CakePHP 2017 Conference 42 Check if your browser supports Push Notifications

Slide 43

Slide 43 text

Push Notifications The CakePHP 2017 Conference 43 Desktop Notification Prompt

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Push Notifications The CakePHP 2017 Conference 45 Desktop Receiving Notifications

Slide 46

Slide 46 text

Push Notifications The CakePHP 2017 Conference 46 Mobile Receiving Notifications

Slide 47

Slide 47 text

Improving Performance in Progressive Web Apps The CakePHP 2017 Conference 47 ❖ Code Splitting With Webpack 2 ❖ Use to improve initial load time. ❖ Use 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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Measuring Progressive Web Apps The CakePHP 2017 Conference 49 Lighthouse

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Measuring Progressive Web Apps The CakePHP 2017 Conference 52 Lighthouse

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Measuring Progressive Web Apps The CakePHP 2017 Conference 54

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Vanilla JS is cool, but... How do I make PWAs with JavaScript Frameworks?

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Study & Reference code for making Progressive Web Apps

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Thank you #CakeFest Now go & be Progressive! - @unicodeveloper