Tạo trải nghiệm toàn màn hình

Chúng tôi có thể dễ dàng tạo ra các trang web và ứng dụng toàn màn hình sống động, nhưng giống như mọi thứ trên web, có một vài cách để làm điều đó. Điều đặc biệt quan trọng hiện nay là ngày càng có nhiều trình duyệt hỗ trợ trải nghiệm "ứng dụng web đã cài đặt" chạy ở chế độ toàn màn hình.

Đặt ứng dụng hoặc trang web ở chế độ toàn màn hình

Có một số cách để người dùng hoặc nhà phát triển có thể chuyển ứng dụng web sang chế độ toàn màn hình.

  • Yêu cầu trình duyệt chuyển sang chế độ toàn màn hình để phản hồi cử chỉ của người dùng.
  • Cài đặt ứng dụng vào màn hình chính.
  • Làm giả: tự động ẩn thanh địa chỉ.

Yêu cầu trình duyệt chuyển sang chế độ toàn màn hình để phản hồi cử chỉ của người dùng

Không phải tất cả các nền tảng đều như nhau. iOS Safari không có API toàn màn hình, nhưng chúng tôi có trên Chrome trên Android, Firefox và IE 11 trở lên. Hầu hết các ứng dụng bạn tạo sẽ sử dụng kết hợp API JS và bộ chọn CSS do thông số kỹ thuật toàn màn hình cung cấp. API JS chính mà bạn cần quan tâm khi tạo trải nghiệm toàn màn hình là:

  • element.requestFullscreen() (hiện có tiền tố trong Chrome, Firefox và IE) hiển thị phần tử này ở chế độ toàn màn hình.
  • document.exitFullscreen() (hiện có tiền tố trong Chrome, Firefox và IE. Thay vào đó, Firefox sử dụng cancelFullScreen()) huỷ chế độ toàn màn hình.
  • document.fullscreenElement (hiện có tiền tố là Chrome, Firefox và IE) trả về giá trị true nếu có bất kỳ phần tử nào ở chế độ toàn màn hình.

Khi ứng dụng ở chế độ toàn màn hình, bạn sẽ không thể sử dụng các nút điều khiển trên giao diện người dùng của trình duyệt nữa. Điều này thay đổi cách người dùng tương tác với trải nghiệm của bạn. Các nút điều khiển điều hướng này không có các nút điều khiển điều hướng tiêu chuẩn như Tiến và lùi; chúng không có lối thoát là nút Làm mới. Điều quan trọng là phải phục vụ cho trường hợp này. Bạn có thể sử dụng một số bộ chọn CSS để giúp thay đổi kiểu và cách trình bày của trang web khi trình duyệt chuyển sang chế độ toàn màn hình.

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

Ví dụ trên hơi phức tạp; tôi đã ẩn tất cả sự phức tạp về việc sử dụng tiền tố nhà cung cấp.

Mã thực tế phức tạp hơn nhiều. Mozilla đã tạo một tập lệnh rất hữu ích mà bạn có thể sử dụng để bật/tắt chế độ toàn màn hình. Như bạn có thể thấy, tình huống của tiền tố nhà cung cấp phức tạp và cồng kềnh so với API được chỉ định. Ngay cả với mã được đơn giản hoá một chút dưới đây, mã này vẫn phức tạp.

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

Chúng tôi các nhà phát triển web ghét sự phức tạp. Một API trừu tượng cấp cao tuyệt vời mà bạn có thể sử dụng là mô-đun Screenfull.js của Sindre Sorhus hợp nhất hai tiền tố nhà cung cấp và API JS hơi khác nhau thành một API nhất quán.

Mẹo về API toàn màn hình

Chuyển tài liệu sang chế độ toàn màn hình
Toàn màn hình trên phần tử nội dung
Hình 1: Toàn màn hình trên phần tử nội dung.

Đương nhiên là khi bạn cho rằng phần tử nội dung đang ở chế độ toàn màn hình, nhưng nếu sử dụng công cụ kết xuất hình ảnh dựa trên Tin nhắn hoặc Blink, bạn sẽ thấy công cụ này có tác dụng kỳ lạ là thu nhỏ chiều rộng nội dung về kích thước nhỏ nhất có thể chứa tất cả nội dung. (Tắc kè Mozilla vẫn khoẻ.)

