Thành phần và dữ liệu

Progressive Web App là một trang web; tất cả nội dung của trang web đều giống như trên web, nhưng với các công cụ mới giúp những nội dung đó tải nhanh khi trực tuyến và khả dụng khi ngoại tuyến.

Thành phần ứng dụng

Việc phát triển một ứng dụng thường liên quan đến một số thành phần và tài nguyên, từ logic và mã (được biên dịch hay không) cho đến các thành phần giao diện người dùng như thiết kế màn hình, hình ảnh, biểu trưng và phông chữ.

Ứng dụng web tiến bộ là một trang web, vì vậy, tất cả nội dung của trang web đều giống như trên web:

HTML để hiển thị nội dung và trang ban đầu.
JavaScript cho logic, bao gồm khả năng chạy các mô-đun WebAssembly (mã đã biên dịch) và kết xuất đồ hoạ được tối ưu hoá cho phần cứng 2D và 3D.
CSS cho bố cục, kiểu và ảnh động.
Hình ảnh ở các định dạng web, chẳng hạn như PNG, JPEG, WebP và SVG.
Video ở các định dạng web, chẳng hạn như MPEG-4 và WebM.
Phông chữ trên web.
Dữ liệu ở định dạng JSON hoặc các định dạng khác.

Theo mặc định, các trang web sẽ tải các thành phần xuống qua mạng, bắt đầu bằng HTML và tiếp tục với phần còn lại của tài nguyên.

Việc quản lý những tài nguyên đó để tải nhanh và khả dụng khi ngoại tuyến là một thách thức đối với web. Ngày nay, các ứng dụng web tiến bộ (PWA) sử dụng các tính năng mà trước đây chỉ liên kết với các ứng dụng dành riêng cho nền tảng.

Ứng dụng dành riêng cho nền tảng so với PWA

Khi cài đặt ứng dụng dành riêng cho nền tảng, bạn thường tải xuống một gói bao gồm tất cả thành phần của ứng dụng: mã, hình ảnh, phông chữ, video, v.v. Do đó, tất cả các tài nguyên này đều có sẵn từ bộ nhớ thiết bị, ngay cả khi ứng dụng không kết nối mạng.

Mặt khác, một trang web được tạo bằng Google Sites cũ cần có kết nối mạng để tải thành phần xuống khi cần. Nếu không có kết nối mạng, bạn sẽ thấy thông báo lỗi trên trình duyệt vì không có thành phần nào ở phía máy khách.

Phương pháp PWA nâng cao trải nghiệm web truyền thống bằng cách cung cấp một số hoặc tất cả tài sản ở phía máy khách giống như đối với các ứng dụng dành riêng cho nền tảng. Do đó, khi bạn mở một ứng dụng web tiến bộ (PWA), quá trình kết xuất ban đầu có thể diễn ra ngay lập tức như ứng dụng nền tảng vì các thành phần có sẵn mà không cần kết nối mạng.

Bộ nhớ đệm và dung lượng lưu trữ

Kể từ khi bắt đầu web, các nhà phát triển không có toàn quyền kiểm soát cách tài nguyên được lưu vào bộ nhớ đệm. Trình duyệt chịu trách nhiệm về bộ nhớ đệm HTTP và có thể lưu vào bộ nhớ đệm và phân phát các tài nguyên dựa trên các chính sách khác nhau hoặc không. Các tuỳ chọn lưu trữ khác như Web Storage và IndexedDB nhằm lưu đối tượng và dữ liệu đơn giản.

PWA không cần phải chỉ dựa vào các chính sách đó cho nội dung của chúng. Thay vào đó, hiện tại chúng tôi có giải pháp giúp bạn kiểm soát tốt hơn thời điểm và cách thức lưu tài nguyên vào bộ nhớ đệm, cũng như thời điểm và cách thức phân phối tài nguyên cục bộ vào bộ nhớ đệm: API Bộ nhớ đệm. Trên web có một số giải pháp lưu trữ phía máy khách:

