Progressive Web Apps (PWAs) can provide app-like experiences directly through the web. PWAs offer advantages over traditional mobile websites like better user engagement through features like push notifications, the ability to work offline through caching, and feeling instantly loaded during repeat visits. The WordPress Mobile Pack framework allows building PWAs on WordPress that combine dynamic content delivery with separate app themes and URLs, using the WordPress REST API to serve content to both desktop and mobile users. The framework provides starter kits for setting up PWA development environments integrated with WordPress to build multiple app themes with similar features using a single API.

1. PROGRESSIVE WEB APPS
AND WORDPRESS
ALEXANDRA ANGHEL
CTO and Cofounder
WPMobilePack.com

2. What are Progressive Web Apps?
(previously called Mobile Web Apps)

3. 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

4. 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

5. Google Chrome Lighthouse
https://github.com/GoogleChrome/lighthouse
ex. PWA Score

6. Google Chrome Lighthouse
https://github.com/GoogleChrome/lighthouse

7. Demo
https://wpmobilepack.com/mobile-app-themes/palm.html

8. 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

9. 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/

10. Regular desktop
theme
PWA Theme
Device detection based on user agent
Combining PWA & WordPress:

Mobile
"
Desktop
#
REST API (JSON)

11. WordPress Mobile Pack

12. WordPress Mobile Pack

13. WordPress Mobile Pack

14. A little bit of history

15. 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

16. 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

17. Challenges
- Lack of coding examples (ES6 + Angular 1)
- Improve existing tests suites
- Not fully compatible with WordPress
plugins (ex. forms, Visual Composer)

18. What’s Next
- Offline mode
- Push notifications
- Support for forms
- Better integration with of WordPress (ex.
use Appearance > Menus to create nested
menus)

19. THANK YOU
ALEXANDRA ANGHEL
WPMobilePack.com
/appticles/wordpress-mobile-pack-backend
/appticles/theme-obliq