วิธีที่ ZDF สร้างวิดีโอ PWA ด้วยโหมดออฟไลน์และโหมดมืด

ดูวิธีที่ ZDF สร้าง Progressive Web App (PWA) ที่มีฟีเจอร์ทันสมัย เช่น การรองรับการใช้งานออฟไลน์ ความสามารถในการติดตั้ง และโหมดมืด

Martin Schierle

Scott Friesen

เมื่อผู้ออกอากาศ ZDF กำลังพิจารณาที่จะออกแบบสแต็กเทคโนโลยีฟรอนท์เอนด์ใหม่ ผู้ออกอากาศ บริษัทได้ตัดสินใจพิจารณา Progressive Web App สำหรับเว็บไซต์สตรีมมิงอย่าง ZDFmediathek อย่างใกล้ชิด หน่วยงานพัฒนาอย่าง Cellular รับความท้าทายในการสร้างประสบการณ์การใช้งานบนเว็บที่เทียบเท่ากับแอป iOS และ Android สำหรับแพลตฟอร์มของ ZDF PWA มอบความสามารถในการติดตั้ง การเล่นวิดีโอแบบออฟไลน์ ภาพเคลื่อนไหวในการเปลี่ยน และโหมดมืด

การเพิ่ม Service Worker

ฟีเจอร์หลักของ PWA คือการรองรับการใช้งานออฟไลน์ สำหรับ ZDF การดำเนินการที่หนักหน่วงส่วนใหญ่ดำเนินการโดย Workbox ซึ่งเป็นชุดไลบรารีและโมดูลโหนดที่ช่วยให้รองรับกลยุทธ์การแคชรูปแบบต่างๆ ได้ง่าย ZDF PWA สร้างขึ้นด้วย TypeScript และ React จึงใช้ไลบรารี Workbox ที่มีในตัวอยู่แล้วใน create-react-app เพื่อแคชเนื้อหาแบบคงที่ล่วงหน้า ซึ่งจะช่วยให้แอปพลิเคชันมุ่งเน้นที่การทำให้เนื้อหาแบบไดนามิกพร้อมใช้งานแบบออฟไลน์ได้ ซึ่งในกรณีนี้คือวิดีโอและข้อมูลเมตาของวิดีโอ

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

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

หนึ่งในฟีเจอร์ที่มีประสิทธิภาพที่สุดของเว็บจะเข้ามาช่วยได้ นั่นก็คือโปรแกรมทำงานของบริการ

Service Worker สามารถสกัดกั้นคำขอต่างๆ ที่โปรแกรมเล่นทำขึ้นและตอบกลับด้วยข้อมูลจาก IndexedDB วิธีนี้ช่วยเพิ่มความสามารถแบบออฟไลน์ โดยไม่ต้องเปลี่ยนแปลงโค้ดของโปรแกรมเล่นแม้สักบรรทัดเดียว

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

การเพิ่มข้อความแจ้งให้ติดตั้งแบบกำหนดเอง

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

มีข้อความแจ้งการติดตั้งแบบกำหนดเองเมื่อดาวน์โหลดวิดีโอไว้รับชมแบบออฟไลน์

การสร้างหน้าออฟไลน์เพื่อเข้าถึงการดาวน์โหลด

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

หน้าออฟไลน์แสดงเนื้อหาทั้งหมดที่พร้อมให้รับชมแบบออฟไลน์

การใช้อัตราเฟรมโหลดสำหรับฟีเจอร์แบบปรับอัตโนมัติ

ZDF PWA แสดงการเปลี่ยนแปลงเล็กน้อยที่เกิดขึ้นเมื่อผู้ใช้เลื่อนหรือไปยังส่วนต่างๆ เพื่อมอบประสบการณ์การใช้งานที่สมบูรณ์แก่ผู้ใช้ สำหรับอุปกรณ์ระดับล่าง ภาพเคลื่อนไหวดังกล่าวมักให้ผลตรงกันข้ามและจะทำให้แอปดูอืดอาดและตอบสนองน้อยลงหากไม่ทำงานที่ 60 เฟรมต่อวินาที ในการตรวจสอบเรื่องนี้ แอปจะวัดอัตราเฟรมจริงผ่าน requestAnimationFrame() ขณะที่แอปพลิเคชันโหลดและปิดใช้ภาพเคลื่อนไหวทั้งหมดเมื่อค่าลดลงต่ำกว่าเกณฑ์ที่กำหนด

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

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

โหมดเข้ม

ฟีเจอร์ยอดนิยมสำหรับประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่ในสมัยใหม่คือโหมดมืด โดยเฉพาะอย่างยิ่งเมื่อดูวิดีโอในสภาวะแสงแวดล้อมต่ำ ผู้คนจำนวนมากชอบ UI ที่หรี่แสง ZDF PWA ไม่เพียงมอบสวิตช์ที่อนุญาตให้ผู้ใช้สลับระหว่างธีมสว่างและธีมมืดเท่านั้น แต่ยังตอบสนองต่อการเปลี่ยนแปลงค่ากำหนดสีของทั้งระบบปฏิบัติการด้วย วิธีนี้จะช่วยให้แอปเปลี่ยนลักษณะหน้าตาโดยอัตโนมัติในอุปกรณ์ที่ได้ตั้งค่ากำหนดเวลาในการเปลี่ยนฐานของธีมตามช่วงเวลาของวัน

ผลลัพธ์

Progressive Web App ใหม่เปิดตัวเป็นเวอร์ชันเบต้าสาธารณะอย่างเงียบๆ ในเดือนมีนาคม 2020 และได้รับความคิดเห็นในแง่บวกจำนวนมากนับตั้งแต่นั้น แม้ว่าระยะเบต้าจะยังคงดำเนินต่อไป แต่ PWA จะยังคงทำงานภายใต้โดเมนชั่วคราวของตนเอง แม้ว่า PWA จะไม่ได้โปรโมตต่อสาธารณะ แต่ก็มีผู้ใช้เพิ่มขึ้นเรื่อยๆ โดยส่วนมากแล้วมาจาก Microsoft Store ซึ่งช่วยให้ผู้ใช้ Windows 10 ค้นพบ PWA และติดตั้งได้เหมือนกับแอปเฉพาะแพลตฟอร์ม

ขั้นตอนถัดไปคือ

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