Tạo memo app với Progressive Web App và vue.js – Phần 2

Giới thiệu

Trong phần 1, chúng ta đã tìm hiểu, cài đặt vue-cli và tạo ra một Progressive Web App rồi. Trong phần này, chúng ta sẽ ứng dụng thêm indexedDB để lưu trữ dữ liệu offline cho PWA của mình.

IndexedDB

IndexedDB cho phép bạn lưu trữ dữ liệu liên tục trong trình duyệt của người dùng. Nó cho phép bạn tạo các ứng dụng web với khả năng truy vấn phong phú bất kể tính khả dụng của mạng, ứng dụng của bạn có thể hoạt động cả trực tuyến và ngoại tuyến.

Các đặc trưng của IndexedDB:

• Các dữ liệu của IndexedDB được lưu trữ theo dạng key – value.
• Không phải là một cơ sở dữ liệu dạng quan hệ.
• Các API của IndexedDB hầu hết là bất đồng bộ.
• Hỗ trợ truy xuất các dữ liệu có cùng domain.

Sử dụng indexedDB

Mở kết nối

var request = window.indexedDB.open("MyTestDatabase");

MyTestDatabase chính là tên database mà bạn muốn đặt cho database sẽ lưu trên trình duyệt.

Sau đó, chúng ta sẽ thêm các hành động cho request khi thành công và khi bị lỗi:

request.onerror = function(event) {
  // Làm gì đó với request.errorCode!
};
request.onsuccess = function(event) {
  // Làm gì đó với request.result!
};

Thường thì khi mở kết nối thành công (onsuccess), chúng ta sẽ lưu giá trị của database để thực hiện các hành động thêm, sửa, xóa tiếp theo.

var db = null;
request.onsuccess = function(event) {
     db = request.result;
   };

Nếu như là lần đầu kết nối thì chúng ta phải khởi tạo ObjectStore cho database:

request.onupgradeneeded = (event) => {
    db = event.target.result
    db.createObjectStore(collectionName, {
        autoIncrement: true
    });
}

autoIncrement dùng để quyết định các key của dữ liệu tăng dần theo số thứ tự từ 0.

Thêm dữ liệu

Các lệnh đọc, thêm, sửa, xóa đều được thực hiện qua hàm transaction. Để thêm dữ liệu:

db.transaction(collection, "readwrite")
.objectStore(collectionName)
.add(value)

Tham số thứ hai của transaction gồm readonly và readwrite. Readonly là giá trị mặc định và  chỉ cho phép đọc dữ liệu, còn readwrite cho phép thêm, sửa, xóa dữ liệu.

Đọc dữ liệu

var request = db.transaction(collectionName).objectStore(collectionName).get(key)
request.onsuccess = (event) => {
    console.log(`Value is: ${event.target.result}` )
}

Cập nhật dữ liệu

var objectStore = this.db.transaction(collectionName, 'readwrite').objectStore(collectionName)
var request = objectStore.get(key)

request.onsuccess = (event) => {
    var data = event.target.result
    // Cập nhật giá trị mới
    data.someAttr = true
    // Lưu vào database
    objectStore.put(data, key)
 }

Xóa dữ liệu

 db.transaction(collectionName, "readwrite").objectStore(collectionName).delete(key)

Tạo PWA với indexedDB

Ứng dụng indexedDB vào PWA, chúng ta có thể tạo một web app có khả năng sử dụng và lưu trữ offline. Các bạn có thể tham khảo project tại link này: https://github.com/trandiepkhanhtrinh/demo-pwa-indexeddb