Introduction to PWAs & New JS Frameworks for Mobile

#BrightonSEO@goutaste

Emily Grossman MobileMoxie

Introduc:ontoPWAsandJavaScriptFrameworks

@goutaste

hEp://www.slideshare.net/mobilemoxie


JavaScript enabled the web to create full, interactive applications… mostly


Some of the “native app” features were still lacking

Responsive Secure Fast

Downloadable WorksOffline PushNo:fica:ons


Responsive Secure Fast

Downloadable WorksOffline PushNo:fica:ons

Progressive Web Apps (PWAs) Change This


The App-Like Web: Progressive Web Apps

@suzzicks bit.ly/cindy-mozcon-2016


Offline in Action


PWAs = Death to the Dino

(Someoneelsemadethisillustra:on,andIphotographedit.NowIcannotrememberwho.SORRY.)


Why Do People Like PWAs? Mobilesalesincreasedby18%YoY

43%increaseinsessions/user100%increaseinsessiondura:on 80%improvementinload:me

30%higherConversionRatethanna:veappinTier3ci:es

20%ofPWAbookingsarefrom

userswho’duninstalledna:veapp

Homepageloadscompletelyin.8seconds

Customeracquisi:oncostis10Xless Shoppersspend20%more?methanonpreviousmobilesite

40%lowerbounceratethanonpreviousmobilesite

hEps://www.pwastats.com/


THIS JUST IN


Basic Technical

Reqs


1. App Manifest

hEp://bit.ly/webapp-manifest

Chrome Dev Tools ViewJSON file you link to in your <head>


2. Service Worker

WebApp Network

Cache

ServiceWorker

Get/hero.png

Iborrowedthisanalogyfrom@jeffposnick


2. Service Worker

WebApp Network

Cache

ServiceWorker

Get/hero.png



2. Service Worker

WebApp Network

Cache

ServiceWorker

Get/hero.png



2. Service Worker

WebApp Network

Cache

ServiceWorker

Get/hero.png



3. https Mobile Friendly Website



You don’t need a JS framework


But many web apps are easier to build if you do use one.


And some frameworks are easier to make “PWA ready” than others


Meet the Vue, Preact, React CLIs

PreactCLI

@addyosmani WatchAddyIntrothese:hEps://youtu.be/aCMbSyngXB4


3 PWA Optimizations to Discuss Today:

1.Speed&Performance

2.Measurement

3.Suppor7ngOlder/OtherBrowsers


1.Speed&Performance 3.BrowserSupport

Source:@lukew


1.Speed&Performance

@addyosmani

“The bloat of your baseline defines how much headroom you have for app code”

How much is taken up by your framework?

hEp://bit.ly/pwas-the-new-normal


1.Speed&Performance

@addyosmani



@addyosmani hEp://bit.ly/pwas-the-new-normal


1.Speed&Performance

@addyosmani




1.Speed&Performance

@addyosmani





1.Speed&Performance

Service Workers

Can Speed Up Sites

on Repeat Views


self.addEventListener('install', function(event) { event.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll( [ '/css/bootstrap.css', '/css/main.css', '/js/bootstrap.min.js', '/js/jquery.min.js', '/offline.html' ] ); }) );});

1.Speed&Performance

Set Up Your Service Worker to Cache Essential Assets

On Service Worker Install Event…

hEp://bit.ly/sw-caching


1.Speed&Performance

Set Up Your Service Worker to Cache Essential Assets

