Introduction to PWAs & New JS Frameworks for Mobile

#BrightonSEO @goutaste
Emily Grossman
MobileMoxie
Introduc:on to PWAs and JavaScript Frameworks
@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 Works Oﬄine Push No:ﬁca:ons

Responsive Secure Fast
Downloadable Works Oﬄine Push No:ﬁca: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
(Someone else made this illustra:on, and I photographed it. Now I cannot remember who. SORRY.)

Why Do People Like PWAs?
Mobile sales increased by 18% YoY
43% increase in sessions/ user
100% increase in session dura:on 80% improvement in load :me
30% higher Conversion Rate than
na:ve app in Tier 3 ci:es
20% of PWA bookings are from
users who’d uninstalled na:ve app
Homepage loads completely in .8
seconds
Customer acquisi:on cost is 10X less Shoppers spend 20% more ?me
than on previous mobile site
40% lower bounce rate than on
previous mobile site
hEps://www.pwastats.com/

THIS JUST IN

Basic
Technical
Reqs

1. App Manifest
hEp://bit.ly/webapp-manifest
Chrome Dev ToolsViewJSON ﬁle you link to in your <head>

2. Service Worker
Web App Network
Cache
Service Worker
Get /hero.png
I borrowed this analogy from @jeﬀposnick

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
Preact CLI
@addyosmani Watch Addy Intro these: hEps://youtu.be/aCMbSyngXB4

3 PWA Optimizations to Discuss Today:
1. Speed & Performance
2. Measurement
3. Suppor7ng Older/ Other Browsers

1. Speed & Performance 3. Browser Support
Source: @lukew

@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

@addyosmani
“The bloat of your baseline defines how
much headroom you have for app code”
@addyosmani hEp://bit.ly/pwas-the-new-normal

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

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'
]
);
})
);
});
Set UpYour Service Worker to
Cache Essential Assets
On Service Worker Install Event…
hEp://bit.ly/sw-caching

Set UpYour 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 ofﬂine” button)
hEp://bit.ly/sw-caching

But That Doesn’t MeanYou Are
Done & Can Ignore Performance

Optimize for Fast First Paint
Pre-load is like saying, “Hey, browser! Here’s a resource you’re going to need later on, so start loading it now.”
•  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

bit.ly/rel-preload-demo
VIDEO: bit.ly/rel-preload-demo

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
Simulated Slow Network hEps://youtu.be/6Ljq-Jn-EgU
VIDEO: hEps://youtu.be/6Ljq-Jn-EgU

TTI has a
high
correlation
with
conversion
rates
bit.ly/google-measure-performance

Optimize for TTI: Codesplitting
READ THIS TO START: hEps://survivejs.com/webpack/building/code-spliing/

Subjective
Performance
How do we make waits feel faster?

For 2 Sec+ Waits: Progress Bars
Chris Harrison, ZhiquanYeo, Scott E. Hudson
Carnegie Mellon
hEp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
Progress bars with backwards
decelerating bands feel
12% faster

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

Predictive Preloading**unfortunately a desktop-only trick
hEps://github.com/SamKnows/futurelink hEps://github.com/SamKnows/vue-futurelink
Optimize for Next Page Load

Predictive Preloading**unfortunately a desktop-only trick
hEps://blog.samknows.com/intelligent-page-preloading-with-futurelink-c1de25449dee
VIDEO: see link below

“React As Soon As User Indicates Intent”
Cut Down on Click Latency
Experiment by Eli Fitch: Track your reac7on 7me on ‘mousedown’ vs. ‘click ’ hNp://bit.ly/eli-ﬁtch-ﬂuent
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`);
}

“Mousedown gives you a
100 – 150ms head start”-Eli Fitch
hEp://bit.ly/eli-ﬁtch-ﬂuent

“For touch screens,
begin on touchstart &
cancel on touchmove”
-Eli Fitch
hEp://bit.ly/eli-ﬁtch-ﬂuent

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-oﬄine
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. Browser Support

What is
a
Polyfill?

“POLY meaning it could be solved
using any number of techniques…
and FILL would ﬁll 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-Polyﬁlls

Polyfills
for Safari
& Older
Browsers
hEps://github.com/mathiasbynens/cache-polyﬁll

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 Polyﬁll 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:
More on combining H/2 Push & SWs: hEps://24ways.org/2016/hEp2-server-push-and-service-workers/
Bonus Slide:
starter-pack
reading on H/2
push with
PWAs
More on H/2 Push & cache management: hEps://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

Introduction to PWAs & New JS Frameworks for Mobile

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduction to PWAs & New JS Frameworks for Mobile

Similar to Introduction to PWAs & New JS Frameworks for Mobile (20)

More from MobileMoxie

More from MobileMoxie (20)

Recently uploaded

Recently uploaded (20)

Introduction to PWAs & New JS Frameworks for Mobile