A sample video-on-demand media Progressive Web App
JavaScript CSS
Latest commit d52487e Feb 23, 2017 @paullewis paullewis committed on GitHub Adds offline.

README.md

Please note: This app is being developed. There may be bugs, and everything is subject to change.

Sample Media (VOD) App

This is a sample media app to demonstrate media functionality in the context of a Progressive Web App. The build of this site is being cataloged on YouTube as part of the Chrome Developers Developer Diary series.

biograf_small

Running the site locally

  1. Clone the repo
  2. cd sample-media-pwa
  3. npm install

Setting up some secrets

Once the entire internet has been cloned into your node_modules folder you'll need to create src/config, into which you will need to place a couple of files: oauth.js and session.js. These are files which contain secrets and keys, so you can either create the appropriate values, or you can put some placeholder info in:

// oauth.js - do not use in production!
// @see https://cloud.google.com/nodejs/getting-started/authenticate-users
module.exports = {
  clientID: 'lolztehclientid',
  clientSecret: 'suchhiddenmanysecretwow',
  callbackURL: 'http://localhost:8080/auth/google/callback',
  accessType: 'offline'
};
// session.js - do not use in production!
// @see https://cloud.google.com/nodejs/getting-started/authenticate-users
module.exports = {
  resave: false,
  saveUninitialized: false,
  secret: 'totallyasecret',
  signed: true,
  memcacheURL: 'localhost:11211'
};

Finally, with that done you should be able to run: npm run dev.

The videos are not included in the repo, but rather are served from a Google Cloud Storage bucket. They are served with CORS headers, meaning that you will need to run the local copy of the server at port 8080.

Misc Notes

  • The app currently does not support iOS. HLS support is coming soon, at which point everything should be fine.
  • The Service Worker is largely inert, so while it's there the app doesn't yet work offline.