document.querySelector('.cache-article').addEventListener('click', function(event) { event.preventDefault(); var id = this.dataset.articleId; caches.open('mysite-article-' + id).then(function(cache) { fetch('/get-article-urls?id=' + id).then(function(response) { // /get-article-urls returns a JSON-encoded array of // resource URLs that a given article depends on return response.json(); }).then(function(urls) { cache.addAll(urls); }); });});

On user interaction…(ex. “save for offline” button)

hEp://bit.ly/sw-caching


1.Speed&Performance

But That Doesn’t Mean You Are Done & Can Ignore Performance


1.Speed&Performance

Optimize for Fast First Paint

Pre-loadislikesaying,“Hey,browser!Here’saresourceyou’regoingtoneedlateron,sostartloadingitnow.”

•  Pre-load can specify the download “as” =•  "script",•  "style",•  "image",•  "media",•  "document”

bit.ly/what-is-rel-preload

HTTP/2 + Preload = Moves the ‘start download’ time of a critical asset closer to initial request


1.Speed&Performance

bit.ly/rel-preload-demo

VIDEO: bit.ly/rel-preload-demo


1.Speed&Performance

But I’m Doing SSR & My First Paint Times

Are ROCKING

“ “ - Someone in the audience


One of the Issues With Server-Side Rendering is

The Trade-Off With Time to

Interactive

SimulatedSlowNetworkhEps://youtu.be/6Ljq-Jn-EgU

VIDEO: hEps://youtu.be/6Ljq-Jn-EgU


1.Speed&Performance

TTI has a �high

correlation with

conversion rates

bit.ly/google-measure-performance


1.Speed&Performance

Optimize for TTI: Codesplitting

READTHISTOSTART:hEps://survivejs.com/webpack/building/code-spliing/


1.Speed&Performance

Subjective Performance

How do we make waits feel faster?


1.Speed&Performance

For 2 Sec+ Waits: Progress Bars

Chris Harrison, Zhiquan Yeo, Scott E. HudsonCarnegie Mellon

hEp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf

Progress bars with backwards decelerating bands feel

12% faster


1.Speed&Performance

Progress Bars

hEp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf


1.Speed&Performance

Predictive Preloading* *unfortunately a desktop-only trick

hEps://github.com/SamKnows/futurelinkhEps://github.com/SamKnows/vue-futurelink

Optimize for Next Page Load


1.Speed&Performance

Predictive Preloading* *unfortunately a desktop-only trick

hEps://blog.samknows.com/intelligent-page-preloading-with-futurelink-c1de25449dee

VIDEO: see link below


1.Speed&Performance

“React As Soon As User Indicates Intent” Cut Down on Click Latency

ExperimentbyEliFitch:Trackyourreac7on7meon‘mousedown’vs.‘click’hNp://bit.ly/eli-fitch-fluent

let startTime;

$('.button--onclick').on('mousedown', startTimer);

$('.button--onclick').on('click', endTimer);

function startTimer() {startTime = Date.now();

}

function endTimer() {const nowish = Date.now();const timey = nowish - startTime;$('.readout').html(`Mousedown fired <span class="bold">${timey}ms</span> before click

event`);}


1.Speed&Performance


“Mousedown gives you a �100 – 150ms head start”

-EliFitch

hEp://bit.ly/eli-fitch-fluent


1.Speed&Performance


“For touch screens, begin on touchstart & cancel on touchmove”

-EliFitch

hEp://bit.ly/eli-fitch-fluent


1.Speed&Performance 2.Measurement



Measuring “Installs” from the Chrome

PWA Install Banner



Measuring “Installs” window.addEventListener('beforeinstallprompt', function(e) { // beforeinstallprompt Event fired

// e.userChoice will return a Promise. // For more details read: https://developers.google.com/web/fundamentals/getting-started/primers/promises e.userChoice.then(function(choiceResult) {

console.log(choiceResult.outcome);

if(choiceResult.outcome == 'dismissed') { console.log('User cancelled home screen install'); } else { console.log('User added to home screen'); } });});



Measuring “Launches”Add a tracking parameter to your “start_url” in the App Manifest



bit.ly/track-offline

How Do You Record Offline “Traffic”?



Measuring Push Notifications

bit.ly/GA-push-tracking


3. Supporting Old &

Other Browsers

1.Speed&Performance 2.Measurement 3.BrowserSupport





What is a

Polyfill?



“POLY meaning it could be solved using any number of techniques… and FILL would fill the hole in the browser where the technology needed to be.”



Polyfills for Other & Older Browsers

(cough cough Chrome 41 cough cough)

“ “



Polyfills for Other & Older

Browsers

hEps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills



Polyfills for Safari & Older

Browsers

hEps://github.com/mathiasbynens/cache-polyfill



Official Safari Support is Coming “Soon”…

hEps://jakearchibald.github.io/isserviceworkerready/



Other Specifics for iOS •  On iOS, Home Screen icons & splash don’t come from App Manifest

•  Specify app attributes with link tags in the <head>:–  Icon: <link rel="apple-touch-icon" href="/custom_icon.png">–  Launch Screen Image: <link rel="apple-touch-startup-image" href="/

launch.png">–  App Name: <meta name="apple-mobile-web-app-title"

content="AppTitle">–  Enable stand-alone mode: <meta name="apple-mobile-web-app-

capable" content="yes">–  Change status bar color: <meta name="apple-mobile-web-app-status-

bar-style" content="black”>•  There’s also a Polyfill for ^this: https://github.com/boyofgreen/manUp.js/



@goutaste

#BrightonSEO


H/2 Push Is Also Better With

Service Workers

Initial Load with H/2 Push:

Repeat Load with all /push assets coming from the SW cache:

MoreoncombiningH/2Push&SWs:hEps://24ways.org/2016/hEp2-server-push-and-service-workers/

BonusSlide:

starter-pack

readingonH/2

pushwith

PWAs

MoreonH/2Push&cachemanagement:hEps://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

Marketing

Introduction to PWAs & New JS Frameworks for Mobile