Offline-First trong Modern Web

Lưu ý (2025): Bài viết này được viết vào năm 2016, nhưng các khái niệm về offline-first vẫn còn rất có giá trị trong thời đại PWAs (Progressive Web Apps) ngày nay. Service Workers và IndexedDB đã trở thành tiêu chuẩn trong phát triển web hiện đại. Một số công cụ và liên kết trong bài có thể đã lỗi thời hoặc ngừng hoạt động.

"Web" và "Online" là gần như là 2 khái niệm đi liền với nhau. Nhưng gần đây xu thế mới trong thế giới web còn tồn tại 1 khái niệm nữa là công nghệ web offline, offline-first.

Các công nghệ mà W3C hỗ trợ

1. Offline Web Applications - Hỗ trợ nhiều chức năng giúp tăng trải nghiệm offline (SQL Client, các hàm sự kiện offline/online, localStorage API). Các chức năng mới trong HTML5 giúp xây dựng các trang web có thể hoạt động hoàn toàn Offline.
2. Service Workers - hỗ trợ mở rộng các tác vụ chạy dưới nền, cái này giúp cho web offline giống như một ứng dụng truyền thống. Đây là tiêu chuẩn hiện tại cho offline-first apps và PWAs.
3. IndexedDB - cung cấp các API, giúp lưu đối tượng dữ liệu Offline, dạng key-value và đánh chỉ mục chúng, tổ chức dữ liệu theo kiểu B-tree.
4. WebStorage - lưu trữ dữ liệu đơn giản dạng key-value.

Công cụ

• react-boilerplate: Quick setup for performance orientated, offline-first React.js applications.
• Haywire: A minimal javascript library for network issues detection.
• sw-toolbox: A collection of tools for service workers.
• UpUp: An Offline First library designed to be the easiest way to add offline capabilities to a site.
• simple-serviceworker-tutorial: A really simple ServiceWorker example, designed to be an interactive introduction to ServiceWorker.
• Hyperboot: Offline webapp bootloader.
• MakeDrive: A cloud-based Dropbox® equivalent for browser filesystems. [DISCONTINUED - Mozilla Webmaker project was archived]
• ApplicationCache: HTML5 provides an application caching mechanism that lets web-based applications run offline. [DEPRECATED - Use Service Workers instead]
• IndexedDB: IndexedDB is an API for client-side storage of significant amounts of structured data and for high performance searches on this data using indexes.
• ServiceWorkers: A Service Worker acts like a proxy on the client. For page requests and requests made by pages, you get a fetch event that you can respond to yourself, creating offline experiences.
• localForage: Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
• remoteStorage: remoteStorage enabled apps automatically sync your data across all of your devices, from desktop to tablet to smartphone, and even your TV.
• pouchdb: PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.
• Offline.js: An awesome JavaScript library to improve the experience of your app when your users lose connection.
• Hoodie: Hoodie is an Offline First and noBackend architecture for frontend-only web apps on the web and on iOS.
• Offline States: What show applications when we have not internet connection.

Sách

• Offline First: The book (draft) (by John Allsopp)
• Pro HTML5 Programming - Chapter 12: Creating HTML5 Offline Web Applications (by Peter Lubbers, Brian Albers and Frank Salim)

Sản phẩm sử dụng công nghệ Web Offline

• Minutes.io: Awesome offline first minute taking app built with Hoodie.
• Swarm+React TodoMVC: Awesome offline implementation of TodoMVC with real-time sync.
• 2048: The original 2048 is a great game to pin to your homescreen.
• hospitalrun.io: Open source software for developing world hospitals.
• pokedex.org: An index of Pokémon, built as a client-side JavaScript webapp. Powered by ServiceWorker, PouchDB, virtual-dom, and web workers.