podcast

S01E02 - Progressive Web Apps

by ✨ Kevin B. Ridgway ✨

Progressive Web Apps

Progressive Web apps, how we got here, and how to get started.

Going to talk a little about the history of JavaScript applications, and how we got here, and what tools you can use today to start developing Progressive Web Apps.

These applications are accessed via a web browser like other websites, but offer more dynamic interactions resembling native mobile and desktop apps.

  • Speed, time to interaction on the page. Twitter Lite, for example, is interactive in under 5 seconds over 3G on most devices. Most of the world is using 2G or 3G networks; a fast initial experience is essential.
  • Supports notifications
  • Desktop or native mobile app like experience in the browser
  • Responsive web design so appears like an app for any screens size

From a technical standpoint that means:

  • renders in the browser, and responds like more native apps
  • Served from a CDN (content delivery network), static content, and the shell of the application is cached
  • You can have your site work offline, and have background sync, and push notifications
  • The IndexDB API
  • Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.
  • with web notification API, can notify users like native apps
  • usually client-side routing, so there isn’t entire page reloads
  • obviously async JavaScript requests (AJAX) for loading data without reloading a page

The immediacy of a desktop application and the portability and accessibility of a website.

Fear, Uncertainty, and Doubt

Before 2015:

  • Analytics libraries like Google Analytics required entire page loads to work properly.
    • Between 2009 to 2015, Google Webmaster Central proposed and then recommended an “AJAX crawling scheme” using an initial exclamation mark in fragment identifiers for stateful AJAX pages (#!).

Post 2015:

  • In 2 015, Google deprecated their hash-bang AJAX crawling proposal.
  • don’t believe the hype which I will link to in the show notes
  • That method is officially deprecated. See link in the show notes.

As of 2015 hash-bang urls as they were called, or fragment urls, are out, you don’t need to do this, or use phantomjs to render the site for you at all. You can even use Google Search Console (Used to be called google webmaster tools) to preview how Google would see your site whether it’s a Single Page App or not.

SPAs in 2017

  • It’s really a new term that is coming to the forefront, and more web technologies being considered part of this new term. Mostly being pushed by Google.
  • Let’s talk about the initial checklist
    • same thing, rebranded by Google: https://developers.google.com/web/progressive-web-apps/checklist
      • Site is served over HTTPS
      • Pages are responsive
      • The start URL (at least) loads while offline (using service worker)
      • Metadata provided for ‘Add to home screen’
      • First load fast even on 3G
        • https://developers.google.com/web/fundamentals/performance/prpl-pattern/
        • PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. Addy Osmani from Google is spear-heading this pattern, and is looking for feedback.
          • It stands for:
            • Push critical resources for the initial URL route.
            • Render initial route.
            • Pre-cache remaining routes.
            • Lazy-load and create remaining routes on demand.
      • Site works cross browser
      • Page transition don’t feel like they block on network
      • Each page has an URL
    • Exemplary Progressive Web App Checklist
      • Site’s content is index by Google
      • Schema.org metadata is provided when appropriate
      • canonical urls are provided when necessary
      • Pages use the History API; don’t use page fragments (#! hash bangs anymore)
    • User experience: content doesn’t jump when page loads for example
    • Performance: loads very fast on 3G
    • Caching: site uses cache-first networking
    • Push notifications: not being aggressive
    • Additional features: credential management API, Payment Request API

How do I dive in, and get started with PWAs? Start with https://github.com/developit/preact-cli

  • 100/100 Lighthouse score, right out of the box (proof)
  • Fully automatic code splitting for routes
  • Transparently code-split any component with an async! prefix
  • Auto-generated Service Workers for offline caching powered by sw-precache
  • PRPL pattern support for efficient loading
  • Zero-configuration pre-rendering / server-side rendering hydration
  • Support for CSS Modules, LESS & autoprefixer
  • Monitor your bundle/chunk sizes with built-in tracking
  • Automatic app mounting, debug helpers & Hot Module Replacement
  • In just 4.5kb you get a productive environment: preact, preact-router
  • 1.5kb of conditionally-loaded polyfills for fetch & Promise

Go try this out, it’s an npm install away. Then 4 commands to start playing with a Progressive Web App.

Keep Rising, Keep getting better at your craft. See you next time.

—

Resources

You should follow @theriseoffee on Twitter.
Download MP3 (15.9MB)