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.