progressive web apps and wordpress

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