มอบประสบการณ์แบบเต็มหน้าจอ

เราสามารถสร้างเว็บไซต์และแอปพลิเคชันแบบเต็มหน้าจอสมบูรณ์ได้ง่ายๆ แต่เช่นเดียวกับในเว็บ มี 2-3 วิธีในการดำเนินการ การดำเนินการนี้มีความสำคัญอย่างยิ่งเนื่องจากในปัจจุบันมีเบราว์เซอร์จำนวนมากขึ้นที่รองรับประสบการณ์ "เว็บแอปที่ติดตั้งไว้" ซึ่งเปิดใช้แบบเต็มหน้าจอ

เปิดให้แอปหรือเว็บไซต์ของคุณแสดงแบบเต็มหน้าจอ

ผู้ใช้หรือนักพัฒนาแอปสามารถแสดงเว็บแอปแบบเต็มหน้าจอได้หลายวิธี

• ขอให้เบราว์เซอร์ทำงานแบบเต็มหน้าจอเพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้
• ติดตั้งแอปในหน้าจอหลัก
• ปลอม: ซ่อนแถบที่อยู่อัตโนมัติ

ขอให้เบราว์เซอร์ทำงานแบบเต็มหน้าจอเพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้

แพลตฟอร์มแต่ละแบบนั้นไม่เท่ากัน iOS Safari ไม่มี API แบบเต็มหน้าจอ แต่เราใช้ใน Chrome บน Android, 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) จะแสดงผลเป็นจริงหากมีองค์ประกอบใดอยู่ในโหมดเต็มหน้าจอ

เมื่อแอปอยู่ในโหมดเต็มหน้าจอแล้ว คุณจะไม่สามารถใช้ตัวควบคุม 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 Sorhus' Screenfull.js โมดูล ซึ่งจะรวม JS API ของผู้ให้บริการทั้ง 2 รายและคำนำหน้าเข้าด้วยกันเป็น API ที่สอดคล้องกัน

เคล็ดลับ API แบบเต็มหน้าจอ

กำลังทำให้เอกสารเต็มหน้าจอ

การคิดว่าภาพองค์ประกอบเนื้อหาเต็มหน้าจอนั้นเป็นเรื่องปกติ แต่หากคุณใช้ เครื่องมือแสดงผลที่ใช้ WebKit หรือ Blink คุณจะพบว่าการย่อความกว้างของร่างกายให้มีขนาดเล็กที่สุดซึ่งจะมีเนื้อหาทั้งหมด (Mozilla Gecko ไม่เป็นไร)

ในการแก้ไขปัญหานี้ ให้ใช้องค์ประกอบของเอกสารแทนองค์ประกอบเนื้อหา:

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>

ซึ่งทำให้มีความยืดหยุ่นมากขึ้นเพราะคุณสามารถรวม Container Object กับตัวเลือกเทียมของ 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>

รูปแบบเหล่านี้ช่วยให้คุณตรวจจับเวลาที่กำลังทำงานแบบเต็มหน้าจอและปรับอินเทอร์เฟซผู้ใช้อย่างเหมาะสม เช่น

• ระบุลิงก์กลับไปยังหน้าเริ่มต้น
• มีกลไกในการปิดกล่องโต้ตอบหรือเลื่อนย้อนไปข้างหลัง

การเปิดหน้าเว็บแบบเต็มหน้าจอจากหน้าจอหลัก

ไม่สามารถเปิดหน้าเว็บแบบเต็มหน้าจอเมื่อผู้ใช้ไปยังส่วนดังกล่าว ผู้ให้บริการเบราว์เซอร์ทราบดีว่าการใช้งานแบบเต็มหน้าจอเมื่อโหลดหน้าเว็บแต่ละครั้งจะก่อให้เกิดความรำคาญอย่างมาก ดังนั้นผู้ใช้จะต้องทำท่าทางสัมผัสเพื่อเข้าสู่โหมดเต็มหน้าจอ แต่ผู้ให้บริการจะอนุญาตให้ผู้ใช้ "ติดตั้ง" แอปได้ และการดำเนินการติดตั้งเป็นสัญญาณของระบบปฏิบัติการที่ผู้ใช้ต้องการเปิดตัวเป็นแอปในแพลตฟอร์ม

