Progressive Web Apps and WordPress

Embed Size (px)

Text of Progressive Web Apps and WordPress

  • PROGRESSIVE WEB APPS AND WORDPRESS

    ALEXANDRA ANGHEL CTO and Cofounder WPMobilePack.com

    http://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

    https://github.com/GoogleChrome/lighthouse

  • Google Chrome Lighthouse

    https://github.com/GoogleChrome/lighthouse

    https://github.com/GoogleChrome/lighthouse

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

    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

    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 Papas 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)

  • Whats 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