Toàn màn hình trên phần tử tài liệu
Hình 2: Toàn màn hình trên phần tử tài liệu.

Để khắc phục vấn đề này, hãy sử dụng thành phần tài liệu thay vì thành phần nội dung:

document.documentElement.requestFullscreen();
Tạo phần tử video toàn màn hình

Việc làm cho một phần tử video chạy ở chế độ toàn màn hình cũng giống như cách tạo mọi phần tử khác ở chế độ toàn màn hình. Bạn gọi phương thức requestFullscreen trên phần tử video.

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

Nếu phần tử <video> của bạn không xác định thuộc tính điều khiển, thì người dùng sẽ không có cách nào để điều khiển video khi video ở chế độ toàn màn hình. Bạn nên làm việc này bằng cách có một vùng chứa cơ bản bao bọc video và các chế độ điều khiển mà bạn muốn người dùng thấy.

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

Cách này giúp bạn linh hoạt hơn nhiều vì bạn có thể kết hợp đối tượng vùng chứa với bộ chọn giả CSS (ví dụ: để ẩn nút "goFS").

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

Khi sử dụng các mẫu này, bạn có thể phát hiện thời điểm chế độ toàn màn hình đang chạy và điều chỉnh giao diện người dùng cho phù hợp, ví dụ:

  • Bằng cách cung cấp một đường liên kết quay lại trang chủ
  • Bằng cách cung cấp cơ chế đóng hộp thoại hoặc di chuyển ngược

Khởi chạy một trang ở chế độ toàn màn hình từ màn hình chính

Không thể khởi chạy trang web toàn màn hình khi người dùng điều hướng đến trang đó. Các nhà cung cấp trình duyệt biết rằng trải nghiệm toàn màn hình trong mỗi lần tải trang là một sự phiền toái rất lớn, do đó, cần có cử chỉ của người dùng để chuyển sang chế độ toàn màn hình. Tuy nhiên, nhà cung cấp cho phép người dùng "cài đặt" ứng dụng, và hành động cài đặt là tín hiệu cho hệ điều hành mà người dùng muốn khởi chạy dưới dạng một ứng dụng trên nền tảng.

Trên các nền tảng di động chính, bạn có thể dễ dàng triển khai bằng cách sử dụng thẻ meta hoặc tệp kê khai như sau.

iOS

Kể từ khi iPhone ra mắt, người dùng có thể cài đặt Ứng dụng web vào màn hình chính và khởi chạy dưới dạng ứng dụng web toàn màn hình.

<meta name="apple-mobile-web-app-capable" content="yes" />

Nếu bạn đặt nội dung thành có, thì ứng dụng web sẽ chạy ở chế độ toàn màn hình, còn nếu không thì ứng dụng sẽ không chạy. Hành vi mặc định là sử dụng Safari để hiển thị nội dung web. Bạn có thể xác định xem một trang web có hiển thị ở chế độ toàn màn hình hay không bằng cách sử dụng thuộc tính JavaScript Boolean JavaScript window.navigation.standalone chỉ đọc.

Táo

Chrome dành cho Android

Gần đây, nhóm Chrome đã triển khai một tính năng yêu cầu trình duyệt mở trang ở chế độ toàn màn hình khi người dùng đã thêm trang đó vào màn hình chính. Mô hình này tương tự như mô hình Safari trên iOS.

<meta name="mobile-web-app-capable" content="yes" />

Bạn có thể thiết lập ứng dụng web của mình để thêm biểu tượng lối tắt ứng dụng vào màn hình chính của thiết bị và khởi chạy ứng dụng ở "chế độ ứng dụng" toàn màn hình bằng mục trình đơn "Thêm vào Màn hình chính" của Chrome dành cho Android.

Google Chrome

Một lựa chọn tốt hơn là sử dụng Tệp kê khai ứng dụng web.

Tệp kê khai ứng dụng web (Chrome, Opera, Firefox, Samsung)

