Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[this.javascript] State of Chrome

[this.javascript] State of Chrome

The rest of the presentation that I didn't get too :)

Paul Kinlan

November 14, 2017
Tweet

More Decks by Paul Kinlan

Other Decks in Programming

Transcript

  1. Paul Kinlan
    @paul_kinlan

    View Slide

  2. View Slide

  3. View Slide

  4. 97%
    150%
    Increase in engagement for
    Add to Home Screen users
    Overall increase in 

    conversions

    View Slide

  5. View Slide

  6. Firefox Chrome
    Opera Samsung Internet
    UC Browser 360 Browser
    Baidu Mobile App
    Service Worker Support

    View Slide

  7. Service Worker Support
    Edge
    WebKit
    In Development!

    View Slide

  8. developers.google.com/web/tools/workbox

    View Slide

  9. self.addEventListener('fetch', event => {

    event.respondWith(

    caches.open('my-cache').then(cache => {

    return cache.match(event.request).then(cacheResponse => {

    const fetchPromise = fetch(event.request).then(response => {

    cache.put(event.request, response.clone());

    return response;

    })

    return cacheResponse || fetchPromise;

    });

    })

    );

    });

    View Slide

  10. workboxSW.strategies.staleWhileRevalidate();

    View Slide

  11. 5s

    View Slide

  12. View Slide

  13. % of Pages Loaded via HTTPS in Chrome
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    March 2015 October 2017
    Android
    Windows

    View Slide

  14. View Slide

  15. Autofill

    View Slide

  16. PaymentRequest

    View Slide

  17. View Slide

  18. &
    Google Payment API
    developers.google.com/payment
    PaymentRequest

    View Slide

  19. One-Tap
    Sign-In
    Sign-Up &
    developers.google.com/identity

    View Slide

  20. View Slide

  21. View Slide

  22. Image Gallery

    View Slide

  23. MediaStream

    View Slide

  24. View Slide

  25. Web Share API

    View Slide

  26. Native notifications

    View Slide

  27. Connected across devices
    Presentation API

    View Slide

  28. Connected across devices
    BLE API

    View Slide

  29. View Slide

  30. Web Share
    Web Bluetooth
    Add to Home screen
    Background Download
    Web Authentication
    Shape Detection
    Web USB
    Presentation API
    Generic Sensor API
    Payment Handler
    Web NFC
    Share Target

    View Slide

  31. View Slide

  32. Custom Tabs

    View Slide

  33. Trusted 

    Web Activity

    View Slide

  34. View Slide

  35. Trusted 

    Web Activity

    View Slide

  36. Trusted 

    Web Activity

    View Slide

  37. Desktop PWA

    View Slide

  38. View Slide

  39. View Slide

  40. 22%
    Faster on Speedometer
    5%
    Faster on top 25 websites
    40%
    Faster on ARES6

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. CSS Grid Layout Inspection

    View Slide

  47. Color contrast evaluation

    View Slide

  48. Top-level await in console

    View Slide

  49. Performance monitor

    View Slide

  50. Service Workers upgrades

    View Slide

  51. Lighthouse

    View Slide

  52. View Slide

  53. github.com/GoogleChrome/puppeteer

    View Slide

  54. View Slide

  55. Chrome User Experience Report

    View Slide

  56. View Slide

  57. chromestatus.com

    View Slide

  58. developers.google.com/web/

    View Slide

  59. Thanks!
    Paul Kinlan
    @paul_kinlan

    View Slide