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.
Khi đài phát ZDF cân nhắc việc thiết kế lại ngăn xếp công nghệ giao diện người dùng, 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ủa họ. Cơ quan phát triển Cellular (Di động) đã đương đầu với thách thức để xây dựng trải nghiệm dựa trên nền tảng web ngang bằng với các ứng dụng Android và iOS dành riêng cho nền tảng của ZDF. PWA cung cấp khả năng cài đặt, phát video khi không có mạng, ảnh động chuyển đổi và chế độ tối.
Thêm một trình chạy dịch vụ
Tính năng chính của PWA là hỗ trợ ngoại tuyến. Đối với ZDF, hầu hết công việc khó khăn đều được thực hiện thông qua Workbox, một nhóm thư viện và mô-đun nút giúp bạn dễ dàng hỗ trợ nhiều chiến lược lưu vào bộ nhớ đệm. PWA ZDF được xây dựng bằng TypeScript và React, vì vậy, PWA này sử dụng thư viện Workbox đã có sẵn trong create-react-app để tạo các tài sản tĩnh lưu vào bộ nhớ đệm. Điều này cho phép ứng dụng tập trung vào việc cung cấp nội dung độ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ữ video đó dưới dạng 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ứ hoá ra lại phức tạp hơn một chút. Một trong những yêu cầu của dự án là sử dụng trình phát trên web ZDF chính thức không cung cấp tính năng hỗ trợ ngoại tuyến. Trình phát sẽ lấy mã nội dung làm thông tin đầu vào, giao tiếp với API ZDF và phát lại video được liên kết.
Đây chính là lúc một trong những tính năng mạnh mẽ nhất của web sẽ cứu nguy, đó là: service worker.
Trình chạy dịch vụ có thể chặn nhiều yêu cầu do trình phát thực hiện và phản hồi bằng dữ liệu từ IndexedDB. Điều này thêm các tính năng ngoại tuyến một cách rõ ràng 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 khá lớn, nên một câu hỏi lớn là có bao nhiêu video trong số đó 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, ứng dụng có thể ước tính dung lượng hiện có và thông báo cho người dùng khi không còn đủ dung lượng trước khi 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 này, không có nhiều thông tin cập nhật 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 thử hành vi trên nhiều thiết bị. Hiện tại đã có bài viết toàn diện tóm tắt tất cả thông tin chi tiết.
Thêm lời nhắc cài đặt tuỳ chỉnh
ZDF PWA cung cấp quy trình cài đặt tuỳ chỉnh trong ứng dụng 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à thời điểm phù hợp để nhắc cài đặt vì người dùng đã thể hiện rõ ý định 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 một trang không dùng được ở chế độ ngoại tuyến, một trang đặc biệt sẽ hiển thị liệt kê tất cả video đã được tải xuống trước đó hoặc (trong trường hợp chưa tải nội dung nào xuống) thì phần giải thích ngắn gọn về tính năng ngoại tuyến sẽ xuất hiện.
Sử dụng tốc độ tải khung hình cho các tính năng thích ứng
Để cung cấp trải nghiệm phong phú cho người dùng, PWA ZDF có một số hiệu ứng chuyển đổi nhỏ xảy ra khi người dùng cuộn hoặc di chuyển. Trên các thiết bị cấp thấp, các ảnh động như vậy thường có tác động ngược lại và khiến ứng dụng chạy chậm và phản hồi kém hơn nếu các ảnh động đó không chạy ở tốc độ 60 khung hình/giây. Để tính đến điều này, ứng dụng sẽ đo tốc độ khung hình thực tế thông qua requestAnimationFrame() trong khi ứng dụng tải và tắt tất cả ảnh động khi giá trị giảm xuống dưới một 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 kết quả đo lường này chỉ cung cấp thông tin sơ bộ về hiệu suất của thiết bị và thay đổi theo mỗi lần tải, thì đó vẫn là cơ sở tốt để đưa ra quyết định. Điều đáng chú ý là tuỳ thuộc vào trường hợp sử dụng, nhà phát triển có thể triển khai các kỹ thuật khác cho tính năng tải thích ứng. Một ưu điểm lớn của phương pháp này là bạn có thể sử dụng 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 là khi xem video trong điều kiện ánh sáng xung quanh yếu, nhiều người thích giao diện người dùng được làm mờ. ZDF PWA không chỉ cung cấp công tắc cho phép người dùng chuyển đổi giữa giao diện sáng và tối, mà còn 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. Bằng cách này, ứng dụng sẽ tự động thay đổi giao diện trên các thiết bị đã thiết lập lịch biểu để thay đổi giao diện dựa trên thời gian trong ngày.
Kết quả
Ứng dụng web tiến bộ mới đã âm thầm ra mắt dưới dạng phiên bản beta công khai vào tháng 3 năm 2020 và nhận được nhiều phản hồi tích cực kể từ đó. Trong khi 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 vẫn tăng ổn định. Nhiều trong số đó là của Microsoft Store, cho phép người dùng Windows 10 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ả hoạt động đăng nhập để 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.