Vì kết nối Internet có thể không ổn định hoặc không tồn tại, trước tiên bạn cần cân nhắc việc ngoại tuyến: viết ứng dụng của bạn như thể ứng dụng không có kết nối Internet. Khi ứng dụng của bạn hoạt động ngoại tuyến, hãy thêm bất kỳ nội dung nào chức năng mạng mà bạn cần để ứng dụng của mình làm được nhiều việc hơn khi ứng dụng có kết nối mạng. Hãy đọc tiếp để biết các mẹo về triển khai ứng dụng hỗ trợ ngoại tuyến.
Tổng quan
Ứng dụng Chrome có các tính năng sau đây miễn phí:
- Các tệp trong ứng dụng của bạn – tất cả JavaScript, CSS và phông chữ của ứng dụng cũng như các tài nguyên khác mà ứng dụng cần (chẳng hạn như hình ảnh)—đã đượ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 nhỏ dữ liệu bằng API Bộ nhớ Chrome.
- Ứ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 sự kiện trực tuyến và ngoại tuyến.
Tuy nhiên, những khả năng đó không đủ để đảm bảo ứng dụng của bạn sẽ hoạt động khi không có mạng. Bạn đã bật chế độ ngoại tuyến ứng dụng 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để tải rồi lưu dữ liệu cục bộ. Bạn có thể sử dụng API Bộ nhớ Chrome, IndexedDB hoặc API Hệ thống tệp để lưu dữ liệu trên thiết bị. - Tách biệt 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 biệt giao diện người dùng và dữ liệu không chỉ giúp cải thiện thiết kế của ứng dụng và dễ dàng thực hiện nhiệm vụ bật sử dụng ngoại tuyến, mà còn cho phép bạn cung cấp các chế độ xem khác về dữ liệu của người dùng. Khung MVC có thể giúp bạn phải tách biệt giao diện người dùng và dữ liệu.
- Giả sử ứng dụng của bạn có thể đóng bất cứ lúc nào.
- Lưu trạng thái ứ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 sử dụng ở bất cứ đâu mà họ đã dừng lại.
- Kiểm thử kỹ lưỡng ứng dụng.
- Đảm bảo ứng dụng của bạn hoạt động tốt trong cả trường hợp phổ biến và tình huống phức tạp.
Hạn chế về bảo mật
Ứng dụng Chrome bị giới hạn về vị trí đặt tài nguyên:
- Vì dữ liệu cục bộ chỉ hiển thị trên máy của người dùng và không thể được mã hoá một cách an toàn, nên dữ liệu nhạy cảm nhưng dữ liệu phải ở trên máy chủ. Ví dụ: không lưu trữ mật khẩu hoặc số thẻ tín dụng trên thiết bị.
- Tất cả JavaScript mà ứng dụng thực thi phải nằm trong gói của ứng dụng. Thuộc tính này không thể 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 tải bằng cách sử dụng
XMLHttpRequest(xem Tham chiếu các tài nguyên bên ngoài). Sau đó, hãy tham chiếu đến bằng URL của blob hoặc (tốt nhất là nên lưu), sau đó tải dữ liệu bằng Filesystem API.
Tuy nhiên, bạn có thể tải các tài nguyên phương tiện lớ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 là các phần tử <video> và <audio> có phương án 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ó 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 có 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 tài liệu này 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 bài viết Nhúng trang web bên ngoài).
Một số quy định hạn chế đối với Ứng dụng Chrome được thực thi theo Chính sách bảo mật nội dung (CSP). Chính sách này luôn là các mục 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 ngoại tuyến_enabled
Chúng tôi 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 thực tế đó để
biểu tượng khởi chạy bị làm mờ khi người dùng không có kết nối mạng. Để làm 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 để bạn lưu dữ liệu trên thiết bị (xem thêm phần Quản lý dữ liệu).
| API | Sử dụng tốt nhất | Ghi chú |
|---|---|---|
| API Bộ nhớ Chrome | Lượng dữ liệu chuỗi nhỏ | Tuyệt vời đối với chế độ cài đặt và trạng thái. Dễ dàng đồng bộ hoá từ xa (nhưng bạn không cần làm như vậy). Không phù hợp với lượng dữ liệu lớn hơ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 không giới hạn bộ nhớ. |
| API hệ thống tệp | Các danh mục khác | Cung cấp một khu vực hộp cát để bạn có thể lưu trữ tệp. Sử dụng với quyền không giới hạn bộ nhớ. |
Lưu dữ liệu từ xa
Nhìn chung, bạn sẽ quyết định cách lưu dữ liệu từ xa, nhưng một số khung và API có thể giúp bạn (xem phần MVC) Cấu trúc). Nếu bạn sử dụng API Bộ nhớ Chrome, thì tất cả 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?}
Cân nhắc việc lưu thông tin về người dùng dữ liệu của bạn trong ít nhất 30 ngày sau khi gỡ cài đặt ứng dụng, để người dùng 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 để dữ liệu được hoàn chỉnh 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 để 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, máy chủ đó sẽ cung cấp cho bạn dữ liệu, chứ không phải các phần HTML. Cân nhắc kỹ lưỡng về API RESTful.
Sau khi dữ liệu được tách biệt với ứng dụng, việc cung cấp chế độ xem thay thế của dữ liệu sẽ dễ dàng hơn nhiều. 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. Lượt xem trang web không chỉ có thể hữu ích khi người dùng không sử dụng Chrome nhưng có thể cho phép công cụ tìm kiếm tìm thấy dữ liệu.
Thử nghiệm
Hãy đảm bảo ứng dụng của bạn hoạt động tốt trong các trường hợp sau:
- Ứng dụng này được cài đặt rồi mất kết nối mạng ngay lập tức. Nói cách khác, lần đầu tiên sử dụng ứng dụng đang ngoại tuyến.
- Ứng dụng được cài đặt trên một máy tính, sau đó được đồng bộ hoá với một máy tính khác.
- Ứng dụng bị gỡ cài đặt rồi được cài đặt lại ngay lập tức.
- Ứng dụng đang chạy cùng lúc trên 2 máy tính, có cùng một hồ sơ. Ứng dụng phải hoạt động một cách hợp lý khi một máy tính ngoại tuyến, người dùng thực hiện nhiều thao tác trên máy tính đó và thì máy tính sẽ trực tuyến trở lại.
- Ứng dụng có kết nối bị gián đoạn, thường xuyên chuyển đổi giữa chế độ 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 chủ máy.