製作全螢幕體驗

我們可以輕鬆製作沉浸式全螢幕網站和應用程式,但就像網站上的任何內容一樣,這項作業有幾種方法。由於越來越多瀏覽器支援以全螢幕模式啟動「已安裝的網頁應用程式」體驗,因此這項功能尤其重要。

讓應用程式或網站以全螢幕模式顯示

使用者或開發人員可以透過多種方式讓網頁應用程式全螢幕顯示。

  • 要求瀏覽器以全螢幕模式回應使用者手勢。
  • 將應用程式安裝到主畫面。
  • 假裝:自動隱藏網址列。

根據使用者手勢要求瀏覽器進入全螢幕模式

並非所有平台都相同。iOS Safari 沒有全螢幕 API,但 Android 版 Chrome、Firefox 和 IE 11 以上版本都有。您建構的大多數應用程式都會使用全螢幕規格提供的 JS API 和 CSS 選取器組合。建構全螢幕體驗時,您需要留意的幾個主要 JS API 如下:

  • element.requestFullscreen() (目前在 Chrome、Firefox 和 IE 中使用前置字元) 會以全螢幕模式顯示元素。
  • document.exitFullscreen() (目前在 Chrome、Firefox 和 IE 中使用前置字串。Firefox 則使用 cancelFullScreen()) 取消全螢幕模式。
  • 如果任何元素處於全螢幕模式,document.fullscreenElement (目前在 Chrome、Firefox 和 IE 中使用前置字元) 會傳回 true。

當應用程式以全螢幕模式顯示時,您就無法再使用瀏覽器的 UI 控制項。這會改變使用者與體驗互動的方式。這些應用程式沒有標準的導覽控制項,例如「向前」和「向後」;也沒有「重新整理」按鈕。因此,請務必考量這類情況。您可以使用一些 CSS 選取器,在瀏覽器進入全螢幕模式時變更網站的樣式和呈現方式。

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

上述範例有點複雜,因為我隱藏了使用供應商前置字元的所有複雜性。

實際的程式碼會複雜得多。Mozilla 已建立一組非常實用的指令碼,可用來切換全螢幕模式。如您所見,供應商前置字串的情況比指定 API 複雜且繁瑣。即使是下方稍微簡化的程式碼,仍相當複雜。

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);
  }
}

我們網頁開發人員討厭複雜性。您可以使用的高階抽象 API 是 Sindre SorhusScreenfull.js 模組,這個模組可將兩個略有差異的 JS API 和供應商前置字元整合為一個一致的 API。

全螢幕 API 提示

將文件設為全螢幕
在 body 元素上以全螢幕模式顯示
圖 1:在 body 元素上使用全螢幕模式。

您很自然地會認為可以將主體元素設為全螢幕,但如果您使用 WebKit 或 Blink 為基礎的轉譯引擎,就會發現它會將主體寬度縮減至最小可容納所有內容的大小,這會產生奇怪的效果。(Mozilla Gecko 即可)。

文件元素上的全螢幕畫面
圖 2:文件元素的全螢幕畫面。

如要修正這個問題,請改用文件元素,而非內文元素:

document.documentElement.requestFullscreen();
以全螢幕顯示影片元素

將影片元素設為全螢幕的做法,與將其他元素設為全螢幕完全相同。您會在影片元素上呼叫 requestFullscreen 方法。

<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>

如果 <video> 元素未定義控制項屬性,使用者就無法在全螢幕模式下控制影片。建議您採用的基本容器,應包含影片和您希望使用者看到的控制項。

<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>

