PWWA: Progressive WordPress Web App

PWWA Progressive WordPress Web App WP Meetup Milano 11/09/2018 Andriy
Frankevych

Andriy Frankevych • Back end web developer @ facile.it •
@alsoknownasdrew on GitHub, Twitter, Telegram etc... • 3+ years of experience with WordPress • https://t.me/webdevhub

What is a PWA?

PWA ARE: Reliable • Load instantly • No downasaur even
when offline Fast • Respond quickly to user interactions • Smooth animations • No janky transitions Try them on https://pwa.rocks/ Engaging: • Home screen launch • Full screen experience • Access to native features like push notifications, payments API(full list on https://whatwebcando.today/)

PWA are reliable

53% of users will abandon your website if it takes
longer than 3 seconds to load (Google DoubleClick Blog)

One of the most popular WP theme metrics

Minify and concatenate your assets

Deregister everything!

Inline critical CSS and load the rest later

Inline critical CSS (lazy way)

Inline critical CSS

Use system font stack

Offline first

Service Worker • Javascript file executed on a separate thread
• Acts like a proxy between your client(browser) and network • Can intercept fetch events • Have access to IndexedDB and Cache API

Service Worker Registration

Service Worker Installation

Fetch event interception

Cache API Access

Retrieving from cache

Google Workbox https://developers.google.com/web/tools/workbox/

Offline homepage

PWA are fast

Barba.js

PWA are engaging

Launch from home screen

Manifest.json

A2HS Requirements • The web app is not already installed
• The user has interacted with the domain for at least 30 seconds • Includes a web app manifest that includes • Served over HTTPS (required for service workers) • Has registered a service worker with a fetch event handler

A2HS Handler

PWA are Reliable: • Fast load and first contentful and
meaningful paint • Website responds with status 200 when offline Fast: • Client side Ajax routing • Content transitions and animations on user interaction Engaging: • A2HS prompt • Lunch from home and standalone fullscreen experience

Thanks! Resources: • _S: https://underscores.me/ • Gulp.js: https://gulpjs.com/ • loadCSS:
https://github.com/filamentgroup/loadCSS • Lighthouse: https://developers.google.com/web/tools/lighthouse/ • Workbox: https://developers.google.com/web/tools/workbox/ • Barba.js: http://barbajs.org/ • Favicon generator: https://realfavicongenerator.net/ • Firebase Web manifest generator: https://app-manifest.firebaseapp.com/

PWWA: Progressive WordPress Web App

PWWA: Progressive WordPress Web App

Andriy

More Decks by Andriy

Other Decks in Programming

Featured

Transcript