สำหรับแพลตฟอร์มอุปกรณ์เคลื่อนที่ชั้นนำ การดำเนินการง่ายๆ ด้วยเมตาแท็กหรือไฟล์ Manifest ดังนี้

iOS

นับตั้งแต่ที่ iPhone เปิดตัว ผู้ใช้ยังสามารถติดตั้งเว็บแอปลงในหน้าจอหลักและเปิดเป็นเว็บแอปแบบเต็มหน้าจอได้

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

หากกำหนดค่าเนื้อหาเป็น "ใช่" เว็บแอปพลิเคชันจะทำงานในโหมดเต็มหน้าจอ หากไม่เป็นเช่นนั้น ลักษณะการทำงานเริ่มต้นคือการใช้ Safari เพื่อแสดงเนื้อหาเว็บ คุณสามารถกำหนดว่าหน้าเว็บจะแสดงในโหมดเต็มหน้าจอหรือไม่โดยใช้คุณสมบัติ window.navigator.standalone ด้วยบูลีน JavaScript แบบอ่านอย่างเดียว

Apple

Chrome สำหรับ Android

เมื่อเร็วๆ นี้ ทีม Chrome ได้นำฟีเจอร์ที่บอกให้เบราว์เซอร์เปิดโหมดเต็มหน้าจอเมื่อผู้ใช้เพิ่มไว้ในหน้าจอหลัก ซึ่งคล้ายกับรุ่น iOS Safari

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

คุณสามารถตั้งค่าเว็บแอปให้เพิ่มไอคอนทางลัดของแอปพลิเคชันลงในหน้าจอหลักของอุปกรณ์ และให้เปิดแอปใน "โหมดแอป" แบบเต็มหน้าจอได้โดยใช้รายการเมนู "เพิ่มในหน้าจอหลัก" ของ Chrome สำหรับ Android

Google Chrome

ตัวเลือกที่ดีกว่าคือการใช้ไฟล์ Manifest ของเว็บแอป

ไฟล์ Manifest ของเว็บแอป (Chrome, Opera, Firefox, Samsung)

ไฟล์ Manifest สำหรับเว็บแอปพลิเคชันเป็นไฟล์ JSON แบบพื้นฐานที่ให้คุณซึ่งเป็นนักพัฒนาแอป ควบคุมลักษณะที่แอปปรากฏต่อผู้ใช้ในส่วนที่ผู้ใช้คาดว่าจะได้เห็นแอป (เช่น หน้าจอหลักของอุปกรณ์เคลื่อนที่) กำหนดสิ่งที่ผู้ใช้จะเปิดได้ และที่สำคัญกว่านั้นคือวิธีเปิดแอป ส่วนในอนาคต ไฟล์ Manifest จะช่วยให้คุณควบคุมแอปได้มากขึ้น แต่ตอนนี้เราแค่เน้นวิธีเปิดตัวแอปเท่านั้น กล่าวอย่างเจาะจงคือ

1. บอกเบราว์เซอร์เกี่ยวกับไฟล์ Manifest
2. อธิบายวิธีเปิดตัว

เมื่อสร้างไฟล์ Manifest และโฮสต์ไว้บนเว็บไซต์แล้ว สิ่งที่คุณต้องทำก็เพียงแค่เพิ่มแท็กลิงก์จากทุกหน้าที่รวมแอปของคุณ ดังนี้

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

Chrome รองรับไฟล์ Manifest ตั้งแต่เวอร์ชัน 38 สำหรับ Android (ตุลาคม 2014) และให้คุณควบคุมลักษณะที่เว็บแอปของคุณปรากฏเมื่อติดตั้งลงในหน้าจอหลัก (ผ่านพร็อพเพอร์ตี้ short_name, name และ icons) รวมถึงวิธีเปิดตัวเมื่อผู้ใช้คลิกไอคอนเปิด (ผ่าน start_url, display และ orientation)

