Talks on Progressive Web Apps from Google I/O ’17

Today I watched four excellent talks on progressive web apps (PWAs for short). Below are my notes with the most interesting points of each video.

A common theme is performance optimization: PWAs can challenge native apps only if they are fast and reliable enough.

Production Progressive Web Apps With JavaScript Frameworks (40 minutes)

  • Choosing a good framework is important because on desktop it is often several times faster to parse and run JS code than on mobile. Good frameworks for mobile PWAs are Polymer, Preact, Vue.JS, Svelte JS.
  • There’s a lack of demo apps that showcase the best practices for PWAs. A possible successor of ToDoMVC: HNPWA (Hacker News readers as Progressive Web Apps).
  • React: a million npm downloads a week
  • Optimizing for First Paint and First Interactive
  • Twitter Lite rewrote as a PWA (interactive in less then 5s on 3G),
  • PRPL pattern (devised by the Polymer team)
    • P: Push / Preload, R: Render, P: Precache, L: Lazy-load
    • only load what you need for the current view
  • Data Saving Mode in Twitter Lite: show blurred images until they are tapped
  • Performance optimization: save CPU time by preventing unnecessary updates, Service Worker, lazy loading, code splits, chunks
  • Techniques used by Treebo, Housing.com, Forbes
  • Showcasing WPAs built with Vue.JS

Progressive Web Apps: Great Experiences Everywhere (30 minutes)

  • The web is the biggest platform in the world (5 billion devices are connected)
    • Mobile websites vs. PWAs
  • Web apps become more widespread because native-like features got available in browsers (e.g. push notifications), and performance plus reliability got better
  • PWAs by Forbes, Lyft, Financial Times
  • “The goal is not to get users install your app, the goal is to get users use your service.”
  • Install prompts (add to home screen)
  • New APIs to build better web apps (Web Share, Image Capture, Shape Detection)

Great Progressive Web App Experiences with Angular (40 minutes)

  • “Angular is a platform that makes it easy to build applications with the web.”
    • Platform and not just a framework because they are focusing on the entire developer experience from start to finish
  • Angular CLI (scaffolding, generating new components, live saving, build, shipment, testing)
  • Server Push: sending additional files with the response (better load time)
  • Delivery methods: online, installed app (with Ionic or NativeScript), desktop (Electron)
  • PWAs are more reliable (less dependence on network connection), more performant (faster load time, more responsive), more engaging (notifications)
  • Angular apps as WPAs by default: making tools that enable developers to build PWAs easily with Angular
  • Service worker, route-awareness, dynamically cached content, app shells, HTTP2 push, push notifications
  • Demonstrating the capabilities of Angular through a demo application (NgStore)
  • Be careful about caching data (what to cache, when it expires)

Creating UX that “Just Feels Right” with Progressive Web Apps (35 minutes)

  • A very large audience could be reached through the web (Chrome has 2 billion monthly active users, 5 billion devices with a web browser)
  • Why some sites feel slow or hard to use
    • Sites aren’t reactive (a link is tapped but no indication is shown)
    • Sites aren’t predictable (no consistent UX)
  • Perceived performance (how users experience performance) is what matters
    • “Human perception of time is fluid, and can be manipulated in purposeful and productive ways.”
  • Infinite lists vs. virtualized lists
  • Native Android UI on the web: Polymer Elements, Material UI for React, Material Components for Web
  • Load performance improvement: PRPL pattern, service worker caching, server side rendering
  • Fonts for performance: use device fonts, consider using an image or an svg, use custom fonts on subsequent loads
  • Tools for analyzing performance:
  • Navigation: gestures, hamburger menu vs. bottom menu
  • Stable load: the size of the images and dynamic elements are predetermined so the browser knows how to layout everything even before they are downloaded
  • 200+ new APIs for the web
Advertisements