Hầu hết mọi khía cạnh trong quá trình phát triển ứng dụng đều liên quan đến việc gửi hoặc nhận dữ liệu. Đang khởi động với những kiến thức cơ bản, bạn nên sử dụng khung MVC để thiết kế và triển khai ứng dụng sao cho dữ liệu hoàn toàn tách biệt với khung hiển thị của ứng dụng trên dữ liệu đó (xem bài viết Cấu trúc MVC).
Bạn cũng cần suy nghĩ về cách xử lý dữ liệu khi ứng dụng không có kết nối mạng (xem phần Ngoại tuyến trước tiên). Tài liệu này giới thiệu ngắn gọn về các tuỳ chọn lưu trữ để gửi, nhận và lưu dữ liệu trên thiết bị; thời gian phần còn lại của tài liệu sẽ hướng dẫn bạn cách sử dụng API Hệ thống tệp và Đồng bộ hoá tệp hệ thống của Chrome (xem thêm fileSystem API và syncFileSystem API).
Tùy chọn bộ nhớ
Các ứng dụng đóng gói dùng nhiều cơ chế để gửi và nhận dữ liệu. Đối với dữ liệu bên ngoài (các tài nguyên, trang web), bạn cần lưu ý về Chính sách bảo mật nội dung (CSP). Tương tự Chrome Các tiện ích, bạn có thể sử dụng XMLHttpRequests trên nhiều nguồn gốc để giao tiếp với máy chủ từ xa. Bạn cũng có thể tách biệt các trang bên ngoài để phần còn lại của ứng dụng được an toàn (xem phần Nhúng web bên ngoài trang).
Khi lưu dữ liệu trên thiết bị, bạn có thể sử dụng Chrome Storage API để lưu các chuỗi nhỏ và IndexedDB để lưu dữ liệu có cấu trúc. Với IndexedDB, bạn có thể duy trì đối tượng JavaScript cho lưu trữ đối tượng và sử dụng các chỉ mục của cửa hàng để truy vấn dữ liệu (để tìm hiểu thêm, hãy xem Simple Todo của HTML5 Rock Hướng dẫn về danh sách). Đối với tất cả các loại dữ liệu khác, chẳng hạn như dữ liệu nhị phân, hãy sử dụng hệ thống tệp và Đồng bộ hoá API hệ thống tệp.
API Hệ thống tệp và Đồng bộ hoá tệp của Chrome mở rộng API Hệ thống tệp HTML5. Có API hệ thống tệp, các ứng dụng có thể tạo, đọc, điều hướng và ghi vào một phần trong hộp cát của người dùng cục bộ. Ví dụ: ứng dụng chia sẻ ảnh có thể dùng API Hệ thống tệp để đọc và ghi bất kỳ ảnh mà người dùng chọn.
Với API hệ thống tệp đồng bộ hoá của Chrome, ứng dụng có thể lưu và đồng bộ hoá dữ liệu trên Google Drive của người dùng. cùng một dữ liệu có thể có sẵn cho nhiều ứng dụng khách. Ví dụ: văn bản trên đám mây Editor có thể tự động đồng bộ hoá tệp văn bản mới với tài khoản Google Drive của người dùng. Khi người dùng mở trình chỉnh sửa văn bản trong một ứng dụng mới, Google Drive đẩy tệp văn bản mới vào phiên bản trình chỉnh sửa văn bản.
Sử dụng API Hệ thống tệp Chrome
Đang thêm quyền hệ thống tệp
Để sử dụng API Hệ thống tệp của Chrome, bạn cần thêm "fileSystem" quyền truy cập vào tệp kê khai, vì vậy, mà bạn có thể xin người dùng cho phép lưu trữ dữ liệu cố định.
"permissions": [
"...",
"fileSystem"
]
Các tuỳ chọn người dùng để chọn tệp
Người dùng muốn chọn tệp theo cách tương tự như họ vẫn thường làm. Ít nhất, họ muốn "chọn tệp' và trình chọn tệp chuẩn. Nếu ứng dụng của bạn dùng nhiều chức năng xử lý tệp, bạn cũng nên triển khai tính năng kéo và thả (xem bên dưới và xem thêm tính năng Kéo và thả HTML5 gốc).
Lấy đường dẫn của một tệpEntry
Để lấy đường dẫn đầy đủ của tệp mà người dùng đã chọn, fileEntry, hãy gọi getDisplayPath():
function displayPath(fileEntry) {
chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
console.log(path)
});
}
Triển khai tính năng kéo và thả
Nếu bạn cần triển khai lựa chọn kéo và thả, trình điều khiển tệp kéo và thả (dnd.js) trong
mẫu filesystem-access là điểm khởi đầu tốt. Bộ điều khiển tạo một mục nhập tệp
từ DataTransferItem bằng thao tác kéo và thả. Trong ví dụ này, fileEntry được đặt thành giá trị đầu tiên
đã thả mục.
var dnd = new DnDFileController('body', function(data) {
var fileEntry = data.items[0].webkitGetAsEntry();
displayPath(fileEntry);
});
Đọc tệp
Mã sau đây mở tệp (chỉ có thể đọc) và đọc tệp dưới dạng văn bản bằng cách sử dụng đối tượng FileReader. Nếu
tệp không tồn tại, hệ thống sẽ gửi lỗi.
var chosenFileEntry = null;
chooseFileButton.addEventListener('click', function(e) {
chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) {
readOnlyEntry.file(function(file) {
var reader = new FileReader();
reader.onerror = errorHandler;
reader.onloadend = function(e) {
console.log(e.target.result);
};
reader.readAsText(file);
});
});
});
Ghi tệp
Hai trường hợp sử dụng phổ biến để ghi một tệp là "Lưu" và "Save as" (Lưu dưới dạng). Đoạn mã sau đây sẽ tạo ra một
writableEntry từ chosenFileEntry chỉ có thể đọc và ghi tệp đã chọn vào đó.
chrome.fileSystem.getWritableEntry(chosenFileEntry, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = callback;
chosenFileEntry.file(function(file) {
writer.write(file);
});
}, errorHandler);
});
Đoạn mã sau đây tạo một tệp mới với "Lưu dưới dạng" và ghi blob mới vào
bằng phương thức writer.write().
chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = function(e) {
console.log('write complete');
};
writer.write(new Blob(['1234567890'], {type: 'text/plain'}));
}, errorHandler);
});
Sử dụng API Hệ thống tệp đồng bộ hoá Chrome
Bằng cách sử dụng bộ nhớ tệp có thể đồng bộ hoá, bạn có thể vận hành các đối tượng dữ liệu được trả về giống như các đối tượng cục bộ hệ thống tệp ngoại tuyến trong FileSystem API, nhưng có thêm tính năng đồng bộ hoá (và tự động) dữ liệu lên Google Drive.
Thêm quyền đồng bộ hoá tệp hệ thống
Để sử dụng API hệ thống tệp đồng bộ hóa của Chrome, bạn cần thêm thuộc tính "syncFileSystem" quyền truy cập vào để bạn có thể được người dùng cho phép lưu trữ và đồng bộ hoá dữ liệu cố định.
"permissions": [
"...",
"syncFileSystem"
]
Bắt đầu lưu trữ tệp có thể đồng bộ hoá
Để bắt đầu lưu trữ tệp có thể đồng bộ hoá trong ứng dụng, bạn chỉ cần gọi syncFileSystem.requestFileSystem. Phương thức này trả về một hệ thống tệp có thể đồng bộ hoá được Google Drive hỗ trợ, ví dụ:
chrome.syncFileSystem.requestFileSystem(function (fs) {
// FileSystem API should just work on the returned 'fs'.
fs.root.getFile('test.txt', {create:true}, getEntryCallback, errorCallback);
});
Giới thiệu về trạng thái đồng bộ hoá tệp
Sử dụng syncFileSystem.getFileStatus để nhận trạng thái đồng bộ hóa cho tệp hiện tại:
chrome.syncFileSystem.getFileStatus(entry, function(status) {...});
Các giá trị trạng thái đồng bộ hoá tệp có thể là một trong những giá trị sau: 'synced', 'pending' hoặc 'conflicting'.
"Đã đồng bộ hoá" có nghĩa là tệp được đồng bộ hoá hoàn toàn; không có thay đổi cục bộ nào đang chờ xử lý
đã đồng bộ hoá với Google Drive. Tuy nhiên, có thể có các thay đổi đang chờ xử lý ở phía Google Drive
chưa được tìm nạp.
"Đang chờ xử lý" có nghĩa là tệp có các thay đổi đang chờ xử lý chưa được đồng bộ hoá với Google Drive. Nếu ứng dụng đang
chạy trực tuyến, các thay đổi cục bộ (gần như) sẽ được đồng bộ hoá ngay lập tức với Google Drive và
Sự kiện syncFileSystem.onFileStatusChanged được kích hoạt với trạng thái 'synced' (xem bên dưới để
chi tiết khác).
syncFileSystem.onFileStatusChanged được kích hoạt khi trạng thái của tệp thay đổi thành
'conflicting'. "Xung đột" có nghĩa là có các thay đổi gây mâu thuẫn trên cả bộ nhớ cục bộ và
Google Drive. Tệp chỉ có thể ở trạng thái này nếu bạn đặt chính sách giải quyết xung đột thành
'manual'. Chính sách mặc định là 'last_write_win' và các trường hợp xung đột sẽ tự động được giải quyết bằng
chính sách đôi bên giành chiến thắng sau cùng đơn giản. Chính sách giải quyết xung đột của hệ thống có thể được thay đổi bằng
syncFileSystem.setConflictResolutionPolicy.
Nếu bạn đặt chính sách giải quyết xung đột thành 'manual' và một tệp có trạng thái 'conflicting',
ứng dụng vẫn có thể đọc và ghi tệp dưới dạng tệp ngoại tuyến trên máy, nhưng các thay đổi sẽ không được đồng bộ hoá
và tệp sẽ được tách khỏi các thay đổi từ xa được thực hiện trên các ứng dụng khác cho đến khi xung đột được
đã được giải quyết. Cách dễ nhất để giải quyết xung đột là xoá hoặc đổi tên phiên bản tệp trên máy.
Điều này buộc phiên bản từ xa phải được đồng bộ hoá, trạng thái xung đột được giải quyết và
Sự kiện onFileStatusChanged được kích hoạt với trạng thái 'synced'.
Đang theo dõi các thay đổi trong trạng thái được đồng bộ hóa
Sự kiện syncFileSystem.onFileStatusChanged được kích hoạt khi trạng thái đồng bộ hóa của một tệp thay đổi.
Ví dụ: Giả sử một tệp có các thay đổi đang chờ xử lý và ở trạng thái "đang chờ xử lý" trạng thái. Ứng dụng có thể đã
ở trạng thái ngoại tuyến để thay đổi sắp được đồng bộ hoá. Khi dịch vụ đồng bộ hoá phát hiện thấy
thay đổi cục bộ đang chờ xử lý và tải thay đổi đó lên Google Drive, thì dịch vụ này sẽ kích hoạt
onFileStatusChanged sự kiện với các giá trị sau:
{ fileEntry:a fileEntry for the file, status: 'synced', action: 'updated', direction: 'local_to_remote' }
Tương tự, bất kể hoạt động cục bộ là gì, dịch vụ đồng bộ hoá có thể phát hiện các thay đổi từ xa do
ứng dụng khách khác và tải các thay đổi từ Google Drive xuống bộ nhớ cục bộ. Nếu điều khiển từ xa
thay đổi là để thêm tệp mới, một sự kiện có các giá trị sau sẽ được kích hoạt:
{ fileEntry: a fileEntry for the file, status: 'synced', action: 'added', direction: 'remote_to_local' }.
Nếu cả phía cục bộ và phía xa đều có các thay đổi xung đột cho cùng một tệp và nếu xung đột
chính sách độ phân giải được đặt thành 'manual', thì trạng thái tệp sẽ thay đổi thành trạng thái conflicting,
bị tách khỏi dịch vụ đồng bộ hoá và sẽ không được đồng bộ hoá cho đến khi xung đột được giải quyết. Trong phần này
trong trường hợp một sự kiện có các giá trị sau được kích hoạt:
{ fileEntry: a fileEntry for the file, status: 'conflicting', action: null, direction: null }.
Bạn có thể thêm trình nghe cho sự kiện này để phản hồi mọi thay đổi về trạng thái. Ví dụ: Ứng dụng Chrome Music Player nghe mọi bản nhạc mới được đồng bộ hóa từ Google Drive nhưng chưa nghe được nhập vào bộ nhớ cục bộ của người dùng trên một ứng dụng khách cụ thể. Mọi bản nhạc tìm thấy sẽ được đồng bộ hoá với bản nhạc đó khách hàng:
chrome.syncFileSystem.onFileStatusChanged.addListener(function(fileInfo) {
if (fileInfo.status === 'synced') {
if (fileInfo.direction === 'remote_to_local') {
if (fileInfo.action === 'added') {
db.add(fileInfo.fileEntry);
} else if (fileInfo.action === 'deleted') {
db.remove(fileInfo.fileEntry);
}
}
}
});
Đang kiểm tra việc sử dụng API
Để kiểm tra lượng dữ liệu mà API đang dùng, hãy truy vấn thư mục hộp cát cục bộ của ứng dụng hoặc số byte sử dụng do syncFileSystem.getUsageAndQuota trả về:
chrome.syncFileSystem.getUsageAndQuota(fileSystem, function (storageInfo) {
updateUsageInfo(storageInfo.usageBytes);
updateQuotaInfo(storageInfo.quotaBytes);
});
Bạn cũng có thể xem bộ nhớ dịch vụ phụ trợ đồng bộ hoá của người dùng (trong Google Drive). Các tệp đã đồng bộ hoá được lưu vào một thư mục Google Drive ẩn, Chrome Syncable FileSystem (Hệ thống tệp đồng bộ hóa của Chrome). Thư mục này sẽ không xuất hiện trong 'Drive của tôi' nhưng có thể truy cập được bằng cách tìm kiếm tên thư mục trong hộp tìm kiếm. (Lưu ý rằng bố cục thư mục từ xa không được đảm bảo duy trì khả năng tương thích ngược giữa các bản phát hành.)