Cách ZDF tạo PWA video có chế độ tối và ngoại tuyến

Tìm hiểu cách ZDF tạo ra một ứng dụng web tiến bộ (PWA) có các tính năng hiện đại như hỗ trợ ngoại tuyến, khả năng cài đặt và chế độ tối.

Martin Schierle

Scott Friesen

Khi đài phát sóng ZDF đang cân nhắc việc thiết kế lại công nghệ giao diện người dùng của họ ngăn xếp, họ quyết định xem xét kỹ hơn Ứng dụng web tiến bộ cho trang web phát trực tuyến ZDFmediathek. Cơ quan phát triển Cellular đã chấp nhận thách thức để xây dựng mạng di động dựa trên nền tảng web tương đương với ứng dụng dành riêng cho nền tảng iOS và Android của ZDF. Chiến lược phát hành đĩa đơn PWA cung cấp khả năng cài đặt, phát video ngoại tuyến, ảnh động chuyển đổi và chế độ tối.

Thêm trình chạy dịch vụ

Một tính năng chính của PWA là hỗ trợ ngoại tuyến. Đối với ZDF, hầu hết những công việc khó khăn được thực hiện bằng cách Workbox (Hộp làm việc), một tập hợp các thư viện và các mô-đun Nút giúp dễ dàng hỗ trợ nhiều chiến lược lưu vào bộ nhớ đệm. Chiến lược phát hành đĩa đơn ZDF PWA được xây dựng bằng TypeScript và React nên ứng dụng này sử dụng thư viện Workbox đã được tích hợp vào create-react-app để nội dung tĩnh lưu trước trong bộ nhớ đệm. Điều này cho phép ứng dụng tập trung vào việc tạo ra các nội dung có thể sử dụng khi không có mạng, trong trường hợp này là video và siêu dữ liệu của video.

Ý tưởng cơ bản khá đơn giản: tìm nạp video và lưu trữ dưới dạng một blob trong IndexedDB. Sau đó, trong khi phát, hãy nghe các sự kiện trực tuyến/ngoại tuyến và chuyển sang phiên bản đã tải xuống khi thiết bị không có kết nối mạng.

Thật không may, mọi thứ trở nên phức tạp hơn một chút. Một trong những dự án yêu cầu là sử dụng trình phát trên web ZDF chính thức mà không cung cấp bất kỳ hỗ trợ ngoại tuyến. Người chơi lấy Content ID làm dữ liệu đầu vào, yêu cầu API ZDF, và phát lại video có liên quan.

Đây là lúc một trong những tính năng mạnh mẽ nhất của web xuất hiện: service worker.

Trình chạy dịch vụ có thể chặn nhiều yêu cầu khác nhau mà trình phát thực hiện và phản hồi bằng dữ liệu từ IndexedDB. Tính năng này sẽ thêm nội dung ngoại tuyến một cách minh bạch mà không phải thay đổi một dòng mã của người chơi.

Vì video ngoại tuyến thường có kích thước khá lớn, nên một câu hỏi lớn là số lượng video thực sự có thể được lưu trữ trên một thiết bị. Với sự trợ giúp của StorageManager API mà ứng dụng có thể ước tính dung lượng trống và thông báo cho người dùng khi không có đủ dung lượng trước bắt đầu tải xuống. Rất tiếc, Safari không có trong danh sách trình duyệt triển khai API này và tại thời điểm viết bài, vẫn chưa có nhiều thông tin cập nhật thông tin về cách các trình duyệt khác áp dụng hạn mức. Do đó, nhóm đã viết một tiện ích nhỏ để kiểm tra hành vi trên các thiết bị khác nhau. Hiện tại, công cụ này toàn diện Bài viết tổng hợp tất cả chi tiết.

Thêm lời nhắc cài đặt tuỳ chỉnh

PWA ZDF cung cấp quy trình cài đặt trong ứng dụng tuỳ chỉnh và nhắc người dùng cài đặt ứng dụng ngay khi họ muốn tải video đầu tiên xuống. Đây là một thời điểm thích hợp để nhắc cài đặt vì người dùng đã thể hiện rõ ý định sử dụng ứng dụng khi không có mạng.

Xây dựng trang ngoại tuyến để truy cập vào nội dung tải xuống

Khi thiết bị không kết nối với Internet và người dùng chuyển đến không hoạt động ở chế độ ngoại tuyến, một trang đặc biệt sẽ được hiển thị liệt kê tất cả video đã được tải xuống trước đây hoặc (trong trường hợp không có nội dung nào đã được tải xuống) một phần giải thích ngắn gọn về tính năng ngoại tuyến.

Sử dụng tốc độ tải khung hình cho các tính năng thích ứng

Để mang lại trải nghiệm phong phú cho người dùng, PWA ZDF bao gồm một số chuyển đổi tinh tế xảy ra khi người dùng cuộn hoặc điều hướng. Trên các thiết bị cấp thấp như ảnh động thường có hiệu ứng ngược lại khiến ứng dụng hoạt động chậm và phản hồi kém hơn nếu chúng không chạy ở tốc độ 60 khung hình/giây. Để đưa thông tin này vào ứng dụng đo tốc độ khung hình thực tế qua requestAnimationFrame() trong khi ứng dụng sẽ tải và tắt tất cả ảnh động khi giá trị giảm xuống dưới ngưỡng nhất định.

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

Ngay cả khi phép đo này chỉ cung cấp số liệu ước tính về hiệu suất và thay đổi theo mỗi lần tải, đây vẫn là một cơ sở tốt để ra quyết định. Xin lưu ý rằng tuỳ thuộc vào trường hợp sử dụng, các kỹ thuật khác để tải thích ứng mà nhà phát triển có thể triển khai. Một ưu điểm lớn của phương pháp này là có sẵn trên tất cả các nền tảng.

Chế độ tối

Một tính năng phổ biến cho trải nghiệm hiện đại trên thiết bị di động là chế độ tối. Đặc biệt khi khi xem video trong điều kiện ánh sáng yếu, nhiều người thích giao diện người dùng được làm mờ. PWA ZDF không chỉ cung cấp công tắc cho phép người dùng chuyển đổi giữa đèn và giao diện tối, thì giao diện này cũng phản ứng với các thay đổi về lựa chọn ưu tiên về màu sắc trên toàn hệ điều hành. Lối này ứng dụng sẽ tự động thay đổi giao diện trên các thiết bị đã thiết lập để thay đổi chủ đề dựa trên thời gian trong ngày.

Kết quả

Ứng dụng web tiến bộ mới đã tự động ra mắt dưới dạng phiên bản thử nghiệm công khai vào tháng 3 năm 2020 và nhận được rất nhiều phản hồi tích cực kể từ đó. Trong giai đoạn thử nghiệm beta tiếp tục, PWA vẫn chạy trong miền tạm thời của riêng nó. Mặc dù PWA không được quảng bá công khai, nhưng số lượng người dùng ngày càng tăng đều đặn. Nhiều trong số này đến từ Microsoft Store, nơi người dùng Windows 10 có thể khám phá PWA và cài đặt chúng như các ứng dụng dành riêng cho nền tảng.

Tiếp theo là gì?

ZDF dự định tiếp tục bổ sung các tính năng vào PWA, bao gồm cả tính năng đăng nhập cho cá nhân hoá, xem trên nhiều thiết bị và nền tảng cũng như thông báo đẩy.