Cập nhật

Bạn đã phát hành PWA của mình: một số người dùng sử dụng PWA từ trình duyệt, những người khác cài đặt PWA trên thiết bị của họ. Khi cập nhật ứng dụng, bạn cần áp dụng các phương pháp hay nhất để tránh các lỗi.

Bạn có thể cập nhật:

  • Dữ liệu ứng dụng.
  • Nội dung đã được lưu vào bộ nhớ đệm trong các thiết bị.
  • Tệp trình chạy dịch vụ hoặc các phần phụ thuộc của nó.
  • Siêu dữ liệu của tệp kê khai.

Hãy cùng tìm hiểu các phương pháp hay nhất cho từng yếu tố.

Đang cập nhật dữ liệu

Để cập nhật dữ liệu, chẳng hạn như dữ liệu được lưu trữ trong IndexedDB, bạn có thể sử dụng các công cụ như Tìm nạp, WebRTC hoặc API WebSockets. Nếu ứng dụng của bạn hỗ trợ tính năng ngoại tuyến, hãy nhớ luôn cập nhật dữ liệu hỗ trợ các tính năng đó.

Trên các trình duyệt tương thích, có các lựa chọn để đồng bộ hoá dữ liệu, không chỉ khi người dùng mở PWA mà còn ở chế độ nền. Các lựa chọn này bao gồm:

  • Đồng bộ hoá trong nền: lưu các yêu cầu không thực hiện được và thử lại bằng cách sử dụng tính năng đồng bộ hoá từ trình chạy dịch vụ.
  • Đồng bộ hoá định kỳ trên web: đồng bộ hoá dữ liệu định kỳ ở chế độ nền vào một số thời điểm cụ thể, cho phép ứng dụng cung cấp dữ liệu cập nhật ngay cả khi người dùng chưa mở ứng dụng.
  • Tìm nạp trong nền: tải các tệp có kích thước lớn xuống, ngay cả khi PWA đang đóng.
  • Đẩy trên web: gửi một thông báo từ máy chủ để đánh thức trình chạy dịch vụ và thông báo cho người dùng. Thông báo này thường được gọi là "thông báo đẩy". API này yêu cầu sự cho phép của người dùng.

Tất cả các API này được thực thi từ ngữ cảnh trình chạy dịch vụ. Các API này hiện chỉ có trên các trình duyệt dựa trên Chromium, hệ điều hành Android và máy tính. Khi sử dụng một trong các API này, bạn có thể chạy mã trong luồng của trình chạy dịch vụ; ví dụ: để tải dữ liệu xuống từ máy chủ và cập nhật dữ liệu IndexedDB của bạn.

Đang cập nhật tài sản

Việc cập nhật thành phần bao gồm mọi thay đổi đối với tệp mà bạn dùng để hiển thị giao diện của ứng dụng, chẳng hạn như HTML, CSS, JavaScript và hình ảnh. Ví dụ: thay đổi trong logic của ứng dụng, hình ảnh thuộc giao diện hoặc biểu định kiểu CSS.

Mẫu cập nhật

Dưới đây là một số mẫu phổ biến để xử lý các bản cập nhật ứng dụng, nhưng bạn luôn có thể tuỳ chỉnh quy trình theo nhu cầu của riêng mình:

  • Cập nhật đầy đủ: mọi thay đổi, dù chỉ là một thay đổi nhỏ, đều sẽ kích hoạt việc thay thế toàn bộ nội dung bộ nhớ đệm. Mẫu này bắt chước cách các ứng dụng dành riêng cho thiết bị xử lý bản cập nhật và sẽ tốn nhiều băng thông hơn cũng như mất nhiều thời gian hơn.
  • Cập nhật những thành phần đã thay đổi: chỉ những thành phần đã thay đổi kể từ lần cập nhật gần đây nhất mới được thay thế trong bộ nhớ đệm. Thư viện này thường được triển khai bằng cách sử dụng một thư viện, chẳng hạn như Hộp làm việc. Quá trình này bao gồm việc tạo danh sách các tệp được lưu vào bộ nhớ đệm, bản trình bày dạng hàm băm của tệp và dấu thời gian. Với thông tin này, trình chạy dịch vụ so sánh danh sách này với các nội dung được lưu vào bộ nhớ đệm và quyết định nội dung nào cần cập nhật.
  • Cập nhật từng nội dung: mỗi nội dung được cập nhật riêng lẻ khi có thay đổi. Chiến lược cũ trong khi xác thực lại như mô tả trong chương Phân phát là một ví dụ về việc cập nhật từng thành phần.

Thời điểm cập nhật