ตัวอย่างไฟล์ Manifest แสดงอยู่ด้านล่าง ไม่ได้แสดงทุกอย่างที่อยู่ในไฟล์ Manifest

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

ฟีเจอร์นี้มีการพัฒนาอย่างต่อเนื่องและช่วยให้คุณสร้างประสบการณ์การใช้งานที่ดีขึ้นและเป็นหนึ่งเดียวกันมากขึ้นสำหรับผู้ใช้เบราว์เซอร์ที่รองรับฟีเจอร์นี้

เมื่อผู้ใช้เพิ่มเว็บไซต์หรือแอปลงในหน้าจอหลัก ผู้ใช้ก็มีเจตนาที่จะปฏิบัติต่อเว็บไซต์หรือแอปให้เหมือนกับแอป ซึ่งหมายความว่าคุณควรมุ่งนำผู้ใช้ไปยังฟังก์ชันการทำงานของแอป ไม่ใช่หน้า Landing Page ของผลิตภัณฑ์ ตัวอย่างเช่น หากผู้ใช้ต้องลงชื่อเข้าใช้แอปของคุณ ก็ถือว่าเป็นหน้าที่ดีในการเปิดใช้งาน

แอปยูทิลิตี

แอปยูทิลิตีส่วนใหญ่จะได้รับประโยชน์จากการดำเนินการนี้ทันที สำหรับแอปเหล่านั้น คุณน่าจะต้องการให้แอปเปิดตัวแบบสแตนด์อโลนเหมือนแอปอื่นๆ ในแพลตฟอร์มอุปกรณ์เคลื่อนที่ หากต้องการบอกให้แอปเปิดแบบสแตนด์อโลน ให้เพิ่มไฟล์ Manifest ของ เว็บแอป ต่อไปนี้

    "display": "standalone"

เกม

เกมส่วนใหญ่จะได้ประโยชน์จากไฟล์ Manifest ทันที เกมส่วนใหญ่จะต้องการเปิดตัวแบบเต็มหน้าจอและบังคับให้เล่นแนวที่เจาะจง

หากคุณพัฒนาเกมเลื่อนแนวตั้งหรือเกมอย่าง Flappy Birds คุณอาจจะต้องการให้เกมอยู่ในโหมดแนวตั้งเสมอ

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

ในทางกลับกัน หากคุณกำลังสร้างเกมไขปัญหาหรือเกมอย่าง X-Com คุณอาจต้องการให้เกมใช้การวางแนวนอนเสมอ

    "display": "fullscreen",
    "orientation": "landscape"

เว็บไซต์ข่าว

ในกรณีส่วนใหญ่ เว็บไซต์ข่าวเป็นประสบการณ์ที่อิงตามเนื้อหาเท่านั้น โดยธรรมชาติแล้ว นักพัฒนาซอฟต์แวร์ส่วนใหญ่จะไม่คิดที่จะเพิ่มไฟล์ Manifest ลงในเว็บไซต์ข่าว ไฟล์ Manifest จะให้คุณกำหนดสิ่งที่จะเปิดตัว (หน้าแรกของเว็บไซต์ข่าวของคุณ) และวิธีเปิดใช้งาน (เต็มหน้าจอหรือในแท็บเบราว์เซอร์ปกติ)

การเลือกขึ้นอยู่กับคุณและวิธีที่คุณคิดว่าผู้ใช้ต้องการเข้าถึงประสบการณ์การใช้งานของคุณ หากต้องการให้เว็บไซต์มีเบราว์เซอร์ Chrome ทั้งหมดที่คุณต้องการให้มีสำหรับเว็บไซต์ ให้ตั้งค่าการแสดงผลเป็น browser

    "display": "browser"

หากต้องการให้เว็บไซต์ข่าวรู้สึกว่าแอปที่เน้นข่าวสารส่วนใหญ่จะถือว่าประสบการณ์การใช้งานของตนเป็นแอป และนำ Chrome ที่คล้ายเว็บทั้งหมดออกจาก UI ให้ทําโดยตั้งค่าการแสดงผลเป็น standalone

    "display": "standalone"

