progressive web apps and wordpress
TRANSCRIPT
![Page 1: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/1.jpg)
PROGRESSIVE WEB APPS AND WORDPRESS
ALEXANDRA ANGHEL CTO and Cofounder WPMobilePack.com
![Page 2: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/2.jpg)
What are Progressive Web Apps? (previously called Mobile Web Apps)
![Page 3: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/3.jpg)
Progressive Web Apps vs.
Mobile Friendly
- App like look & feel
- Better user engagement
- Push notifications
- Offline caching & instant loading (on
repeat visit)
- Can be packaged & submitted to App Stores
ADVANTAGES
![Page 4: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/4.jpg)
Progressive Web Apps “A new way to deliver amazing user
experiences on the web.”
https://developers.google.com/web/progressive-web-apps/
- Secure (HTTPS)
- Responsive on tablets &
mobile devices
- The start URL (at least) loads while offline
- Add to Home screen
- Loads fast
- Cross-browser (Chrome,
Edge, Firefox and Safari)
- Each page has a URL
MAIN FEATURES
![Page 5: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/5.jpg)
Google Chrome Lighthouse
https://github.com/GoogleChrome/lighthouse
ex. PWA Score
![Page 6: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/6.jpg)
Google Chrome Lighthouse
https://github.com/GoogleChrome/lighthouse
![Page 7: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/7.jpg)
Demo https://wpmobilepack.com/mobile-app-themes/palm.html
![Page 8: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/8.jpg)
Why Now?
- JavaScript is growing - most commonly used programming language*
- REST API (as of WordPress 4.5)
- Android Instant Apps*
- .app domains
* https://developer.android.com/topic/instant-apps/index.html
**http://stackoverflow.com/insights/survey/2016
![Page 9: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/9.jpg)
Combining PWA & WordPress:
Dynamic serving combined with Separate URLs
Server responds with different content on the same URL depending on the user agent
requesting the page.
https://developers.google.com/webmasters/mobile-sites/
![Page 10: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/10.jpg)
Regular desktop theme
PWA Theme
Device detection based on user agent
Combining PWA & WordPress:
Mobile
"Desktop
#
REST API (JSON)
![Page 11: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/11.jpg)
WordPress Mobile Pack
![Page 12: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/12.jpg)
WordPress Mobile Pack
![Page 13: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/13.jpg)
WordPress Mobile Pack
![Page 14: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/14.jpg)
A little bit of history
![Page 15: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/15.jpg)
What We Wanted
- Multiple App Themes
- Similar features
- Same API
- Easily maintainable
What We Had
- Sencha Touch legacy
- Bloated framework, very slow development
- Duplicate code
- Separate phones & tablets profiles
- Templates were not HTML
- Heavy production files
![Page 16: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/16.jpg)
Starter Kit
Environment setup
Structure
Integrate with the API
Global JSON config
URL rewriting
Customizable styling
Build tasks
Pre-commit hooks
Tests
Code quality
Documentation
John Papa’s style guide: Folders-by-Feature
![Page 17: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/17.jpg)
Challenges
- Lack of coding examples (ES6 + Angular 1)
- Improve existing tests suites
- Not fully compatible with WordPress plugins (ex. forms, Visual Composer)
![Page 18: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/18.jpg)
What’s Next
- Offline mode
- Push notifications
- Support for forms
- Better integration with of WordPress (ex. use Appearance > Menus to create nested menus)
![Page 19: Progressive Web Apps and WordPress](https://reader031.vdocuments.mx/reader031/viewer/2022030313/58e51b151a28ab624e8b5033/html5/thumbnails/19.jpg)
THANK YOU
ALEXANDRA ANGHEL WPMobilePack.com
/appticles/wordpress-mobile-pack-backend
/appticles/theme-obliq