Một phương pháp hay khác là tìm thời điểm thích hợp để kiểm tra các bản cập nhật và áp dụng chúng. Dưới đây là một số tùy chọn:

  • Khi trình chạy dịch vụ thức dậy. Không có sự kiện nào cần theo dõi khoảnh khắc này, nhưng trình duyệt sẽ thực thi bất kỳ mã nào trong phạm vi toàn cục của trình chạy dịch vụ khi trình chạy được đánh thức.
  • Trong bối cảnh cửa sổ chính của PWA, sau khi trình duyệt tải trang, bạn cần tránh làm cho ứng dụng tải chậm hơn.
  • Khi sự kiện trong nền được kích hoạt, chẳng hạn như khi PWA nhận được thông báo đẩy hoặc quá trình đồng bộ hoá ở chế độ nền kích hoạt. Khi đó, bạn có thể cập nhật bộ nhớ đệm. Khi đó, người dùng sẽ thấy phiên bản mới của thành phần vào lần tiếp theo họ mở ứng dụng.

Thông tin cập nhật trực tiếp

Bạn cũng có thể chọn áp dụng bản cập nhật khi ứng dụng đang mở (đang hoạt động) hoặc đóng. Với phương pháp đóng ứng dụng, mặc dù ứng dụng đã tải các thành phần mới xuống nhưng sẽ không thực hiện bất kỳ thay đổi nào và sẽ sử dụng các phiên bản mới trong lần tải tiếp theo.

Cập nhật trực tiếp có nghĩa là ngay khi thành phần được cập nhật trong bộ nhớ đệm, PWA sẽ thay thế thành phần trong nội dung tải hiện tại. Đây là một nhiệm vụ phức tạp không được đề cập trong khoá học này. Một số công cụ giúp triển khai nội dung cập nhật này là livereload-js và cập nhật thành phần CSS CSSStyleSheet.replace() API.

Đang cập nhật trình chạy dịch vụ

Trình duyệt kích hoạt thuật toán cập nhật khi trình chạy dịch vụ hoặc các phần phụ thuộc của trình chạy dịch vụ đó thay đổi. Trình duyệt phát hiện các bản cập nhật bằng cách sử dụng phép so sánh từng byte giữa các tệp được lưu vào bộ nhớ đệm và tài nguyên đến từ mạng.

Sau đó, trình duyệt sẽ cố gắng cài đặt phiên bản mới của trình chạy dịch vụ, và trình chạy dịch vụ mới sẽ ở trạng thái đang chờ, như được mô tả trong chương Trình chạy dịch vụ. Thao tác cài đặt mới sẽ chạy sự kiện install cho trình chạy dịch vụ mới. Nếu bạn đang lưu các thành phần vào bộ nhớ đệm trong trình xử lý sự kiện đó, thì các thành phần cũng sẽ được lưu lại vào bộ nhớ đệm.

Phát hiện các thay đổi của trình chạy dịch vụ

Để phát hiện xem một trình chạy dịch vụ mới đã sẵn sàng và được cài đặt hay chưa, chúng ta sử dụng sự kiện updatefound từ quá trình đăng ký trình chạy dịch vụ. Sự kiện này được kích hoạt khi trình chạy dịch vụ mới bắt đầu cài đặt. Chúng ta cần đợi trạng thái của biến đổi thành installed với sự kiện statechange; xem các mục sau:

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

Buộc ghi đè

Trình chạy dịch vụ mới sẽ được cài đặt nhưng đang chờ kích hoạt theo mặc định. Thời gian chờ ngăn không cho trình chạy dịch vụ mới tiếp quản các ứng dụng cũ có thể không tương thích với phiên bản mới.

Mặc dù không nên, nhưng trình chạy dịch vụ mới có thể bỏ qua thời gian chờ đó và bắt đầu kích hoạt ngay lập tức.

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

Sự kiện controllerchange kích hoạt khi trình chạy dịch vụ kiểm soát trang hiện tại thay đổi. Ví dụ: một worker mới đã bỏ qua thời gian chờ và trở thành worker mới đang hoạt động.

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

Cập nhật siêu dữ liệu

Bạn cũng có thể cập nhật siêu dữ liệu của ứng dụng, chủ yếu được đặt trong tệp kê khai ứng dụng web. Ví dụ: cập nhật biểu tượng, tên hoặc URL bắt đầu của ứng dụng hoặc bạn có thể thêm tính năng mới như lối tắt ứng dụng. Nhưng điều gì sẽ xảy ra với tất cả người dùng đã cài đặt ứng dụng có biểu tượng cũ trên thiết bị của họ? Làm thế nào và khi nào họ nhận được phiên bản cập nhật?