Tệp kê khai cho các ứng dụng web là một tệp JSON đơn giản cung cấp cho nhà phát triển khả năng kiểm soát cách ứng dụng hiển thị với người dùng ở những khu vực mà họ muốn xem ứng dụng (ví dụ: màn hình chính của thiết bị di động), chỉ dẫn nội dung mà người dùng có thể khởi chạy và quan trọng hơn là cách họ có thể chạy ứng dụng. Trong tương lai, tệp kê khai sẽ cung cấp cho bạn nhiều quyền kiểm soát hơn nữa đối với ứng dụng của mình, nhưng hiện tại, chúng tôi chỉ tập trung vào cách khởi chạy ứng dụng của bạn. Cụ thể:

  1. Thông báo cho trình duyệt về tệp kê khai của bạn
  2. Mô tả cách khởi chạy

Sau khi tạo và lưu trữ tệp kê khai trên trang web, bạn chỉ cần thêm một thẻ liên kết từ mọi trang có chứa ứng dụng của mình, như sau:

<link rel="manifest" href="/manifest.json" />

Chrome hỗ trợ Tệp kê khai kể từ phiên bản 38 dành cho Android (tháng 10 năm 2014) và cho phép bạn kiểm soát cách ứng dụng web của bạn xuất hiện khi được cài đặt trên màn hình chính (thông qua các thuộc tính short_name, name và icons) cũng như cách khởi chạy ứng dụng khi người dùng nhấp vào biểu tượng khởi chạy (thông qua start_url, display và orientation).

Dưới đây là một tệp kê khai mẫu. Nó không hiển thị mọi thứ có thể có trong một tệp kê khai.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Tính năng này là hoàn toàn tiến bộ và cho phép bạn tạo ra trải nghiệm tốt hơn, tích hợp hơn cho người dùng trình duyệt hỗ trợ tính năng này.

Khi người dùng thêm trang web hoặc ứng dụng của bạn vào màn hình chính, người dùng sẽ có ý định coi trang web hoặc ứng dụng đó như một ứng dụng. Tức là bạn nên hướng người dùng đến chức năng của ứng dụng thay vì đến trang đích của sản phẩm. Ví dụ: nếu người dùng được yêu cầu đăng nhập vào ứng dụng của bạn, thì đó là trang thích hợp để khởi chạy.

Ứng dụng tiện ích

Phần lớn các ứng dụng tiện ích sẽ được hưởng lợi ngay lập tức. Đối với những ứng dụng đó, có thể bạn sẽ muốn chúng chạy độc lập giống như mọi ứng dụng khác trên nền tảng di động. Để yêu cầu một ứng dụng khởi chạy độc lập, hãy thêm Tệp kê khai ứng dụng web sau:

    "display": "standalone"
Trò chơi

Phần lớn trò chơi sẽ được hưởng lợi ngay từ tệp kê khai. Hầu hết các trò chơi đều muốn chạy chế độ toàn màn hình và buộc phải có một hướng cụ thể.

Nếu đang phát triển một trình cuộn dọc hoặc một trò chơi như Flappy Bird, thì rất có thể bạn muốn trò chơi của mình luôn ở chế độ dọc.

    "display": "fullscreen",
    "orientation": "portrait"

Mặt khác, nếu đang xây dựng một trò chơi giải đố hoặc một trò chơi như X-Com, thì có thể bạn muốn trò chơi luôn sử dụng hướng ngang.

    "display": "fullscreen",
    "orientation": "landscape"
Trang web tin tức

Các trang web tin tức trong hầu hết các trường hợp là trải nghiệm dựa trên nội dung thuần tuý. Hầu hết các nhà phát triển đều không nghĩ đến việc thêm tệp kê khai vào trang web tin tức. Tệp kê khai sẽ cho phép bạn xác định nội dung cần khởi chạy (trang chủ của trang web tin tức) và cách khởi chạy nội dung đó (toàn màn hình hoặc dưới dạng thẻ trình duyệt thông thường).

