What is offline first and why does it matter?
As more and more users access web applications via wifi and cellular networks permanent connectivity becomes less certain. As a result travel, bad connections, or time spent in rural areas can often cause intermittent or absent connectivity. Thus, although the web offers a unique platform for collaboration and making data available to multiple devices, it also suffers from usability in some contexts.
Offline First represents a mentality toward building applications that continue to work seamlessly in an offline environment. In order to achieve this goal in modern browsers, offline first applications must consider:
- Caching Files in the Browser (e.g., css, js, and view files)
- Browser Centric Data Storage and Retrieval (i.e., IndexedDB)
- Browser Centric Languages (e.g., javascript instead of PHP)
Caching Files in the Browser
In order for a web application to do anything offline the browser must have access to the relevant code for displaying views and interacting with the application. One option would be to create a downloadable application built in iOS, node.js, or android. But these languages are often not as familiar to web developers and in some cases are platform specific.
Alternatively, we could use the manifest appcache available in modern browsers. Although somewhat tedious, this method allows developers to build a native web application and inform the browser about what files should be cached for offline usage.
CACHE MANIFEST
# 2014-12-24:v6
# Explicitly cached 'master entries'.
CACHE:
/index.php
/offline.js
/offline.css
# Resources that require the user to be online.
NETWORK:
*
FALLBACK: