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

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

Martin Schierle

Scott Friesen

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

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

ฟีเจอร์สำคัญของ 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