Bạn có toàn quyền quyết định và cho rằng người dùng muốn truy cập vào trải nghiệm của bạn. Nếu muốn trang web của mình có tất cả trình duyệt Chrome mà bạn mong muốn một trang web cũng có, bạn có thể đặt giao diện thành browser.

    "display": "browser"

Nếu bạn muốn trang web tin tức của mình trông giống như phần lớn ứng dụng tập trung vào tin tức coi trải nghiệm của họ là ứng dụng và xoá tất cả Chrome giống như web khỏi giao diện người dùng, bạn có thể thực hiện việc này bằng cách đặt chế độ hiển thị thành standalone.

    "display": "standalone"

Làm giả: tự động ẩn thanh địa chỉ

Bạn có thể "giả mạo toàn màn hình" bằng cách tự động ẩn thanh địa chỉ như sau:

window.scrollTo(0, 1);

Đây là một phương thức khá đơn giản, trang sẽ tải và thanh trình duyệt được yêu cầu thoát ra. Rất tiếc, mã này không được chuẩn hoá và không được hỗ trợ hiệu quả. Bạn cũng phải tìm cách giải quyết một loạt những điều kỳ quặc.

Ví dụ: các trình duyệt thường khôi phục vị trí trên trang khi người dùng quay lại trang đó. Việc sử dụng window.scrollTo sẽ ghi đè thuộc tính này, điều này gây khó chịu cho người dùng. Để giải quyết vấn đề này, bạn phải lưu trữ vị trí cuối cùng trong localStorage và xử lý các trường hợp hiếm gặp (ví dụ: nếu người dùng mở trang trong nhiều cửa sổ).

Nguyên tắc về trải nghiệm người dùng

Khi xây dựng một trang web tận dụng toàn màn hình, có một số thay đổi tiềm năng về trải nghiệm người dùng mà bạn cần biết để có thể xây dựng một dịch vụ mà người dùng sẽ yêu thích.

Không phụ thuộc vào các tuỳ chọn điều khiển di chuyển

iOS không có nút quay lại phần cứng hoặc cử chỉ làm mới. Do đó, bạn phải đảm bảo rằng người dùng có thể di chuyển trong ứng dụng mà không bị khoá.

Bạn có thể phát hiện dễ dàng xem mình đang chạy ở chế độ toàn màn hình hay chế độ đã cài đặt trên tất cả các nền tảng chính.

iOS

Trên iOS, bạn có thể sử dụng boolean navigator.standalone để xem người dùng đã khởi chạy từ màn hình chính hay chưa.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Tệp kê khai ứng dụng web (Chrome, Opera, Samsung)

Khi chạy dưới dạng một ứng dụng đã cài đặt, Chrome sẽ không chạy ở trải nghiệm toàn màn hình thực sự. Vì vậy, document.fullscreenElement trả về giá trị rỗng và bộ chọn CSS không hoạt động.

Khi người dùng yêu cầu chế độ toàn màn hình thông qua một cử chỉ trên trang web của bạn, API toàn màn hình tiêu chuẩn sẽ có sẵn, bao gồm cả bộ chọn giả CSS cho phép bạn điều chỉnh giao diện người dùng để phản ứng với trạng thái toàn màn hình như sau

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Nếu người dùng khởi chạy trang web của bạn từ màn hình chính, truy vấn phương tiện display-mode sẽ được đặt thành nội dung đã xác định trong Tệp kê khai ứng dụng web. Trong trường hợp hoàn toàn toàn màn hình, chế độ xem sẽ là:

@media (display-mode: fullscreen) {
}

Nếu người dùng chạy ứng dụng ở chế độ độc lập, truy vấn nội dung đa phương tiện display-mode sẽ là standalone:

@media (display-mode: standalone) {
}

Firefox

Khi người dùng yêu cầu chế độ toàn màn hình thông qua trang web của bạn hoặc người dùng chạy ứng dụng ở chế độ toàn màn hình, tất cả API toàn màn hình tiêu chuẩn đều có sẵn, bao gồm cả bộ chọn giả CSS, cho phép bạn điều chỉnh giao diện người dùng để phản ứng với trạng thái toàn màn hình như sau:

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

Trong IE, lớp giả CSS thiếu dấu gạch nối, còn lại thì hoạt động tương tự như Chrome và Firefox.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Thông số kỹ thuật

