Cập nhật

Bạn đã xuất bản PWA của mình: một số người dùng dùng PWA trên 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 phải á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 thiết bị.
  • Tệp trình chạy dịch vụ hoặc các phần phụ thuộc của tệp đó.
  • 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ố này.

Đ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 nào đó, hãy nhớ luôn cập nhật dữ liệu hỗ trợ tính năng đó.

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

  • Đồng bộ hoá trong nền: lưu các yêu cầu không thành công và thử lại bằng cách sử dụng tính năng đồng bộ hoá trên trình chạy dịch vụ.
  • Đồng bộ hoá định kỳ dưới nền trên web: đồng bộ hoá dữ liệu định kỳ trong nền, vào những 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 đã đóng.
  • Đẩy trên web: gửi 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 cần được người dùng cho phép.

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 tính năng 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 để bàn. Khi sử dụng một trong các API này, bạn có thể chạy mã trong luồng worker 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 nội dung

Quá trình cập nhật thành phần bao gồm mọi thay đổi đối với những tệp mà bạn sử 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, một hình ảnh là một phần của giao diện hoặc một biểu định kiểu CSS.

Cập nhật các mẫu

Sau đây là một số mẫu phổ biến để xử lý 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ù là một thay đổi nhỏ, sẽ kích hoạt quá trình thay thế toàn bộ nội dung trong 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ý các bản cập nhật nên sẽ tốn nhiều băng thông hơn và tốn nhiều thời gian hơn.
  • Cập nhật nội dung đã thay đổi: chỉ những nội dung đã thay đổi kể từ lần cập nhật gần đây nhất mới được thay thế trong bộ nhớ đệm. Việc này thường được triển khai bằng một thư viện như Workbox. Công cụ này bao gồm việc tạo một danh sách các tệp được lưu vào bộ nhớ đệm, một giá trị biểu diễn 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ụ sẽ so sánh danh sách này với các nội dung đã 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 thành phần: mỗi thành phần được cập nhật riêng lẻ khi có thay đổi. Việc cập nhật từng tài sản trong khi xác thực lại chiến lược được mô tả trong chương Phân phát là một ví dụ về việc cập nhật từng tài sả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 bản cập nhật và áp dụng chúng. Dưới đây là một số tùy chọn:

  • Khi nhân viên dịch vụ thức dậy. Không có sự kiện nào để theo dõi tại thời điểm 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 duyệt hoạt động.
  • Để tránh làm cho ứng dụng tải chậm hơn, trong ngữ cảnh cửa sổ chính của PWA, sau khi trình duyệt tải trang.
  • Khi sự kiện trong nền được kích hoạt, chẳng hạn như khi PWA của bạn nhận được thông báo đẩy hoặc tính năng đồng bộ hoá trong nền sẽ kích hoạt. Sau đó, bạn có thể cập nhật bộ nhớ đệm và người dùng của bạn sẽ có 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 khép kín ứng dụng, mặc dù đã tải các thành phần mới xuống nhưng ứng dụng sẽ không thực hiện 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.

Bản cập nhật trực tiếp có nghĩa là ngay sau khi tài sản được cập nhật trong bộ nhớ đệm, PWA sẽ thay thế tài sản trong lượt 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 bản cập nhật này là livereload-js và API CSSStyleSheet.replace() cập nhật tài sản CSS.

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 thay đổi. Trình duyệt phát hiện các bản cập nhật bằng cách so sánh theo từng byte giữa các tệp được lưu trong bộ nhớ đệm và tài nguyê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ư mô tả trong chương của Trình chạy dịch vụ. Quá trình 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 tài sản vào bộ nhớ đệm trong trình xử lý sự kiện đó, thì các tài sản cũng sẽ được lưu lại vào bộ nhớ đệm.

Phát hiện các thay đổi đối với 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ẽ sử dụng sự kiện updatefound trong 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 lớp này thay đổi thành installed cùng với sự kiện statechange; hãy xem những thông tin 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ờ này ngăn 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, 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 sẽ 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 bước chờ và trở thành worker mới.

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

Đang 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, siêu dữ liệu này chủ yếu được thiết lập 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 một tính năng mới như lối tắt ứng dụng. Nhưng điều gì 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ọ? Cách thức và thời điểm họ nhận được phiên bản cập nhật?

Câu trả lời phụ thuộc vào nền tảng đó. Hãy xem 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 các 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. Hãy xem thông tin chi tiết trong bài viết cập nhật tệp kê khai này.

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

Nếu người dùng không mở PWA của bạn, WebAPK của bạn 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 (có lỗi 404), 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 vào about:webapks trong Chrome trên Android để xem trạng thái của cờ "cần cập nhật" 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.

Internet của Samsung trên Android với WebAPK

Quá trình này tương tự như trong 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 24 giờ tới, WebAPK sẽ được cập nhật trên Wi-Fi sau khi tạo 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 chạy, trình duyệt sẽ xác định lần gần đây nhất kiểm tra tệp kê khai cục bộ để tìm các thay đổi. Nếu tệp kê khai chưa được xem xét kể từ lần gần 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ẽ gửi yêu cầu mạng cho tệp kê khai rồi so sánh tệp kê khai đó với bản sao cục bộ.

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

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 điều hướng mới từ ứng dụng. Bạn nên thông báo cho người dùng rằng có bản cập nhật đang chờ 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 với họ.

Có các cách sau đây để thông báo cho người dùng:

  • Sử dụng DOM hoặc canvas API để hiển thị thông báo trên màn hình.
  • Sử 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 trên web để sử dụng, 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 mà chúng tôi có nếu không mở PWA.
  • Sử 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 xuất hiện 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 hiệu nhỏ trong biểu tượng đã cài đặt, thể hiện 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ó một bản cập nhật để 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