Chúng ta có thể dễ dàng tạo 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 số cách để thực hiện việc này. Điều này đặc biệt quan trọng khi 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.
Chuyển ứng dụng hoặc trang web sang chế độ toàn màn hình
Người dùng hoặc nhà phát triển có thể mở ứng dụng web ở chế độ toàn màn hình theo một số cách.
- Yêu cầu trình duyệt chuyển sang chế độ toàn màn hình để phản hồi một cử chỉ của người dùng.
- Cài đặt ứng dụng vào màn hình chính.
- Giả mạo: 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 một cử chỉ của người dùng
Không phải nền tảng nào cũng giống nhau. Safari trên iOS 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 ứ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. Các API JS chính mà bạn cần quan tâm khi xây dựng 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ử ở chế độ toàn màn hình.document.exitFullscreen()
(hiện có tiền tố trong Chrome, Firefox và IE. Firefox sử dụngcancelFullScreen()
) huỷ chế độ toàn màn hình.document.fullscreenElement
(hiện có tiền tố trong 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 của bạn ở chế độ toàn màn hình, bạn sẽ không còn sử dụng được các chế độ điều khiển giao diện người dùng của trình duyệt. Đ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 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; không có nút thoát là nút Làm mới. Điều quan trọng là bạn phải đáp ứng được 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 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 gượng ép; tôi đã ẩn tất cả sự phức tạp liên quan đến việc sử dụng tiền tố của 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ể dùng để bật/tắt chế độ toàn màn hình. Như bạn có thể thấy, trường hợp tiền tố của nhà cung cấp rất phức tạp và cồng kềnh so với API được chỉ định. Ngay cả khi mã bên dưới được đơn giản hoá một chút, 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 là nhà phát triển web, chúng tôi ghét sự phức tạp. Một API trừu tượng cấp cao mà bạn có thể sử dụng là mô-đun Screenfull.js của Sindre Sorhus. Mô-đun này 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 chế độ toàn màn hình
Chuyển tài liệu sang chế độ toàn màn hình
Bạn có thể nghĩ rằng bạn sẽ mở phần tử body ở chế độ toàn màn hình, nhưng nếu đang sử dụng công cụ kết xuất dựa trên WebKit hoặc Blink, bạn sẽ thấy phần tử này có hiệu ứng kỳ lạ là thu hẹp chiều rộng của phần tử body xuống kích thước nhỏ nhất có thể chứa tất cả nội dung. (Mozilla Gecko là được.)
Để khắc phục vấn đề này, hãy sử dụng phần tử tài liệu thay vì phần tử nội dung:
document.documentElement.requestFullscreen();
Đặt phần tử video ở chế độ toàn màn hình
Cách đặt thành phần video ở chế độ toàn màn hình cũng giống như cách đặt bất kỳ thành phần nào 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>
không xác định thuộc tính điều khiển, người dùng sẽ không thể điều khiển video khi video ở chế độ toàn màn hình. Bạn nên thực hiện việc này bằng cách tạo một vùng chứa cơ bản bao gồm video và các chế độ điều khiển mà bạn muốn người dùng nhìn 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>
Điều 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ả lập 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 đường liên kết quay lại trang bắt đầu
- Bằng cách cung cấp cơ chế để đóng hộp thoại hoặc quay lại
Chạy trang ở chế độ toàn màn hình từ màn hình chính
Không thể chạy trang web ở chế độ toàn màn hình khi người dùng chuyển đến trang đó. Các nhà cung cấp trình duyệt đều nhận thấy rằng trải nghiệm toàn màn hình trên mỗi lần tải trang là một sự phiền toái lớn, do đó, người dùng phải thực hiện một cử chỉ để 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à một tín hiệu cho hệ điều hành rằng người dùng muốn chạy ứng dụng 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à chạy ứng dụng 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 content thành yes, thì ứng dụng web sẽ chạy ở chế độ toàn màn hình; nếu không, ứng dụng sẽ không chạy ở chế độ nà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 chỉ có thể đọc window.navigator.standalone.
Apple
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 chạy 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 để 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à chạy ứng dụng ở "chế độ ứng dụng" toàn màn hình bằng cách sử dụng mục trình đơn "Thêm vào màn hình chính" của Chrome cho Android.
Google Chrome
Bạn nên 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 ứng dụng web là một tệp JSON đơn giản giúp bạn (nhà phát triển) kiểm soát cách ứng dụng của bạn xuất hiện trước người dùng ở những khu vực mà họ muốn thấy ứng dụng (ví dụ: màn hình chính trên thiết bị di động), chỉ định những ứng dụng mà người dùng có thể 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ẽ giúp bạn kiểm soát ứng dụng của mình hiệu quả hơn nữa, nhưng hiện tại, chúng ta chỉ tập trung vào cách chạy ứng dụng. Cụ thể:
- Cho trình duyệt biết về tệp kê khai
- Mô tả cách chạy
Sau khi tạo tệp kê khai và lưu trữ tệp đó trên trang web của bạn, bạn chỉ cần thêm thẻ đường liên kết từ tất cả các trang bao gồm ứ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 cho Android (tháng 10 năm 2014) và cho phép bạn kiểm soát cách ứng dụng web xuất hiện khi được cài đặt vào 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 ứng dụng đó sẽ được khởi chạy 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à tệp kê khai mẫu. Trình chỉnh sửa tệp kê khai không hiển thị mọi nội dung có thể có trong 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 hoàn toàn mang tính 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 có ý định coi trang web hoặc ứng dụng đó như một ứng dụng. Điều này có nghĩa là bạn nên hướng người dùng đến chức năng của ứng dụng thay vì trang đích sản phẩm. Ví dụ: nếu người dùng bắt buộc phải đăng nhập vào ứng dụng của bạn, thì đó là một trang phù hợp để khởi chạy.
Ứng dụng tiện ích
Phần lớn ứng dụng tiện ích sẽ hưởng lợi ngay lập tức từ tính năng này. Đối với những ứng dụng đó, bạn có thể muốn 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 chạy độc lập, hãy thêm nội dung sau vào Tệp kê khai ứng dụng web:
"display": "standalone"
Trò chơi
Hầu hết các trò chơi sẽ được hưởng lợi ngay lập tức từ tệp kê khai. Hầu hết trò chơi sẽ muốn chạy ở chế độ toàn màn hình và buộ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 Birds, thì rất có thể bạn sẽ 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 trò chơi như X-Com, thì bạn có thể muốn trò chơi luôn sử dụng hướng ngang.
"display": "fullscreen",
"orientation": "landscape"
Trang web tin tức
Trong hầu hết các trường hợp, trang web tin tức là trải nghiệm thuần tuý dựa trên nội dung. Hầu hết các nhà phát triển sẽ 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ó thể tuỳ ý lựa chọn và quyết định cách bạn cho rằng người dùng sẽ 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ả các thành phần chrome của trình duyệt mà bạn muốn trang web có, bạn có thể đặt màn hình thành browser
.
"display": "browser"
Nếu muốn trang web tin tức của bạn giống như hầu hết các ứ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 web khỏi giao diện người dùng, bạn có thể
làm việc này bằng cách đặt màn hình thành standalone
.
"display": "standalone"
Giả mạo: tự động ẩn thanh địa chỉ
Bạn có thể "giả lập chế độ 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 sẽ được yêu cầu không cản trở. Rất tiếc, định dạng này chưa được chuẩn hoá và không được hỗ trợ tốt. Bạn cũng phải giải quyết một loạt các vấn đề.
Ví dụ: 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 đè hành động này, gây phiền toái 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 chế độ toàn màn hình, bạn cần lưu ý một số thay đổi có thể xảy ra đối với trải nghiệm người dùng để có thể xây dựng một dịch vụ mà người dùng sẽ yêu thích.
Không dựa vào các nút điều khiển thao tác
iOS không có nút quay lại bằng 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ể điều hướng trong toàn bộ ứng dụng mà không bị khoá.
Bạn có thể dễ dàng phát hiện 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 có khởi chạy từ màn hình chính hay không.
if (navigator.standalone == true) {
// My app is installed and therefore fullscreen
}
Tệp kê khai ứng dụng web (Chrome, Opera, Samsung)
Khi khởi chạy dưới dạng ứng dụng đã cài đặt, Chrome không chạy ở chế độ toàn màn hình thực sự nên 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, thì truy vấn nội dung đa 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 toàn màn hình thuần tuý, giá trị này sẽ là:
@media (display-mode: fullscreen) {
}
Nếu người dùng chạy ứng dụng ở chế độ độc lập, thì 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 khởi 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ả lập CSS thiếu dấu gạch nối, nhưng 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
Cách viết trong quy cách 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
Đôi khi, API toàn màn hình có thể hơi khó dùng. Các nhà cung cấp trình duyệt không muốn khoá người dùng trong một trang toàn màn hình, vì vậy, họ đã phát triển các cơ chế để thoát khỏi chế độ toàn màn hình sớm nhất có thể. Điều này có nghĩa là bạn không thể tạo một trang web toàn màn hình trải dài trên 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 khỏi chế độ toàn màn hình. - Khi người dùng nhấp vào một đường liên kết bên ngoài trong trang của bạn, chế độ toàn màn hình sẽ thoát.
- 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.
Bạn có hai lựa chọn nếu muốn người dùng luôn ở chế độ toàn màn hình:
- Sử dụng các cơ chế ứng dụng web có thể cài đặt để chuyển sang chế độ toàn màn hình.
- 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 cú pháp # để cập nhật URL (window.location = "#somestate") và nghe sự kiện window.onhashchange
, bạn có thể sử dụng ngăn xếp nhật ký của trình duyệt để quản lý các thay đổi trong 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 theo 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 đối với người dùng khi một trang web làm điều gì đó ngoài mong đợi. Khi người dùng truy cập vào trang web của bạn, đừng cố lừa họ chuyển sang chế độ toàn màn hình.
Không chặn sự kiện chạm đầu tiên và gọi requestFullscreen()
.
- Điều này thật khó chịu.
- 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 chạy ở chế độ toàn màn hình.
Nếu bạn muốn chạy ứng dụng ở chế độ toàn màn hình, hãy cân nhắc sử dụng trải nghiệm cài đặt cho từng nền tảng.
Không làm phiền 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 dự định cung cấp trải nghiệm toàn màn hình thông qua các cơ chế ứng dụng đã cài đặt, hãy cân nhắc đến người dùng.
- Hãy kín đáo. 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 người dùng đóng lời nhắc, đừng hiển thị lại lời nhắc đó.
- Trong lần truy cập đầu tiên, người dùng có thể sẽ khô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 một lượt 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 vào trang web của bạn nhưng không cài đặt ứng dụng, thì họ có thể sẽ không 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 phù hợp cho họ.
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ằng cách sử dụng một số hướng dẫn được trình bày trong bài viết này, bạn có thể dễ dàng xây dựng các trải nghiệm tận dụng toàn bộ màn hình của người dùng, bất kể ứng dụng.