這樣一來,您就能將容器物件與 CSS 擬造選取器結合,以便更靈活地操作 (例如隱藏「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>

您可以使用這些模式,偵測全螢幕模式的執行時間,並適當調整使用者介面,例如:

  • 提供返回首頁的連結
  • 提供關閉對話方塊或返回上一個畫面的機制

從主畫面以全螢幕模式啟動網頁

無法在使用者前往網頁時啟動全螢幕網頁。瀏覽器供應商非常清楚,每次載入網頁時都提供全螢幕體驗會造成極大的困擾,因此必須透過使用者手勢才能進入全螢幕模式。不過,供應商允許使用者「安裝」應用程式,而安裝動作會向作業系統發出信號,表示使用者想在平台上以應用程式形式啟動應用程式。

在各大行動平台上,使用元標記或資訊清單檔案實作這項功能相當簡單,如下所示。

iOS

自 iPhone 推出以來,使用者就能將網頁應用程式安裝到主畫面,並以全螢幕網頁應用程式形式啟動。

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

如果將內容設為「是」,網路應用程式就會以全螢幕模式執行;否則,則不會以全螢幕模式執行。預設行為是使用 Safari 顯示網頁內容。您可以使用 window.navigator.standalone 唯讀布林值 JavaScript 屬性,判斷網頁是否以全螢幕模式顯示。

Apple

Chrome for Android

Chrome 團隊最近實作了一項功能,可在使用者將網頁新增至主畫面時,指示瀏覽器以全螢幕模式啟動網頁。這與 iOS Safari 模式類似。

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

您可以設定網頁應用程式,將應用程式捷徑圖示新增至裝置的主畫面,並使用 Android 版 Chrome 的「Add to Home screen」(新增至主畫面) 選單項目,讓應用程式以全螢幕「應用程式模式」啟動。

Google Chrome

建議您使用網頁應用程式資訊清單。

Web App Manifest (Chrome、Opera、Firefox、Samsung)

網頁應用程式資訊清單是簡單的 JSON 檔案,可讓開發人員控制應用程式在使用者預期看到應用程式的區域 (例如行動版主畫面) 中顯示的方式,並指示使用者可以啟動哪些應用程式,以及更重要的是如何啟動。日後,您將可透過資訊清單進一步控管應用程式,但目前我們只會著重於應用程式的啟動方式。詳細說明:

  1. 向瀏覽器說明資訊清單
  2. 說明如何啟動

建立資訊清單並託管在網站上後,您只需在包含應用程式的所有網頁中加入連結標記,如下所示:

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

自 Android 版 38 (2014 年 10 月) 起,Chrome 就支援資訊清單,可讓您控制將網頁應用程式安裝至主畫面時的顯示方式 (透過 short_namenameicons 屬性),以及使用者按下啟動圖示時應如何啟動 (透過 start_urldisplayorientation)。

以下是資訊清單範例。但不會顯示資訊清單中的所有內容。

{
  "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"
}

這項功能完全採用漸進式設計,可讓您為支援這項功能的瀏覽器使用者打造更優質、更整合的體驗。

當使用者將您的網站或應用程式新增至主畫面時,他們會將其視為應用程式。因此,您應將使用者導向應用程式的功能,而非產品的登陸頁面。舉例來說,如果使用者必須登入應用程式,那麼這就是適合啟動的頁面。

公用應用程式

大多數公用程式都能立即受惠。對於這些應用程式,您可能會希望它們能獨立啟動,就像行動平台上的其他應用程式一樣。如要指示應用程式以獨立方式啟動,請在 Web 應用程式資訊清單中新增以下內容:

    "display": "standalone"
遊戲

大多數遊戲都能立即從資訊清單中受益。絕大多數遊戲都會以全螢幕模式啟動,並強制使用特定方向。

如果您正在開發垂直捲動遊戲或 Flappy Birds 這類遊戲,那麼您很可能會希望遊戲一律以直向模式顯示。

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

另一方面,如果您正在建構拼圖遊戲或 X-Com 之類的遊戲,那麼您可能會希望遊戲一律使用橫向模式。

    "display": "fullscreen",
    "orientation": "landscape"
新聞網站

在大多數情況下,新聞網站都是純粹的內容體驗。大多數開發人員自然不會想到要將資訊清單加入新聞網站。您可以透過資訊清單定義要啟動的內容 (新聞網站首頁),以及如何啟動 (全螢幕或一般瀏覽器分頁)。

您可以根據使用者可能的使用體驗存取方式,自行決定要採用哪種方式。如果您希望網站顯示所有預期的瀏覽器瀏覽器,可以將顯示設定設為 browser

    "display": "browser"

如果您希望新聞網站的體驗與大多數以新聞為主的應用程式一樣,將其體驗視為應用程式,並從 UI 中移除所有類似網頁的邊框,您可以將顯示設定設為 standalone

    "display": "standalone"

假裝:自動隱藏網址列

您可以透過以下方式自動隱藏網址列,以「假全螢幕」模式顯示畫面:

window.scrollTo(0, 1);

這是相當簡單的方法,網頁載入後,瀏覽器列會被告知要讓路。很抱歉,這項功能並未標準化,也沒有良好的支援。您還必須解決許多奇怪的問題。

舉例來說,當使用者返回網頁時,瀏覽器通常會還原網頁上的滑鼠游標位置。使用 window.scrollTo 會覆寫這項設定,因此會讓使用者感到困擾。為解決這個問題,您必須將上一個位置儲存在 localStorage 中,並處理邊緣情況 (例如,如果使用者在多個視窗中開啟頁面)。

使用者體驗指南

在建構可充分運用全螢幕的網站時,您需要留意許多可能的使用者體驗變更,才能建構使用者喜愛的服務。

請勿依賴導覽控制項

iOS 沒有硬體返回按鈕或重新整理手勢。因此,您必須確保使用者能夠在應用程式中瀏覽,不會被鎖定。

您可以輕鬆偵測是否在所有主要平台上以全螢幕模式或已安裝模式執行。

iOS

在 iOS 上,您可以使用 navigator.standalone 布林值,查看使用者是否從主畫面啟動應用程式。

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

Web App 資訊清單 (Chrome、Opera、Samsung)

以已安裝的應用程式形式啟動時,Chrome 並未以真正的全螢幕體驗執行,因此 document.fullscreenElement 會傳回空值,CSS 選取器則無法運作。

當使用者透過手勢在網站上要求全螢幕模式時,您可以使用標準全螢幕 API,包括 CSS 擬似選取器,讓您調整 UI 以回應全螢幕狀態,如下所示:

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

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

如果使用者從主畫面啟動您的網站,display-mode 媒體查詢會設為 Web 應用程式資訊清單中定義的值。在純全螢幕的情況下,會是:

@media (display-mode: fullscreen) {
}

如果使用者以獨立模式啟動應用程式,display-mode 媒體查詢會是 standalone

@media (display-mode: standalone) {
}

Firefox

當使用者透過您的網站要求全螢幕模式,或是以全螢幕模式啟動應用程式時,所有標準全螢幕 API 都會開放使用,包括 CSS 擬似選取器,讓您調整 UI 以回應全螢幕狀態,例如:

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

在 IE 中,CSS 虛擬類別缺少連字號,但其他運作方式與 Chrome 和 Firefox 相似。

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

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

規格

規格中的拼寫方式與 IE 使用的語法相符。

selector:fullscreen {
  display: block;
}

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

讓使用者維持在全螢幕體驗

全螢幕 API 有時可能會有些挑剔。瀏覽器供應商不希望將使用者鎖定在全螢幕頁面,因此他們已開發機制,盡可能讓使用者盡快離開全螢幕模式。也就是說,您無法建立跨多個網頁的完整網站,因為:

  • 使用 window.location = "http://example.com" 以程式輔助方式變更網址會導致全螢幕模式中斷。
  • 使用者點選網頁中的外部連結時,系統會退出全螢幕模式。
  • 透過 navigator.pushState API 變更網址也會中斷全螢幕體驗。

如要讓使用者維持全螢幕體驗,有兩種做法:

  1. 使用可安裝的網頁應用程式機制進入全螢幕模式。
  2. 使用 # 片段管理 UI 和應用程式狀態。

您可以使用 # 語法更新網址 (window.location = "#somestate"),並監聽 window.onhashchange 事件,以便使用瀏覽器本身的瀏覽記錄堆疊來管理應用程式狀態的變更,讓使用者可以使用硬體返回按鈕,或透過使用瀏覽記錄 API 提供簡單的程式輔助返回按鈕體驗,如下所示:

window.history.go(-1);

讓使用者選擇何時要進入全螢幕模式

使用者最討厭的,就是網站發生意料之外的情況。使用者前往您的網站時,請勿嘗試誘騙他們進入全螢幕模式。

請勿攔截第一個觸控事件並呼叫 requestFullscreen()

  1. 這很煩人。
  2. 瀏覽器日後可能會在某個時間點提示使用者,允許應用程式佔用全螢幕。

如果您想以全螢幕模式啟動應用程式,請考慮使用各個平台的安裝體驗。

請勿向使用者不斷推銷將應用程式安裝至主畫面

如果您打算透過已安裝的應用程式機制提供全螢幕體驗,請考量使用者的感受。

  • 請保持謹慎。使用橫幅或頁尾,讓他們知道可以安裝應用程式。
  • 如果他們關閉提示,就不要再顯示。
  • 除非使用者對您的服務感到滿意,否則他們不太可能在首次造訪時就想安裝應用程式。建議在使用者在網站上有正面互動後,提示他們安裝應用程式。
  • 如果使用者定期造訪您的網站,但未安裝應用程式,他們日後不太可能安裝您的應用程式。請勿持續向他們傳送垃圾內容。

結論

雖然我們沒有完全標準化且已實作的 API,但您可以運用本文提供的部分指引,輕鬆建構可充分利用使用者整個螢幕的體驗,不受用戶端影響。

意見回饋