PWA for PHP Developers
2 likes3,112 views
The document discusses the evolution of web technologies and the emergence of Progressive Web Apps (PWAs) as a logical advancement in web application development. It emphasizes the fundamental requirements for PWAs, such as secure origins and offline capabilities, while highlighting their advantages over traditional apps. The presentation aims to educate PHP developers on the significance of adopting PWAs to meet modern web expectations and enhance user experiences.
PWA for PHP Developers
- 1. PWA for the PHP Developer Ben Marks | Senior Evangelist | Magento, an Adobe Company joind.in
- 2. Ben Marks // @benmarks // [email protected]
- 3. © 2019 Adobe. All Rights Reserved. Why this talk? 1 The Web is still evolving. _________________ Not unfamiliar to developers or users, we continue to see changes in how the Web is built, delivered, consumed, and experienced. 3 2 PWA is TNGT, sort of. _________________ So often what is stated to be TNGT is really TNGH. PWA is not hype. It is a gentle, logical evolution borne from best practices. 3 New tech for new times. _________________ Some of the most substantial shifts in Web experience have started with small technical additions to the current technology & techniques. _________________ _________________ _________________
- 4. © 2019 Adobe. All Rights Reserved. Progressive (Open) Web Application P Progressive _________________ Progressive because of “progressive enhancement”, and poetically because of the gradual technical evolution over time J 4 W Web _________________ Web because of the fundamental base in Web technologies & delivery: HTTPS, JS, JSON. Also, they “live” in the Web. A Application _________________ Application because of an app icon, an app-y entry point, and if needed, app-y capabilities. _________________ _________________ _________________
- 5. The Web is still Evolving, and the Fundamentals Still Matter
- 6. © 2019 Adobe. All Rights Reserved. Progression of Web content focus over time: 6 Delivery Interactivity Experience *discoverability is important, but OOS for this presentation
- 7. © 2019 Adobe. All Rights Reserved. <form/>, a.k.a: Interactivity, the Early Years 7 Forms, the original interactive UI Sou https://medium.freecodecamp.org/a-step-by-step-guide-to-getting-started-with-html-forms- 7f77ae4522b5
- 8. © 2019 Adobe. All Rights Reserved. Early promises of cross-platform rich UI 8 Who remembers Java and Flash applets? Source: http://weelookang.blogspot.com/2010/06/ejs-open-source-micrometer-java-applet.html
- 9. © 2019 Adobe. All Rights Reserved. Later, HTML5 and JavaScript Displaced Java Applets & Flash 9 JavaScript and HTML5 could provide interactive animation UI http://weelookang.blogspot.com/2016/11/flight-dynamics-gimbal-javascript-html5.html?view=classic
- 10. © 2019 Adobe. All Rights Reserved. Web Content Evolution: What happened? § Web went from just-PC to always-with-me § Apps (and walled gardens) § Consumers have new expectations for information in context 10 Credit: AP
- 11. © 2019 Adobe. All Rights Reserved. Later, technologies began to bridge the gap between Web and mobile 11 § Adobe AIR Applications § Windows Store Apps § Chrome Packaged Applications § Firefox OS Packaged Applications § Cordova/PhoneGap + Crosswalk Apps § BlackBerry WebWorks Apps § W3C Widgets § WebOS Apps § Chromium Embedded Framework § Electron Source: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
- 12. PWA is TNGT
- 13. © 2019 Adobe. All Rights Reserved. Current realities: Apps are Popular! Estimated app downloads in 2018: 205 Billion 13 Source: https://www.statista.com/statistics/271644/worldwide-free-and-paid-mobile-app-store-downloads/
- 14. © 2019 Adobe. All Rights Reserved. Current realities: Apps are getting better are retention Retention >1 use is improving 14 Source: http://info.localytics.com/blog/21-percent-of-users-abandon-apps-after-one-use
- 15. © 2019 Adobe. All Rights Reserved. Current realities: the Web is Still the Real Deal § Most users are on the Web, not in App Stores § Apps are heavy in multiple dimensions § Acquisition & installation are “frictional”, whether from the Web or in a walled garden § App use is a limited context § Bandwidth may be a concern § Content delivery is complicated by… a lot § Eleventy-billion display form factors § Keyboard+mouse vs Touch input § Connection quality § Advertising, analytic, and developer cruft 15
- 16. © 2019 Adobe. All Rights Reserved. Current realities § We have solutions for these challenges of modern delivery & interactivity: § RWD § Progressive enhancement § HTTP/2 § Progressive Web Apps employ these concepts, adding additional capabilities, and either requiring or encouraging best practices 16
- 17. PWA: New Tech for New Times
- 18. © 2019 Adobe. All Rights Reserved. So, what do we get? 18 Credit: Infrequently.org § The answer to this question has evolved over the past two years § Add to homescreen § Sync-able & snappy offline functionality § Access to the app tray / task switcher § Server push: re-engage, background sync
- 19. © 2019 Adobe. All Rights Reserved. A PWA has exactly three requirements… § Originate from a Secure Origin, i.e. be served over TLS and no active mixed content § Provide an application manifest, i.e. a JSON file with specific parameters defined § Load while offline, i.e. a Service Worker is required 19
- 20. © 2019 Adobe. All Rights Reserved. A PWA has exactly three requirements… § Originate from a Secure Origin, i.e. be served over TLS and no active mixed content § Provide an application manifest, i.e. a JSON file with specific parameters defined § Load while offline, i.e. a Service Worker is required 20
- 21. © 2019 Adobe. All Rights Reserved. A PWA has exactly three requirements… § Originate from a Secure Origin, i.e. be served over TLS and no active mixed content § Provide an application manifest, i.e. a JSON file with specific parameters defined § Load while offline, i.e. a Service Worker is required 21
- 22. © 2019 Adobe. All Rights Reserved. Service worker: Registration 22 Source: https://developers.google.com/web/fundamentals/primers/service-workers/
- 23. © 2019 Adobe. All Rights Reserved. Service worker: Install 23 Source: https://developers.google.com/web/fundamentals/primers/service-workers/
- 24. © 2019 Adobe. All Rights Reserved. Service worker: fetch 24 Source: https://developers.google.com/web/fundamentals/primers/service-workers/
- 25. © 2019 Adobe. All Rights Reserved. Use Lighthouse to help with best practices § All URLs should respond 200, even when offline § Responsive design to handle mobile, tablet, and PC application § First load fast at 3G bandwidth § Cross-browser functional § Page transitions shouldn’t be blocked (e.g., app- like response) § Each page its own URL 25 Google Lighthouse https://developers.google.com/web/progressive-web-apps/checklist
- 26. © 2019 Adobe. All Rights Reserved. Be aware of latest limitations, abilities, etc 26 § https://whatwebcando.today/ - visualize browser+OS capabilities § May need to set Chrome flags depending on workflow and OS § https://pwa.rocks/ is a nice showcase of several apps for reference § Magento’s PWA Studio might be of interest: https://magento-research.github.io/pwa-studio/
- 27. © 2019 Adobe. All Rights Reserved. Grokking PWA It’s different… …but not that different. It’s not always obvious… …but it’s out there already. There are limitations… …but not for long. 27 Credit: Infrequently.org
- 28. © 2019 Adobe. All Rights Reserved. Thank you! Ben Marks Senior Evangelist Magento, an Adobe Company @benmarks [email protected] m+WA: +18436704240 28 https://joind.in/talk/59e4c Agree? Disagree? What would you like to see? Join me!