ปลอม: ซ่อนแถบที่อยู่อัตโนมัติ

คุณสามารถ "ปลอมเป็นเต็มหน้าจอ" ได้ด้วยการซ่อนแถบที่อยู่โดยอัตโนมัติดังนี้:

window.scrollTo(0, 1);

วิธีนี้ค่อนข้างง่าย หน้าเว็บจะโหลดขึ้นและแถบเบราว์เซอร์จะบอกให้ออกไป น่าเสียดายที่วิธีนี้ไม่ใช่แบบมาตรฐานและ ไม่มีการสนับสนุนที่ดี นอกจากนี้ คุณยังต้องหลีกเลี่ยงสถานการณ์แปลกๆ ต่างๆ ด้วย

เช่น เบราว์เซอร์มักคืนค่าตำแหน่งในหน้าเว็บเมื่อผู้ใช้กลับมาที่หน้านั้น การใช้ window.scrollTo จะลบล้างข้อมูลนี้ ซึ่งจะสร้างความรำคาญให้แก่ผู้ใช้ หากต้องการแก้ปัญหานี้ คุณต้องจัดเก็บตำแหน่งสุดท้ายใน localStorage และจัดการกับ Edge Case (เช่น หากผู้ใช้เปิดหน้าเว็บไว้ในหลายหน้าต่าง)

หลักเกณฑ์ UX

เมื่อคุณสร้างเว็บไซต์ที่ใช้ประโยชน์จากโหมดเต็มหน้าจอ ประสบการณ์ของผู้ใช้ที่อาจเกิดขึ้นมีการเปลี่ยนแปลงหลายอย่างที่คุณต้องทราบเพื่อที่จะสร้างบริการที่ผู้ใช้จะได้รับถูกใจ

ไม่ใช้ตัวควบคุมการนำทาง

iOS ไม่มีปุ่มย้อนกลับหรือท่าทางสัมผัสการรีเฟรชแบบฮาร์ดแวร์ ดังนั้น คุณต้องมั่นใจว่าผู้ใช้จะไปยังส่วนต่างๆ ของแอปได้โดยไม่ติดขัด

คุณสามารถดูว่าคุณกำลังอยู่ในโหมดเต็มหน้าจอหรือโหมดที่ติดตั้ง ได้ง่ายๆ บนแพลตฟอร์มหลักๆ ทั้งหมด

iOS

ใน iOS คุณสามารถใช้บูลีน navigator.standalone เพื่อดูว่าผู้ใช้เปิดจากหน้าจอหลักหรือไม่

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

ไฟล์ Manifest ของเว็บแอป (Chrome, Opera, Samsung)

เมื่อเปิดเป็นแอปที่ติดตั้งแล้ว Chrome ไม่ได้ทำงานในประสบการณ์ใช้งานแบบเต็มหน้าจอจริงๆ ดังนั้น document.fullscreenElement จึงแสดงผลเป็น Null และตัวเลือก 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 เป็นค่าที่กำหนดไว้ในไฟล์ Manifest ของเว็บแอป ในกรณีของเต็มหน้าจอ จะเป็นดังนี้

@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 เต็มหน้าจออาจยุ่งยากบ้างในบางครั้ง ผู้ให้บริการเบราว์เซอร์ไม่ต้องการล็อกผู้ใช้ในหน้าแบบเต็มหน้าจอ จึงพัฒนากลไกในการแยกส่วนเต็มหน้าจอโดยเร็วที่สุดเท่าที่จะทำได้ นั่นหมายความว่าคุณไม่สามารถสร้างเว็บไซต์เต็มหน้าจอ ที่ครอบคลุมหลายหน้าได้ เนื่องจากสาเหตุต่อไปนี้

