Progressive Web Apps for PHP Developers

So we may have heard quite a bit about Progressive Web Apps (or not), making your sites work offline and load really fast. A question often asked is - "I have this app built w/o this awesome PHP Framework, where do I begin?"
During this talk, Femi will be taking us through a step by step process for making a platform with a PHP backend a progressive web app, backed with examples of where this has been done.

Transcript

1. Progressive Web Apps for PHP|* Developers by Femi TAIWO
2. What we’ll cover 1. What’s a Progressive Web App? 2. Key Features of PWAs 3. Sites that are PWAs 4. Getting Started with PWAs 5. Work Offline, Be Installable, Send Pushes 6. Resources, People & Credits
3. Hello! I am Femi TAIWO @dftaiwo
4. What’s a “Progressive Web App” ? 1
5. vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 13% 87% Mobile web Apps
6. 80% OF TIME SPENT IS IN USERS’ TOP 3 APPS Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
7. Capability Reach
8. “ Number of Apps An Average User Installs Per Month Zero
9. “ Number of Sites An Average User Visits Per Month 100
10. Capability Reach
11. Progressive Web App A web application that - takes advantage of modern browser features, - can be added to your homescreen, - behaves like a native application, - has features such as push messaging, - supports offline mode.
12. “ Progressive Web Apps are a whole new level of caring about the quality of your end-to-end user experience
13. “ Progressive Web Apps are all about Reducing Friction
14. Reliable Fast Engaging User experiences need to be...
16. of users abandon sites that take longer than 3 seconds to load 40%
17. Full screen, theming, orientation, etc. Push notifications Immersive Notifications Engaging Auto-adding to Home Screen Home Screen
18. Quick Demo bit.ly/dealpwa
19. bit.ly/dealpwa
26. Key Features of PWAs 2
27. 1. Loads Instantly 2. Installable 3. Push Messaging 4. App-Like 5. Responsive 6. Secure 7. Discoverable 8. Shareable Key Features of PWAs
28. Popular Sites that are PWAs 3
30. Getting Started 4
31. Web server
32. Service Workers!
33. Service worker Client side proxy (written in JavaScript) Cache Web server
34. Image: By @ryanchenkie | https://auth0.com/blog/creating-offline-first-web-apps-with-service-workers/
35. With Service Workers ◇ Prefetch App Resources ◇ Work Offline ◇ Sync in the Background ◇ Show Push Notifications ◇ Control Network Requests ◇ Move fast after first visit
36. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(reg) { console.log('Service Worker Registered', reg); }) .catch(function(err) { console.log('Error registering Service Worker', err); }); } https://developers.google.com/web/fundamentals/primers/service-worker/?hl=en
37. var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });
38. <link rel="manifest" href="/manifest.json"> { "name": "DealHunter Demo", "short_name": "DealHunter", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
39. Why are we doing this?
40. Make an engaged user on the web Keep them there
41. Make an engaged user on the web Engaged native user Upgrade to
42. >1,000,000,000 Approximate Number of Google Chrome Users Chrome+Firefox >=68% Source: Google Play | Net Market Share
44. • Web Bluetooth • Web NFC • Generic Sensor API • More! Roadmap | Emerging Standards
45. • Showcase: https://pwa.rocks/ • Browser Status: https://jakearchibald.github.io/isserviceworkerready/ • Lighthouse - https://github.com/GoogleChrome/lighthouse • Washington Post PWA - https://wapo.com/pwa • Let’s Encrypt - https://letsencrypt.org/ • SSLMate - https://sslmate.com • Search Ranking Guidance - https://bit.ly/https-migration • Offline cookbook - https://jakearchibald.com/2014/offline-cookbook/ • Code labs - https://codelabs.developers.google.com/pwa-roadshow • Retention: http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html Resources
46. Credits Special thanks to all the people who made and released these awesome resources for free: ◇ Presentation template by SlidesCarnival ◇ Photographs by Unsplash
47. Any questions? You can find me at: ◇ @dftaiwo ◇ dftaiwo@gmail.com Thanks!