Chính tả trong phần thông số kỹ thuật khớp với cú pháp mà IE sử dụng.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Giữ người dùng ở chế độ toàn màn hình

API toàn màn hình đôi khi có thể hơi phức tạp. Các nhà cung cấp trình duyệt không muốn khoá người dùng ở trang toàn màn hình, nên họ đã phát triển các cơ chế để thoát khỏi chế độ toàn màn hình càng sớm càng tốt. Điều này có nghĩa là bạn không thể tạo trang web toàn màn hình trải qua nhiều trang vì:

  • Việc thay đổi URL theo phương thức lập trình bằng cách sử dụng window.location = "http://example.com" sẽ thoát ra khỏi chế độ toàn màn hình.
  • Người dùng nhấp vào đường liên kết ngoài bên trong trang của bạn sẽ thoát khỏi chế độ toàn màn hình.
  • Việc thay đổi URL thông qua API navigator.pushState cũng sẽ thoát khỏi trải nghiệm toàn màn hình.

Nếu muốn giữ người dùng ở chế độ toàn màn hình, bạn có hai lựa chọn:

  1. Sử dụng cơ chế ứng dụng web có thể cài đặt để chuyển sang chế độ toàn màn hình.
  2. Quản lý giao diện người dùng và trạng thái ứng dụng bằng mảnh #.

Bằng cách sử dụng #syntax để cập nhật URL (window.location = "#somestate") và lắng nghe sự kiện window.onhashchange, bạn có thể sử dụng ngăn xếp nhật ký của chính trình duyệt để quản lý các thay đổi về trạng thái ứng dụng, cho phép người dùng sử dụng nút quay lại phần cứng hoặc cung cấp trải nghiệm nút quay lại có lập trình đơn giản bằng cách sử dụng API nhật ký như sau:

window.history.go(-1);

Cho phép người dùng chọn thời điểm chuyển sang chế độ toàn màn hình

Không có gì khó chịu hơn cho người dùng so với việc trang web làm điều gì đó ngoài dự kiến. Khi người dùng truy cập vào trang web của bạn, đừng cố gắng lừa họ đưa họ vào chế độ toàn màn hình.

Đừng chặn sự kiện chạm đầu tiên và gọi requestFullscreen().

  1. Điều này gây khó chịu.
  2. Các trình duyệt có thể quyết định nhắc người dùng vào một thời điểm nào đó trong tương lai về việc cho phép ứng dụng chiếm toàn màn hình.

Nếu bạn muốn chạy các ứng dụng ở chế độ toàn màn hình, hãy nghĩ đến việc sử dụng trải nghiệm cài đặt cho từng nền tảng.

Không gửi nội dung rác để người dùng cài đặt ứng dụng của bạn vào màn hình chính

Nếu bạn định cung cấp trải nghiệm toàn màn hình thông qua cơ chế ứng dụng đã cài đặt, hãy quan tâm đến người dùng.

  • Hãy thận trọng. Sử dụng biểu ngữ hoặc chân trang để cho họ biết rằng họ có thể cài đặt ứng dụng.
  • Nếu họ đóng lời nhắc thì không hiện lại lời nhắc đó.
  • Trong lần truy cập đầu tiên của người dùng, họ ít có khả năng muốn cài đặt ứng dụng trừ khi họ hài lòng với dịch vụ của bạn. Hãy cân nhắc nhắc họ cài đặt sau khi họ tương tác tích cực trên trang web của bạn.
  • Nếu người dùng thường xuyên truy cập trang web của bạn và không cài đặt ứng dụng, thì ít có khả năng họ sẽ cài đặt ứng dụng của bạn trong tương lai. Đừng tiếp tục gửi nội dung không liên quan.

Kết luận

Mặc dù chúng tôi không có API được chuẩn hoá và triển khai đầy đủ, nhưng bạn có thể dễ dàng xây dựng những trải nghiệm tận dụng toàn bộ màn hình của người dùng bằng một số hướng dẫn trong bài viết này, bất kể ứng dụng là gì.

Ý kiến phản hồi