Câu trả lời còn tuỳ thuộc vào nền tảng. Hãy cùng tìm hiểu các tuỳ chọn có sẵn.

Safari trên trình duyệt iOS, iPadOS và Android

Trên các nền tảng này, cách duy nhất để tải siêu dữ liệu của tệp kê khai mới là cài đặt lại ứng dụng qua trình duyệt.

Google Chrome trên Android với WebAPK

Khi người dùng cài đặt PWA của bạn trên Android bằng Google Chrome và đã kích hoạt WebAPK (hầu hết lượt cài đặt PWA Chrome), bản cập nhật sẽ được phát hiện và áp dụng dựa trên một thuật toán. Xem thông tin chi tiết trong bài viết cập nhật tệp kê khai.

Một số lưu ý bổ sung về quy trình này:

Nếu người dùng không mở PWA của bạn, WebAPK của ứng dụng đó sẽ không được cập nhật. Nếu máy chủ không phản hồi bằng tệp kê khai (lỗi 404), thì Chrome sẽ không kiểm tra bản cập nhật trong tối thiểu 30 ngày, ngay cả khi người dùng mở PWA.

Hãy truy cập about:webapks trong Chrome trên Android để xem trạng thái của "cần cập nhật" gắn cờ và yêu cầu cập nhật. Trong chương Công cụ và gỡ lỗi, bạn có thể đọc thêm về công cụ gỡ lỗi này.

Samsung Internet trên Android với WebAPK

Quá trình này tương tự như phiên bản Chrome. Trong trường hợp này, nếu tệp kê khai PWA yêu cầu cập nhật, thì trong vòng 24 giờ tới, WebAPK sẽ được cập nhật trên Wi-Fi sau khi minh bản WebAPK đã cập nhật.

Google Chrome và Microsoft Edge trên máy tính

Trên thiết bị máy tính, khi PWA được khởi chạy, trình duyệt sẽ xác định lần gần đây nhất trình duyệt kiểm tra tệp kê khai cục bộ để biết thay đổi. Nếu tệp kê khai chưa được xem xét kể từ lần gần đây nhất trình duyệt khởi động hoặc chưa được kiểm tra trong 24 giờ qua, thì trình duyệt sẽ thực hiện yêu cầu mạng đối với tệp kê khai rồi so sánh với bản sao cục bộ.

Khi bạn cập nhật các tài sản đã chọn, hệ thống sẽ kích hoạt quá trình cập nhật sau khi tất cả cửa sổ đã đóng.

Thông báo cho người dùng

Một số chiến lược cập nhật cần được tải lại hoặc thao tác mới từ ứng dụng. Bạn sẽ muốn cho người dùng biết rằng có một bản cập nhật đang chờ xử lý nhưng hãy cho họ cơ hội cập nhật trang vào thời điểm phù hợp nhất.

Để thông báo cho người dùng, có các lựa chọn sau:

  • Dùng DOM hoặc canvas API để hiển thị một thông báo trên màn hình.
  • Dùng API thông báo trên web. API này nằm trong quyền đẩy để tạo thông báo trong hệ điều hành. Bạn sẽ cần yêu cầu quyền đẩy thông báo trên web để sử dụng tính năng này, ngay cả khi bạn không sử dụng giao thức thông báo đẩy từ máy chủ của mình. Đây là lựa chọn duy nhất chúng tôi có nếu PWA không mở.
  • Dùng API Huy hiệu để cho biết rằng có bản cập nhật trong biểu tượng đã cài đặt của PWA

Thông báo cập nhật được hiển thị trong DOM..

Tìm hiểu thêm về API Huy hiệu

API Huy hiệu cho phép bạn đánh dấu biểu tượng của PWA bằng số huy hiệu hoặc dấu chấm huy hiệu trên các trình duyệt tương thích. Dấu chấm huy hiệu là một dấu nhỏ trong biểu tượng đã cài đặt, cho biết có nội dung nào đó đang chờ bạn trong ứng dụng.

Ví dụ về Twitter có 8 thông báo và một ứng dụng khác hiển thị huy hiệu loại cờ.

Bạn cần gọi setAppBadge(count) trên đối tượng navigator để đặt số huy hiệu. Bạn có thể thực hiện việc này từ ngữ cảnh của cửa sổ hoặc trình chạy dịch vụ khi biết có bản cập nhật cần thông báo cho người dùng.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

Để xoá huy hiệu, bạn gọi clearAppBadge() trên cùng một đối tượng:

navigator.clearAppBadge();

Tài nguyên