Offline-First trong Modern Web

"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.
  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. Designed for use with Mozilla Webmaker tools and services. See the Mozilla MakeDrive Wiki page for background info.
  • ApplicationCache: HTML5 provides an application caching mechanism that lets web-based applications run offline.
  • 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

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.
WebWebOffline