Creating websites for users with low-bandwidth

From DevSummit
Jump to navigation Jump to search


  • Inspired by Google’s progressive web app standards
    • Provides on promise of html 5 and having an app experience on the browser
    • Making app smaller
    • New technologies that can load and hold a webpage the internet is down
    • Looking at how couch db can sync data between browser and server
  • Amnesty International - Using Google satellite images to see if villages were destroyed. Could not cache the maps to work offline due to proprietary data.
  • How to decide what proprietary hosted tools to use in your applications that will not impact performance. For example embedded fonts hosted by Google get blocked in China
  • Old trend was to bundle into one file for less connections but trend is moving toward using cached CDNs for standard libraries such as jquery.
  • Use of cloud flare to help users that are in other countries access the content
  • Using source set for mobile responsive images
  • Make low res version for a pdf for audience in low bandwidth environment
  • Google AMP (Accelerated Mobile Pages) – special html and js that is hosted on Google cached networks across the web. More limited functionality and hosted by google

Offline data

  • Need for data collection for user that are in the field for collection of data in the field where there is not consistent power or internet access.
  • Open Data Kits (ODK) – mobile data collection platform designed to solve this problem
  • In proof on concept – Service workers is part of the browser API (in most modern browsers) can specify what to do whit request that are made with no
  • CouchDB can interact with PouchDB in the web app and can sync the data by mirroring the database in the browser and runs a queue to CouchDB. Can manage conflicts. CouchDB is a no sql store and can be imported into other databases for production use

Progressive web app checklist

Progressive Web App Checklist

  • Run website over https
  • Make design responsive
    • Provide a manifest json file and a service worker to have the app work offline
    • Service worker gets the assets for other pages but does not block first rendering
    • Provide metadata to save the app to home screen on chrome/android
  • First load need to be fast on 3g network
  • There is a general problem with benchmarking 3g load speeds
  • Page transitions do not feel like the block on page translations
    • Start to feel like you are on the page and do not feel like you are waiting
    • Dinosaur game on chrome J , read a poem, slack load page
  • Each page has a url
    • Interesting how web pack can give you all the assets you need for each route
  • Lighthouse is in chrome browser and will audit your site to see how well your website is performing

Extra Best Practices

  • indexing
  • Facebook Graph
  • Indexable by search engines
  • Use of conical URLs
  • HTML 5 standard has an online/offline flag. In js you can subscribe to an online/offline flag
  • Lots of js frameworks that can support this.
  • Webpack can do generate json manifest
  • Next JS - who are packaging react to see how to bundle progressive web apps automatically with less decencies and better routing. Flux can be a good pattern for dealing with offline data. You can make redux work with a service worker.