PROGRESSIVE WEB APPS AND WORDPRESS
ALEXANDRA ANGHEL CTO and Cofounder WPMobilePack.com
What are Progressive Web Apps? (previously called Mobile Web Apps)
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
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
Google Chrome Lighthouse
https://github.com/GoogleChrome/lighthouse
ex. PWA Score
Google Chrome Lighthouse
https://github.com/GoogleChrome/lighthouse
Demo https://wpmobilepack.com/mobile-app-themes/palm.html
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
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/
Regular desktop theme
PWA Theme
Device detection based on user agent
Combining PWA & WordPress:
Mobile
"Desktop
#
REST API (JSON)
WordPress Mobile Pack
WordPress Mobile Pack
WordPress Mobile Pack
A little bit of history
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
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
Challenges
- Lack of coding examples (ES6 + Angular 1)
- Improve existing tests suites
- Not fully compatible with WordPress plugins (ex. forms, Visual Composer)
What’s Next
- Offline mode
- Push notifications
- Support for forms
- Better integration with of WordPress (ex. use Appearance > Menus to create nested menus)
THANK YOU
ALEXANDRA ANGHEL WPMobilePack.com
/appticles/wordpress-mobile-pack-backend
/appticles/theme-obliq