Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#BrightonSEO	@goutaste	
Emily Grossman
MobileMoxie	
Introduc:on	to	PWAs	and	JavaScript	Frameworks
@goutaste		
hEp://www.sl...
#BrightonSEO	@goutaste	
JavaScript enabled the web to create
full, interactive applications… mostly
#BrightonSEO	@goutaste	
Some of the “native app” features
were still lacking
Responsive	 Secure	 Fast	
Downloadable	 Works...
#BrightonSEO	@goutaste	
Responsive	 Secure	 Fast	
Downloadable	 Works	Offline	 Push	No:fica:ons	
Progressive Web Apps (PWAs)
...
#BrightonSEO	@goutaste	
The App-Like Web:
Progressive Web Apps
@suzzicks	 bit.ly/cindy-mozcon-2016
#BrightonSEO	@goutaste	
Offline in
Action
#BrightonSEO	@goutaste	
PWAs = Death to the Dino
(Someone	else	made	this	illustra:on,	and	I	photographed	it.	Now	I	cannot	...
#BrightonSEO	@goutaste	
Why Do People Like PWAs?
Mobile	sales	increased	by	18%	YoY	
43%	increase	in	sessions/	user	
100%	i...
#BrightonSEO	@goutaste	
THIS JUST IN
#BrightonSEO	@goutaste	
Basic
Technical
Reqs
#BrightonSEO	@goutaste	
1. App Manifest
hEp://bit.ly/webapp-manifest	
Chrome Dev ToolsViewJSON file you link to in your <he...
#BrightonSEO	@goutaste	
2. Service Worker
Web	App	 Network	
Cache	
Service	Worker	
Get	/hero.png	
I	borrowed	this	analogy	...
#BrightonSEO	@goutaste	
2. Service Worker
Web	App	 Network	
Cache	
Service	Worker	
Get	/hero.png	
I	borrowed	this	analogy	...
#BrightonSEO	@goutaste	
2. Service Worker
Web	App	 Network	
Cache	
Service	Worker	
Get	/hero.png	
I	borrowed	this	analogy	...
#BrightonSEO	@goutaste	
2. Service Worker
Web	App	 Network	
Cache	
Service	Worker	
Get	/hero.png	
I	borrowed	this	analogy	...
#BrightonSEO	@goutaste	
3. https Mobile Friendly Website
#BrightonSEO	@goutaste
#BrightonSEO	@goutaste	
You don’t need a JS framework
#BrightonSEO	@goutaste	
But many web apps are easier to build
if you do use one.
#BrightonSEO	@goutaste	
And some frameworks are easier to
make “PWA ready” than others
#BrightonSEO	@goutaste	
Meet the Vue, Preact, React
CLIs
Preact	CLI	
@addyosmani	 Watch	Addy	Intro	these:	hEps://youtu.be/...
#BrightonSEO	@goutaste	
3 PWA Optimizations to Discuss Today:
1.	Speed	&	Performance	
2.	Measurement	
3.	Suppor7ng	Older/	...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 3.	Browser	Support	
Source:	@lukew
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
@addyosmani	
“The bloat of your baseline defines how
much headroom you hav...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
@addyosmani	
“The bloat of your baseline defines how
much headroom you hav...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
@addyosmani	
How much is taken up by your framework?
@addyosmani	 hEp://bi...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
@addyosmani	
“The bloat of your baseline defines how
much headroom you hav...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Service
Workers
Can Speed
Up Sites
on Repeat
Views
#BrightonSEO	@goutaste	
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(fu...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Set UpYour Service Worker to
Cache Essential Assets
document.querySelector...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
But That Doesn’t MeanYou Are
Done & Can Ignore Performance
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Optimize for Fast First Paint
Pre-load	is	like	saying,	“Hey,	browser!	Here...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
bit.ly/rel-preload-demo	
VIDEO: bit.ly/rel-preload-demo
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
But I’m Doing SSR &
My First Paint Times
Are ROCKING
“ “
- Someone in the ...
#BrightonSEO	@goutaste	
One of the
Issues With
Server-Side
Rendering is
The Trade-
Off With
Time to
Interactive
Simulated	...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
TTI has a
high
correlation
with
conversion
rates
bit.ly/google-measure-per...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Optimize for TTI: Codesplitting
READ	THIS	TO	START:	hEps://survivejs.com/w...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Subjective
Performance
How do we make waits feel faster?
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
For 2 Sec+ Waits: Progress Bars
Chris Harrison, ZhiquanYeo, Scott E. Hudso...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Progress Bars
hEp://www.chrisharrison.net/projects/progressbars2/ProgressB...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Predictive Preloading**unfortunately a desktop-only trick
hEps://github.co...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
Predictive Preloading**unfortunately a desktop-only trick
hEps://blog.samk...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
“React As Soon As User Indicates Intent”
Cut Down on Click Latency
Experim...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
“React As Soon As User Indicates Intent”
Cut Down on Click Latency
“Moused...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	
“React As Soon As User Indicates Intent”
Cut Down on Click Latency
“For to...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	
Measuring “Installs”
from the Chrome
PWA Install Banner
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	
Measuring “Installs”
window.addEventListener('beforeinstal...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	
Measuring
“Launches”
Add a tracking
parameter to your
“sta...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	
bit.ly/track-offline	
How Do You Record Offline “Traffic”?
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	
Measuring Push Notifications
bit.ly/GA-push-tracking
#BrightonSEO	@goutaste	
3. Supporting Old &
Other Browsers
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
What is
a
Polyfill?
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
“POLY meaning it could be solved
using...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
Polyfills for Other & Older
Browsers
(...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
Polyfills
for Other
& Older
Browsers
h...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
Polyfills
for Safari
& Older
Browsers
...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
Official Safari Support is Coming “Soo...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
Other Specifics for iOS
•  On iOS, Hom...
#BrightonSEO	@goutaste	
1.	Speed	&	Performance	 2.	Measurement	 3.	Browser	Support	
@goutaste	
#BrightonSEO
#BrightonSEO	@goutaste	
H/2 Push
Is Also
Better
With
Service
Workers
Initial Load with H/2 Push:
Repeat Load with all /pus...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Scary SERPs (and keyword creep) #brightonSEO
Next
Upcoming SlideShare
Scary SERPs (and keyword creep) #brightonSEO
Next
Download to read offline and view in fullscreen.

Share

Introduction to PWAs & New JS Frameworks for Mobile

Download to read offline

Emily Grossman's talk about PWAs from BrightonSEO September 2017

Video slides have been replaced by a screenshot with links to the videos or their original sources.

Related Books

Free with a 30 day trial from Scribd

See all

Introduction to PWAs & New JS Frameworks for Mobile

  1. 1. #BrightonSEO @goutaste Emily Grossman MobileMoxie Introduc:on to PWAs and JavaScript Frameworks @goutaste hEp://www.slideshare.net/mobilemoxie
  2. 2. #BrightonSEO @goutaste JavaScript enabled the web to create full, interactive applications… mostly
  3. 3. #BrightonSEO @goutaste Some of the “native app” features were still lacking Responsive Secure Fast Downloadable Works Offline Push No:fica:ons
  4. 4. #BrightonSEO @goutaste Responsive Secure Fast Downloadable Works Offline Push No:fica:ons Progressive Web Apps (PWAs) Change This
  5. 5. #BrightonSEO @goutaste The App-Like Web: Progressive Web Apps @suzzicks bit.ly/cindy-mozcon-2016
  6. 6. #BrightonSEO @goutaste Offline in Action
  7. 7. #BrightonSEO @goutaste PWAs = Death to the Dino (Someone else made this illustra:on, and I photographed it. Now I cannot remember who. SORRY.)
  8. 8. #BrightonSEO @goutaste 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/
  9. 9. #BrightonSEO @goutaste THIS JUST IN
  10. 10. #BrightonSEO @goutaste Basic Technical Reqs
  11. 11. #BrightonSEO @goutaste 1. App Manifest hEp://bit.ly/webapp-manifest Chrome Dev ToolsViewJSON file you link to in your <head>
  12. 12. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  13. 13. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  14. 14. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  15. 15. #BrightonSEO @goutaste 2. Service Worker Web App Network Cache Service Worker Get /hero.png I borrowed this analogy from @jeffposnick
  16. 16. #BrightonSEO @goutaste 3. https Mobile Friendly Website
  17. 17. #BrightonSEO @goutaste
  18. 18. #BrightonSEO @goutaste You don’t need a JS framework
  19. 19. #BrightonSEO @goutaste But many web apps are easier to build if you do use one.
  20. 20. #BrightonSEO @goutaste And some frameworks are easier to make “PWA ready” than others
  21. 21. #BrightonSEO @goutaste Meet the Vue, Preact, React CLIs Preact CLI @addyosmani Watch Addy Intro these: hEps://youtu.be/aCMbSyngXB4
  22. 22. #BrightonSEO @goutaste 3 PWA Optimizations to Discuss Today: 1. Speed & Performance 2. Measurement 3. Suppor7ng Older/ Other Browsers
  23. 23. #BrightonSEO @goutaste 1. Speed & Performance 3. Browser Support Source: @lukew
  24. 24. #BrightonSEO @goutaste 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
  25. 25. #BrightonSEO @goutaste 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? @addyosmani hEp://bit.ly/pwas-the-new-normal
  26. 26. #BrightonSEO @goutaste 1. Speed & Performance @addyosmani How much is taken up by your framework? @addyosmani hEp://bit.ly/pwas-the-new-normal
  27. 27. #BrightonSEO @goutaste 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? @addyosmani hEp://bit.ly/pwas-the-new-normal
  28. 28. #BrightonSEO @goutaste 1. Speed & Performance Service Workers Can Speed Up Sites on Repeat Views
  29. 29. #BrightonSEO @goutaste 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 UpYour Service Worker to Cache Essential Assets On Service Worker Install Event… hEp://bit.ly/sw-caching
  30. 30. #BrightonSEO @goutaste 1. Speed & Performance 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 offline” button) hEp://bit.ly/sw-caching
  31. 31. #BrightonSEO @goutaste 1. Speed & Performance But That Doesn’t MeanYou Are Done & Can Ignore Performance
  32. 32. #BrightonSEO @goutaste 1. Speed & 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
  33. 33. #BrightonSEO @goutaste 1. Speed & Performance bit.ly/rel-preload-demo VIDEO: bit.ly/rel-preload-demo
  34. 34. #BrightonSEO @goutaste 1. Speed & Performance But I’m Doing SSR & My First Paint Times Are ROCKING “ “ - Someone in the audience
  35. 35. #BrightonSEO @goutaste 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
  36. 36. #BrightonSEO @goutaste 1. Speed & Performance TTI has a high correlation with conversion rates bit.ly/google-measure-performance
  37. 37. #BrightonSEO @goutaste 1. Speed & Performance Optimize for TTI: Codesplitting READ THIS TO START: hEps://survivejs.com/webpack/building/code-spliing/
  38. 38. #BrightonSEO @goutaste 1. Speed & Performance Subjective Performance How do we make waits feel faster?
  39. 39. #BrightonSEO @goutaste 1. Speed & Performance 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
  40. 40. #BrightonSEO @goutaste 1. Speed & Performance Progress Bars hEp://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
  41. 41. #BrightonSEO @goutaste 1. Speed & Performance Predictive Preloading**unfortunately a desktop-only trick hEps://github.com/SamKnows/futurelink hEps://github.com/SamKnows/vue-futurelink Optimize for Next Page Load
  42. 42. #BrightonSEO @goutaste 1. Speed & Performance Predictive Preloading**unfortunately a desktop-only trick hEps://blog.samknows.com/intelligent-page-preloading-with-futurelink-c1de25449dee VIDEO: see link below
  43. 43. #BrightonSEO @goutaste 1. Speed & Performance “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-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`); }
  44. 44. #BrightonSEO @goutaste 1. Speed & Performance “React As Soon As User Indicates Intent” Cut Down on Click Latency “Mousedown gives you a 100 – 150ms head start”-Eli Fitch hEp://bit.ly/eli-fitch-fluent
  45. 45. #BrightonSEO @goutaste 1. Speed & Performance “React As Soon As User Indicates Intent” Cut Down on Click Latency “For touch screens, begin on touchstart & cancel on touchmove” -Eli Fitch hEp://bit.ly/eli-fitch-fluent
  46. 46. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement
  47. 47. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Installs” from the Chrome PWA Install Banner
  48. 48. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 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'); } }); });
  49. 49. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring “Launches” Add a tracking parameter to your “start_url” in the App Manifest
  50. 50. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement bit.ly/track-offline How Do You Record Offline “Traffic”?
  51. 51. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement Measuring Push Notifications bit.ly/GA-push-tracking
  52. 52. #BrightonSEO @goutaste 3. Supporting Old & Other Browsers 1. Speed & Performance 2. Measurement 3. Browser Support
  53. 53. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support
  54. 54. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support What is a Polyfill?
  55. 55. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support “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.”
  56. 56. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Other & Older Browsers (cough cough Chrome 41 cough cough) “ “
  57. 57. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Other & Older Browsers hEps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  58. 58. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Polyfills for Safari & Older Browsers hEps://github.com/mathiasbynens/cache-polyfill
  59. 59. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support Official Safari Support is Coming “Soon”… hEps://jakearchibald.github.io/isserviceworkerready/
  60. 60. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support 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/
  61. 61. #BrightonSEO @goutaste 1. Speed & Performance 2. Measurement 3. Browser Support @goutaste #BrightonSEO
  62. 62. #BrightonSEO @goutaste 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/
  • AlejandroAlonsoNieto

    Jan. 14, 2019
  • josealbertogarciasicilia

    Jun. 18, 2018
  • DanielVarberg

    Apr. 11, 2018
  • JesseWayneBrown

    Apr. 5, 2018
  • KemalTulum1

    Sep. 29, 2017
  • MontserratCano

    Sep. 24, 2017
  • ZeynepTaanUursoy

    Sep. 21, 2017
  • NachoMascortSEOSpeci

    Sep. 19, 2017
  • FabianoBonomini1

    Sep. 16, 2017

Emily Grossman's talk about PWAs from BrightonSEO September 2017 Video slides have been replaced by a screenshot with links to the videos or their original sources.

Views

Total views

20,690

On Slideshare

0

From embeds

0

Number of embeds

16,294

Actions

Downloads

49

Shares

0

Comments

0

Likes

9

×