Tối ưu hóa PWA cho nhiều chế độ hiển thị khác nhau

• Progressive Web App (PWA) là một công cụ mạnh mẽ giúp ứng dụng web mang lại cảm giác như ứng dụng native, đồng thời có thể tối ưu trải nghiệm người dùng thông qua nhiều chế độ hiển thị khác nhau
• Chế độ hiển thị được cấu hình trong tệp manifest của PWA sẽ điều chỉnh mức độ hiển thị của UI trình duyệt, và có thể tinh chỉnh giao diện người dùng theo từng chế độ để giảm khác biệt giữa trải nghiệm web và ứng dụng
• Có thể dùng CSS media query và JavaScript để điều chỉnh nội dung và tính năng theo từng chế độ hiển thị, từ đó cung cấp trải nghiệm tùy biến phù hợp với nhu cầu người dùng
• Người dùng PWA và khách truy cập website thông thường có kỳ vọng khác nhau, vì vậy cần tối ưu điều hướng, lời nhắc cài đặt và nội dung tùy theo chế độ hiển thị
• Tối ưu theo từng chế độ hiển thị giúp PWA trở nên tinh tế hơn và giống ứng dụng hơn, đồng thời là kỹ thuật quan trọng để nâng cao trải nghiệm ứng dụng trên web

---

Chế độ hiển thị của PWA và nhu cầu tối ưu hóa

• PWA là công nghệ triển khai ứng dụng web theo cách giống ứng dụng native, nhưng khi thoát khỏi môi trường trình duyệt có thể phát sinh vấn đề về khả năng sử dụng
  • Có thể mất các chức năng do trình duyệt cung cấp như quay lại, làm mới, sao chép URL
  • Một số yếu tố phù hợp với website có thể trở nên thiếu tự nhiên trong môi trường ứng dụng
• Các chế độ hiển thị có thể cấu hình trong tệp manifest gồm
  • fullscreen: Ẩn toàn bộ UI trình duyệt và sử dụng toàn màn hình
  • standalone: Ẩn các điều khiển trình duyệt và hiển thị như ứng dụng native
  • minimal-ui: Hiển thị số ít thành phần UI trình duyệt cần thiết
  • browser: Cung cấp giao diện trình duyệt tiêu chuẩn
• Khi UI trình duyệt bị ẩn, trải nghiệm người dùng có thể bị ảnh hưởng, nên tối ưu theo từng chế độ hiển thị là điều bắt buộc

Tận dụng media query cho chế độ hiển thị

• Có thể dùng media query để điều chỉnh style và tính năng theo chế độ hiển thị
  • Ví dụ: @media (display-mode: standalone) chỉ áp dụng trong chế độ standalone
  • Hỗ trợ các query tương ứng cho fullscreen, minimal-ui, browser
• Hai chế độ thử nghiệm là window-controls-overlay và tabbed có thể được thiết lập theo thứ tự tùy chỉnh thông qua display_override
  • window-controls-overlay: Hiển thị các nút điều khiển cửa sổ dưới dạng overlay trên desktop
  • tabbed: Hỗ trợ nhiều môi trường ứng dụng trong một cửa sổ duy nhất
• Có thể dùng JavaScript để kiểm tra chế độ hiển thị và điều chỉnh động
  • Ví dụ: kiểm tra chế độ hiện tại bằng window.matchMedia("(display-mode: standalone)").matches
  • Có thể phát hiện sự kiện khi chế độ thay đổi để điều chỉnh UI động

Các trường hợp áp dụng thực tế

• Nội dung tùy biến cho người dùng PWA: người đã cài đặt PWA là người dùng đã chuyển đổi, nên có thể giảm nội dung marketing và tập trung vào trải nghiệm người dùng
  • Có thể ẩn các yếu tố không cần thiết như lời nhắc cài đặt
• Cung cấp tùy chọn bổ sung: khi không có UI trình duyệt, cần có phương án thay thế trong ứng dụng cho việc chỉnh cỡ chữ, chuyển sáng/tối, chia sẻ, v.v.
• Tính năng phù hợp với nền tảng: thanh điều hướng dưới cùng vốn phổ biến trong ứng dụng native trên di động phù hợp với PWA nhưng lại thiếu tự nhiên trên website
  • Các tính năng như nút in nên được ẩn trong chế độ PWA
• Quản lý lời nhắc cài đặt: cần kiểm soát bằng media query hoặc JavaScript để lời nhắc cài đặt không xuất hiện trong PWA đã cài đặt
  • Ví dụ: dùng lớp tiện ích .hide-in-pwa để ẩn phần tử trong chế độ PWA
• Chiến lược scope và start_url: dùng scope và start_url để phân biệt nội dung giữa môi trường PWA và web
  • scope: xác định đường dẫn cấp cao nhất của PWA; nếu ra ngoài phạm vi này thì UI trình duyệt sẽ hiển thị
  • start_url: chỉ định trang hiển thị khi khởi chạy ứng dụng, ví dụ đi thẳng tới dashboard
• Tăng cường chuyển đổi view: áp dụng hiệu ứng chuyển view vốn phổ biến trong ứng dụng native riêng cho PWA
  • Ví dụ: cấu hình CSS chuyển view bên trong @media (display-mode: standalone)

Hỗ trợ trình duyệt và kiểm thử

• Media query cho chế độ hiển thị được hỗ trợ rộng rãi trên phần lớn trình duyệt
  • Firefox không hỗ trợ PWA, còn Firefox trên Android chỉ hiển thị ở chế độ browser
  • Có thể đảm bảo suy giảm tự nhiên trên trình duyệt không hỗ trợ thông qua progressive enhancement
• Việc kiểm thử cần được thực hiện trong nhiều môi trường vì hành vi khác nhau theo từng thiết bị và trình duyệt
  • Trình duyệt không cung cấp mô phỏng chế độ hiển thị, nên cần kiểm thử bằng tổ hợp thiết bị và hệ điều hành thực tế

Tóm tắt và hàm ý

• Có thể dùng media query display-mode để mang lại trải nghiệm thích ứng cho PWA theo ngữ cảnh cài đặt và hiển thị
  • Có thể ẩn lời nhắc cài đặt, hỗ trợ điều hướng, cá nhân hóa nội dung, tăng cảm giác native và cải tiến dần theo thời gian
• Người dùng PWA có nhu cầu và kỳ vọng khác với khách truy cập web thông thường, nên cần điều chỉnh cẩn thận theo chế độ hiển thị
• PWA càng trưởng thành thì việc triển khai tỉ mỉ và tối ưu hóa càng trở thành yếu tố cốt lõi để tạo ra trải nghiệm ứng dụng hấp dẫn
• Để biết thêm thông tin, nên tham khảo “Extensive Guide To Progressive Web Applications” của Smashing Magazine

[ndrgrd]

Firefox cũng đã bắt đầu hỗ trợ lại PWA trên nightly. Sắp tới sẽ được thêm vào cả bản stable.

[draupnir]

Vì phải dùng qua kênh là trình duyệt nên tôi luôn ưu tiên native, nhưng mỗi khi thấy câu chuyện về PWA thì lúc nào cũng thấy thú vị.
Cùng theo đuổi việc tối ưu hóa, nhưng khác hướng đi…