Creating websites for users with low-bandwidth

Questions

• 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

• 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

• [1] 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.