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