Bộ nhớ trên web: Bao gồm localStorage và sessionStorage. Các API này lưu trữ các cặp chuỗi khoá/giá trị đơn giản. Bộ nhớ web bị hạn chế và có API đồng bộ, vì vậy, bạn nên tránh sử dụng bộ nhớ này bất cứ khi nào có thể.
IndexedDB: Cơ sở dữ liệu dựa trên đối tượng (No-SQL) có API không đồng bộ, tốt cho hiệu suất web. IndexedDB có thể lưu trữ dữ liệu có cấu trúc và dữ liệu nhị phân ở phía máy khách. Đó thường là những gì bạn sẽ sử dụng để lưu trữ dữ liệu, chẳng hạn như dữ liệu bạn nhận được hoặc gửi dưới dạng một yêu cầu API. Bạn cũng nên lưu dữ liệu cục bộ ngay lập tức rồi đồng bộ hoá dữ liệu đó với máy chủ. IndexedDB API được dùng để tương tác với cơ sở dữ liệu.
Bộ nhớ đệm: Một tập hợp gồm các cặp yêu cầu và phản hồi HTTP mà bạn có thể sử dụng để lưu trữ và truy xuất các tài nguyên – với tiêu đề HTTP của chúng – chính xác như khi chúng được phân phối từ máy chủ. API Bộ nhớ cache cho phép bạn lưu trữ, truy xuất, cập nhật và xóa các yêu cầu mạng, ví dụ cho nội dung của bạn, ngay cả khi ngoại tuyến.

Nhu cầu sử dụng trình chạy dịch vụ

PWA có thể lưu trữ các tài sản trong Bộ nhớ đệm và IndexedDB, nhưng làm cách nào chúng tôi có thể sử dụng các tài sản đó để cung cấp trải nghiệm nhanh và ngoại tuyến cho người dùng. Câu trả lời? Trình chạy dịch vụ.

Với trình chạy dịch vụ, bạn có thể phân phát thành phần mà không cần vào mạng, gửi thông báo cho người dùng, thêm huy hiệu vào biểu tượng PWA, cập nhật nội dung trong nền và thậm chí là đặt toàn bộ PWA hoạt động ở chế độ ngoại tuyến. Tìm hiểu thêm về trình chạy dịch vụ trong chương tiếp theo.

Có thể sử dụng khi không có mạng

Người dùng mong muốn ứng dụng của bạn cung cấp trải nghiệm nhanh và luôn sẵn sàng. Điều đó có nghĩa là ứng dụng của bạn có thể hoạt động khi không có mạng.

Trạng thái sẵn sàng ở chế độ ngoại tuyến không có nghĩa là tất cả nội dung hay dịch vụ của bạn sẽ có thể truy cập được mà không cần kết nối mạng. Tuy nhiên, việc có ít nhất một trải nghiệm cơ bản khi người dùng không kết nối mạng, chẳng hạn như một trang yêu cầu bạn kết nối với Internet để tiếp tục, sẽ mang lại trải nghiệm tốt hơn cho người dùng, giúp người dùng duy trì trải nghiệm với ứng dụng của bạn thay vì một lỗi thông thường của trình duyệt. Trong một số trình duyệt, đây là tính năng phải có để đáp ứng các tiêu chí cài đặt PWA. Việc hiển thị giao diện người dùng của PWA cùng với nội dung được lưu vào bộ nhớ đệm sẽ hiệu quả hơn. Việc cho phép người dùng tiếp tục sử dụng toàn bộ PWA và việc đồng bộ hoá các thay đổi đối với máy chủ khi họ có kết nối mạng trở lại là tiêu chuẩn vàng để làm việc khi không có mạng.

Để chuyển ứng dụng sang chế độ ngoại tuyến, bạn cần lưu các tài sản cần thiết vào bộ nhớ đệm khi sử dụng khi không có mạng và yêu cầu trình chạy dịch vụ phân phát các tài sản đó sau. Hãy nhớ thêm các thành phần ngoại tuyến vào bộ nhớ đệm trước khi cần. Đây là trường hợp cụ thể mà bạn không thể lưu chúng vào bộ nhớ đệm khi được yêu cầu.

Các phương pháp lưu vào bộ nhớ đệm thường dùng

