Offline-First trong Modern Web
Note: This post is over 9 years old. The information may be outdated.
"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ợ
- 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.
- 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.
- 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.
- 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
- 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.