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

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

Martin Schierle

Scott Friesen

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

การเพิ่มโปรแกรมทำงานของบริการ

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

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

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

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

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

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

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

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

การสร้างหน้าเว็บสำหรับใช้แบบออฟไลน์เพื่อเข้าถึงรายการที่ดาวน์โหลด

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

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

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 ที่สลัว PWA ของ ZDF ไม่เพียงมีปุ่มสลับที่ให้ผู้ใช้สลับระหว่างธีมสว่างและธีมเข้มได้เท่านั้น แต่ยังตอบสนองต่อการเปลี่ยนแปลงค่ากําหนดสีทั้งระบบด้วย วิธีนี้จะทำให้แอปเปลี่ยนลักษณะที่ปรากฏโดยอัตโนมัติในอุปกรณ์ที่ตั้งค่ากำหนดเวลาเพื่อเปลี่ยนฐานของธีมตามช่วงเวลาของวัน

ผลลัพธ์

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

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

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