Vì kết nối Internet có thể không ổn định hoặc không tồn tại, bạn cần xem xét chế độ ngoại tuyến trước tiên: viết ứng dụng như thể ứng dụng không có kết nối Internet. Sau khi ứng dụng hoạt động ở chế độ ngoại tuyến, hãy thêm bất kỳ chức năng mạng nào bạn cần để ứng dụng làm được nhiều việc hơn khi có kết nối mạng. Đọc tiếp để biết các mẹo triển khai ứng dụng hỗ trợ chế độ ngoại tuyến.
Tổng quan
Ứng dụng Chrome nhận được những lợi ích sau đây miễn phí:
- Các tệp của ứng dụng – tất cả JavaScript, CSS và phông chữ của ứng dụng, cùng với các tài nguyên khác mà ứng dụng cần (chẳng hạn như hình ảnh) – đều đã được tải xuống.
- Ứng dụng của bạn có thể lưu và tuỳ ý đồng bộ hoá một lượng dữ liệu nhỏ bằng Chrome Storage API.
- Ứng dụng của bạn có thể phát hiện các thay đổi về khả năng kết nối bằng cách theo dõi các sự kiện trực tuyến và ngoại tuyến.
Nhưng những khả năng đó chưa đủ để đảm bảo rằng ứng dụng của bạn sẽ hoạt động khi không có mạng. Ứng dụng có hỗ trợ ngoại tuyến phải tuân theo các quy tắc sau:
- Sử dụng dữ liệu cục bộ bất cứ khi nào có thể.
- Khi sử dụng tài nguyên trên Internet, hãy dùng
XMLHttpRequestđể lấy dữ liệu rồi lưu dữ liệu trên thiết bị. Bạn có thể sử dụng API Chrome Storage, IndexedDB hoặc Filesystem API để lưu dữ liệu trên máy. - Tách giao diện người dùng của ứng dụng khỏi dữ liệu của ứng dụng.
- Việc tách riêng giao diện người dùng và dữ liệu không chỉ cải thiện thiết kế của ứng dụng và dễ dàng thực hiện việc sử dụng ngoại tuyến, mà còn cho phép bạn cung cấp các khung hiển thị khác cho dữ liệu của người dùng. Khung MVC có thể giúp bạn tách biệt giao diện người dùng và dữ liệu.
- Giả định rằng bạn có thể đóng ứng dụng bất cứ lúc nào.
- Lưu trạng thái của ứng dụng (cả trên máy và từ xa, nếu có thể) để người dùng có thể tiếp tục ở bất cứ nơi nào họ đã dừng lại.
- Kiểm thử kỹ ứng dụng.
- Đảm bảo ứng dụng hoạt động tốt trong cả tình huống phổ biến và khó khăn.
Hạn chế bảo mật
Ứng dụng Chrome bị giới hạn về nơi có thể đặt tài nguyên:
- Vì dữ liệu cục bộ hiển thị trên máy của người dùng và không thể được mã hoá an toàn, nên dữ liệu nhạy cảm phải ở trên máy chủ. Ví dụ: bạn không nên lưu trữ mật khẩu hoặc số thẻ tín dụng trên máy.
- Tất cả JavaScript mà ứng dụng thực thi phải nằm trong gói của ứng dụng. Tệp này không được cùng dòng.
Ban đầu, tất cả kiểu CSS, hình ảnh và phông chữ có thể nằm trong gói của ứng dụng hoặc tại một URL từ xa. Nếu tài nguyên ở xa, bạn không thể chỉ định tài nguyên đó trong HTML. Thay vào đó, hãy lấy dữ liệu bằng cách sử dụng
XMLHttpRequest(xem phần Tham chiếu tài nguyên bên ngoài). Sau đó, hãy tham chiếu đến dữ liệu bằng URL blob hoặc lưu (tốt nhất là) rồi tải dữ liệu bằng API hệ thống tệp.
Tuy nhiên, bạn có thể tải tài nguyên nghe nhìn có dung lượng lớn, chẳng hạn như video và âm thanh từ các trang web bên ngoài. Một lý do cho ngoại lệ này của quy tắc này là các phần tử <video> và <audio> có hành vi dự phòng tốt khi ứng dụng có khả năng kết nối hạn chế hoặc không có khả năng kết nối. Một lý do khác là việc tìm nạp và phân phát nội dung đa phương tiện bằng XMLHttpRequest và URL blob hiện không cho phép phát trực tuyến hoặc lưu vào bộ đệm một phần.
Để cung cấp iframe hộp cát, bạn có thể tạo thẻ <webview>. Nội dung của ứng dụng có thể ở xa nhưng không có quyền truy cập trực tiếp vào API ứng dụng Chrome (xem phần Nhúng các trang web bên ngoài).
Một số hạn chế đối với Ứng dụng Chrome được thực thi bằng Chính sách bảo mật nội dung (CSP). Chính sách này luôn như sau và không thể thay đổi đối với Ứng dụng Chrome:
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;
Chỉ định offline_enabled
Google giả định rằng ứng dụng của bạn hoạt động tốt khi không có mạng. Nếu không, bạn nên quảng cáo dữ kiện đó để biểu tượng khởi chạy được làm mờ khi người dùng ngoại tuyến. Để thực hiện việc này, hãy đặt offline_enabled thành false trong tệp kê khai ứng dụng:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Lưu dữ liệu cục bộ
Bảng sau đây trình bày các lựa chọn để lưu dữ liệu cục bộ (xem thêm phần Quản lý dữ liệu).
| API | Cách sử dụng tốt nhất | Ghi chú |
|---|---|---|
| API Chrome Storage | Một lượng nhỏ dữ liệu chuỗi | Phù hợp với các chế độ cài đặt và trạng thái. Dễ dàng đồng bộ hoá từ xa (nhưng bạn không bắt buộc phải làm). Không phù hợp với lượng dữ liệu lớn, do hạn mức. |
| API IndexedDB | Dữ liệu có cấu trúc | Cho phép tìm kiếm nhanh trên dữ liệu. Sử dụng với quyền unlimitedStorage. |
| API hệ thống tệp | Các danh mục khác | Cung cấp khu vực hộp cát để bạn lưu trữ tệp. Sử dụng với quyền unlimitedStorage. |
Lưu dữ liệu từ xa
Nhìn chung, bạn có thể tự quyết định cách lưu dữ liệu từ xa, nhưng một số khung và API có thể giúp ích cho bạn (xem bài viết Cấu trúc MVR). Nếu bạn sử dụng API Bộ nhớ Chrome, thì mọi dữ liệu có thể đồng bộ hoá sẽ tự động được đồng bộ hoá bất cứ khi nào ứng dụng trực tuyến và người dùng đăng nhập vào Chrome. Nếu người dùng chưa đăng nhập, họ sẽ được nhắc đăng nhập. Tuy nhiên, xin lưu ý rằng dữ liệu đã đồng bộ hoá của người dùng sẽ bị xoá nếu người dùng gỡ cài đặt ứng dụng của bạn. {QUESTION: true?}
Hãy cân nhắc lưu dữ liệu của người dùng trong ít nhất 30 ngày sau khi ứng dụng của bạn bị gỡ cài đặt, nhờ đó, người dùng sẽ có trải nghiệm tốt nếu họ cài đặt lại ứng dụng của bạn.
Tách giao diện người dùng khỏi dữ liệu
Việc sử dụng khung MVC có thể giúp bạn 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 chế độ xem của ứng dụng trên dữ liệu. Xem phần Cấu trúc MVC để biết danh sách các khung MVC.
Nếu ứng dụng của bạn giao tiếp với một máy chủ tuỳ chỉnh, thì máy chủ sẽ cung cấp dữ liệu cho bạn chứ không phải các đoạn HTML. Hãy suy nghĩ về các API RESTful.
Khi dữ liệu tách biệt khỏi ứng dụng, bạn sẽ dễ dàng cung cấp các chế độ xem thay thế dữ liệu hơn. Ví dụ: bạn có thể cung cấp chế độ xem trang web của bất kỳ dữ liệu công khai nào. Chế độ xem trang web không chỉ hữu ích khi người dùng không rời khỏi Chrome, mà còn cho phép công cụ tìm kiếm tìm thấy dữ liệu.
Kiểm thử
Đảm bảo ứng dụng hoạt động tốt trong các trường hợp sau:
- Ứng dụng được cài đặt, sau đó ngay lập tức chuyển sang chế độ ngoại tuyến. Nói cách khác, lần đầu tiên người dùng sử dụng ứng dụng là khi không có mạng.
- Ứng dụng này được cài đặt trên một máy tính, sau đó đồng bộ hóa với một máy tính khác.
- Ứng dụng bị gỡ cài đặt rồi cài đặt lại ngay lập tức.
- Ứng dụng đang chạy cùng lúc trên hai máy tính, có cùng hồ sơ. Ứng dụng phải hoạt động hợp lý khi một máy tính không có kết nối mạng, người dùng thực hiện nhiều thao tác trên máy tính đó, sau đó máy tính đó lại có kết nối mạng trở lại.
- Ứng dụng có kết nối gián đoạn, thường chuyển đổi giữa trực tuyến và ngoại tuyến.
Ngoài ra, hãy đảm bảo rằng ứng dụng không lưu dữ liệu nhạy cảm của người dùng (chẳng hạn như mật khẩu) trên máy của người dùng.