• การเปลี่ยน URL แบบเป็นโปรแกรมโดยใช้ window.location = "http://example.com" จะแยกออกจากโหมดเต็มหน้าจอ
• การที่ผู้ใช้คลิกลิงก์ภายนอกภายในหน้าเว็บจะเป็นการออกจากโหมดเต็มหน้าจอ
• การเปลี่ยน URL ผ่าน navigator.pushState API จะทำให้ประสบการณ์การใช้งานแบบเต็มหน้าจอไม่สมบูรณ์ด้วย

คุณจะมี 2 ตัวเลือกหากต้องการให้ผู้ใช้อยู่ในโหมดเต็มหน้าจอ ดังนี้

1. ใช้กลไกของเว็บแอปที่สามารถติดตั้งได้เพื่อแสดงแบบเต็มหน้าจอ
2. จัดการ UI และสถานะแอปโดยใช้ส่วนย่อย #

การใช้ #syntax เพื่ออัปเดต URL (window.location = "#somestate") และการฟังเหตุการณ์ window.onhashchange คุณสามารถใช้ชุดประวัติของเบราว์เซอร์เพื่อจัดการการเปลี่ยนแปลงสถานะของแอปพลิเคชัน อนุญาตให้ผู้ใช้ใช้ปุ่มย้อนกลับของฮาร์ดแวร์ หรือนำเสนอปุ่มย้อนกลับแบบเป็นโปรแกรมอย่างง่ายโดยใช้ API ประวัติ ดังนี้

window.history.go(-1);

ให้ผู้ใช้เลือกเวลาที่ต้องการให้แสดงแบบเต็มหน้าจอ

ไม่มีอะไรจะสร้างความรำคาญแก่ผู้ใช้มากไปกว่าการได้ทำสิ่งที่ไม่คาดคิดอีกด้วย เมื่อผู้ใช้ไปยังเว็บไซต์ของคุณจะไม่พยายามหลอกให้ผู้ใช้เหล่านั้นแสดงแบบเต็มหน้าจอ

อย่าสกัดกั้นกิจกรรมการแตะครั้งแรกและโทรหา requestFullscreen()

1. น่ารำคาญ
2. ในอนาคตเบราว์เซอร์อาจตัดสินใจแจ้งให้ผู้ใช้ทราบเกี่ยวกับการอนุญาตให้แอปแสดงแบบเต็มหน้าจอ

หากคุณต้องการเปิดแอปแบบเต็มหน้าจอ ให้ลองใช้ประสบการณ์การติดตั้งในแต่ละแพลตฟอร์ม

ไม่ส่งสแปมให้ผู้ใช้ติดตั้งแอปของคุณในหน้าจอหลัก

หากคุณวางแผนที่จะนำเสนอประสบการณ์แบบเต็มหน้าจอผ่านกลไกแอปที่ติดตั้ง โปรดคำนึงถึงผู้ใช้

• รักษาความเป็นส่วนตัว ใช้แบนเนอร์หรือส่วนท้ายเพื่อบอกให้พวกเขารู้ว่าสามารถติดตั้งแอปได้
• หากผู้ใช้ปิดข้อความแจ้งก็ไม่ต้องแสดงข้อความนี้อีก
• ในการเข้าชมครั้งแรก ผู้ใช้มักไม่ต้องการติดตั้งแอปจนกว่าจะพึงพอใจกับบริการของคุณ ลองแจ้งให้ผู้ใช้ติดตั้งหลังจากที่ ผู้ใช้โต้ตอบในเชิงบวกบนเว็บไซต์ของคุณ
• หากผู้ใช้เข้าชมเว็บไซต์เป็นประจำแต่ไม่ได้ติดตั้งแอป ก็มีแนวโน้มที่จะติดตั้งแอปของคุณในอนาคต อย่าส่งสแปมซ้ำๆ

บทสรุป

แม้ว่าจะยังไม่มี API มาตรฐานที่นำไปใช้ได้อย่างเต็มรูปแบบ แต่คำแนะนำบางส่วนในบทความนี้จะช่วยให้คุณสร้างประสบการณ์ที่เป็นประโยชน์กับทั้งหน้าจอของผู้ใช้ได้ โดยไม่คำนึงถึงไคลเอ็นต์

ความคิดเห็น