Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
components
css
icons
js
.babelrc
README.md
lighthouse-report.png
manifest.json
package.json
serve.js
sw.js
yarn.lock

README.md

Basically, (Really) Progressive Web Apps

Lighthouse Report

This project contains a Progressive Web App (see demo) (PWA from this point on), that:

  • Caches data, and
  • Works offline

Both of these things are pretty much basic prerequisites to call something a PWA. However, this project has some extra bells and whistles that make it really progressive. It:

  • Uses ReactDOM's streaming renderer on the server to provide streaming HTML responses that leverage the browser's streaming HTML parser 🔥
  • Uses its serviceWorker to intercept requests for data and returns more streaming HTML when a request is made. 🔥

This makes the entire application a truly streamed application that delivers data incredibly fast (fastest I've seen).

The Project

The project itself is fairly trivial: it is a simple book search, that queries Google's Public Books API and returns books that you search for. The interesting part is that it returns streams, that are then processed in the client.

The even more interesting part is that if the repsonses are cached, the service worker returns the stream instead, creating a 1-4ms request-response cycle for all of this data. This is pretty cool. 😄

Getting Started

There's a live demo hosted on now that you can check out. If you'd like to run it locally, it's as simple as:

  • git clone git@github.com:TejasQ/basically-streams.git
  • cd basically-streams/examples/streaming-pwa
  • yarn install
  • yarn start

The app will be accessible on http://localhost:3000/

Why?

This is part of my Basically series that seeks to make concepts that could be scary to newer developers accessible and easy to grasp, in order to empower, enable, and inspire developers to create beautiful things all over the internet.

I hope this helped you. :)

Context

This project is but a small part of a larger project called Basically, Streams. If this interests you, be sure to check out the other examples and documentation! 😄

PS:

The 2 points I lost on the Lighthouse Report above are because the CSS and JS are large and well documented. A trade-off I am happy to make. Go check out the source code!