Trong ứng dụng web tiến bộ (PWA) mình, bạn chịu trách nhiệm cho mọi quyết định. Bạn có thể chọn phương pháp tốt nhất để lưu vào bộ nhớ đệm hoặc cài đặt tài sản tuỳ theo nhu cầu của mình. Bạn cần đưa ra một số quyết định như sau:

Lưu trước vào bộ nhớ đệm: chọn nội dung bạn muốn cài đặt trong lần tải đầu tiên; các nội dung đó phải bao gồm HTML và nội dung tối thiểu để hiển thị ứng dụng. Khi sử dụng bộ nhớ đệm, lưu ý rằng bạn đang sử dụng không gian và mạng của thiết bị. Hãy lưu ý và có trách nhiệm khi tải tài sản xuống và lưu vào bộ nhớ đệm.
Lưu vào bộ nhớ đệm nếu cần: dùng để thêm thành phần vào bộ nhớ đệm khi được yêu cầu. Thông thường, đây là những thành phần có thể thay đổi độc lập với phiên bản ứng dụng của bạn, chẳng hạn như hình ảnh hoặc nội dung. Xem phần lưu vào bộ nhớ đệm để biết các chiến lược khác nhau về cách lưu vào bộ nhớ đệm nếu cần.
API và dịch vụ web: Các lệnh gọi API có thể được lưu vào bộ nhớ đệm; hoặc, thay vì lưu phản hồi của API vào bộ nhớ đệm, bạn có thể lưu trữ dữ liệu của chúng trong IndexedDB.

Đang cập nhật nội dung

Trong mô hình ứng dụng tiêu chuẩn đối với ứng dụng được cài đặt theo danh mục ứng dụng, nhà phát triển sẽ phát hành một gói mới khi cần cập nhật ứng dụng. Người dùng cần tải lại toàn bộ gói xuống, ngay cả khi hầu hết thành phần chưa thay đổi. Với PWA, bạn có thể quyết định cách thức và thời điểm cập nhật các thành phần thông qua các phương pháp ở phần trên. Dưới đây là các cách cập nhật tài sản:

Cập nhật đầy đủ: trong trường hợp này, mỗi khi bạn thực hiện thay đổi trong ứng dụng, dù là thay đổi nhỏ, mã của bạn sẽ tải lại tất cả thành phần xuống trong bộ nhớ đệm.
Cập nhật một phần: trong phương pháp này, bạn tạo một phương thức để xác định những thành phần đã được cập nhật và chỉ cập nhật những thành phần đó (có hoặc không có sự can thiệp của người dùng).
Cập nhật liên tục: khi sử dụng kỹ thuật này, các thành phần của bạn sẽ được kiểm tra và cập nhật tự động mỗi khi bạn sử dụng PWA một cách riêng lẻ

Kích thước và tuổi thọ

Thông thường, các ứng dụng dành riêng cho nền tảng không giải quyết giới hạn kích thước; khi cài đặt, ứng dụng có thể có kích thước từ gigabyte trở lên. Việc cài đặt sẽ được cho phép miễn là thiết bị có đủ dung lượng. Ngoài ra, khi được cài đặt, ứng dụng sẽ sử dụng tổng dung lượng lưu trữ đó bất kể bạn có sử dụng ứng dụng hay không. Bộ nhớ được xử lý theo cách khác đối với PWA. Trình duyệt sẽ lưu trữ thành phần dựa trên các chính sách mà bạn xác định trong logic của PWA.

Giới hạn về kích thước phụ thuộc vào trình duyệt. Nó không linh hoạt như đối với các ứng dụng dành riêng cho nền tảng, nhưng thường đủ tốt với hầu hết các ứng dụng web. Bạn có thể xem các giới hạn cụ thể theo trình duyệt trong bài viết này.

Các trình duyệt có thể loại bỏ thành phần dựa trên áp lực về bộ nhớ hoặc sau một vài tuần không hoạt động, nếu người dùng đang sử dụng PWA của bạn trong trình duyệt. Trên một số nền tảng, nếu người dùng cài đặt PWA của bạn, việc bị loại bỏ sẽ không xảy ra. Nếu có, mã có thể yêu cầu bộ nhớ liên tục thông qua một API để tránh bị loại bỏ.