เตรียมพร้อมเมื่อคุกกี้ของบุคคลที่สามใน Chrome สิ้นสุดลง ทดสอบเว็บไซต์วันนี้เพื่อหาข้อขัดข้อง

หน้านี้ได้รับการแปลโดย Cloud Translation API

ติดตามซานตาคลอสในฐานะ PWA

สรุป

Santa Tracker ได้รับการอัปเกรดเป็น Progressive Web App แบบออฟไลน์อย่างรวดเร็วสำหรับช่วงเทศกาลวันหยุดปี 2016 ซึ่งต้องยกความดีให้กับการออกแบบฉากที่มีอยู่ของเรา

ผลลัพธ์

ซานต้าเป็น Progressive Web App (PWA) ที่รองรับการเพิ่มลงในหน้าจอหลัก (ATHS) และแบบออฟไลน์
10% ของเซสชันที่มีสิทธิ์เริ่มต้นผ่านไอคอน ATHS
75% ของผู้ใช้ 75% ได้รับการรองรับองค์ประกอบที่กำหนดเองและ Shadow DOM ซึ่งเป็น 2 ส่วนสำคัญของคอมโพเนนต์เว็บ
คะแนนของ Lighthouse จาก 81 คะแนน
การทำงานออฟไลน์ผ่าน Service Worker API นั้นมาพร้อมกับการโหลดแบบ Lazy Loading ที่จะแคชโหมดที่เข้าชมเท่านั้นและอัปเกรดฉากในรุ่นใหม่แบบเงียบๆ

ที่มา

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

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

ในปี 2016 เราได้อัปเกรดเครื่องมือที่อยู่เบื้องหลังตามติดซานต้าเพื่อรองรับประสบการณ์ออฟไลน์ในฉากส่วนใหญ่ ซึ่งจะไม่รวมฉากที่ถ่ายโดยวิดีโอ YouTube หรือฉากที่เกี่ยวข้องกับตำแหน่งของซานต้าแบบสดๆ ด้วย แน่นอนว่านี่เป็นเพียงภาพที่เชื่อมต่อไปยังขั้วโลกเหนือโดยตรงเท่านั้น! 📶☃️

ชาเลนจ์

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

ซานต้าได้รับการสนับสนุนในกว่า 35 ภาษา จึงต้องทำซ้ำเนื้อหาหลายรายการ
แพลตฟอร์มต่างๆ มีการรองรับสื่อที่แตกต่างกัน (เช่น mp3 กับ ogg)
บางครั้งไฟล์มัลติมีเดียมีให้ในขนาดและความละเอียดที่ต่างกัน

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

ความท้าทายเหล่านี้:

ทรัพยากรมัลติมีเดียขนาดใหญ่สำหรับ "ฉาก" ต่างๆ
การเปลี่ยนแปลงที่จะมีผลตลอดทั้งเดือน

...ทำให้กลยุทธ์ออฟไลน์ที่ไร้ปัญหามีความไม่เหมาะสม

ซานต้าสร้างขึ้นด้วยโพลีเมอร์

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

ซานต้าเป็นแอปพลิเคชันแบบหน้าเดียว ซึ่งแต่เดิมเขียนด้วย Polymer 0.5 และตอนนี้ได้อัปเกรดเป็น Polymer 1.7 แล้ว ซานต้าประกอบด้วยชุดโค้ดที่ใช้ร่วมกัน เช่น เราเตอร์ เนื้อหาการนำทางที่ใช้ร่วมกัน เป็นต้น นอกจากนี้ยังมี "ฉาก" ที่ไม่เหมือนใครอีกมากมาย

แต่ละฉากจะเข้าถึงได้ด้วย URL ที่ต่างกัน ได้แก่ /village.html, /codelab.html และ /boatload.html และคอมโพเนนต์เว็บของฉากนั้นๆ เมื่อผู้ใช้เปิดฉาก เราจะโหลด HTML และเนื้อหาที่จำเป็นทั้งหมดไว้ล่วงหน้า (รูปภาพ, เสียง, CSS, js) ซึ่งอยู่ใน /scenes/[[sceneName]] ในที่เก็บตามติดซานต้า แต่ผู้ใช้จะเห็นตัวโหลดล่วงหน้าที่ใช้งานง่ายซึ่งแสดงความคืบหน้า

วิธีนี้ช่วยให้เราไม่ต้องโหลดเนื้อหาที่ไม่จำเป็นสำหรับฉากที่ผู้ใช้ไม่เห็น (ซึ่งเป็นข้อมูลจำนวนมาก) และยังหมายความว่าเราต้องเก็บ "ไฟล์ Manifest ของแคช" ไว้ภายในสำหรับเนื้อหาทั้งหมดที่จำเป็นสำหรับทุกฉาก ไฟล์ Manifest ของแคชเป็นไฟล์ JSON ที่จัดเก็บการแมปจากชื่อไฟล์ไปยังแฮช MD5 ของเนื้อหา

โหลดสิ่งที่คุณใช้

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

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

ตามติดซานต้าทำตามขั้นตอนต่อไปนี้เพื่อโหลดฉาก เช่น boatload-scene:

องค์ประกอบฉากทั้งหมด (รวมถึง <boatload-scene>) นั้นไม่รู้จักในตอนแรกและจะถือว่าเป็น HTMLUnknownElement ที่มีแอตทริบิวต์เพิ่มเติมบางอย่าง
เมื่อเปลี่ยนฉากที่เลือก ระบบจะแจ้งเตือนองค์ประกอบ <lazy-pages>
องค์ประกอบ <lazy-pages> แก้ไของค์ประกอบฉากและแอตทริบิวต์ path ซึ่งโหลดการนำเข้า HTML scenes/boatload/boatload-scene_en.html องค์ประกอบนี้ประกอบไปด้วยองค์ประกอบโพลีเมอร์และองค์ประกอบที่ต้องพึ่งพา
ตัวโหลดล่วงหน้าที่ใช้งานง่ายจะปรากฏขึ้น
เมื่อโหลดและเรียกใช้ HTML แล้ว ระบบจะอัปเกรด <boatload-scene> เป็นองค์ประกอบ Polymer จริงอย่างโปร่งใส พร้อมความสนุกในช่วงวันหยุด 🎄🎉

แนวทางนี้มีความท้าทาย ตัวอย่างเช่น เราไม่ต้องการรวมคอมโพเนนต์เว็บที่ซ้ำกัน หากมี 2 ฉากใช้องค์ประกอบเดียวกัน เช่น paper-button เราจะตัดโค้ดออกเป็นส่วนหนึ่งของกระบวนการสร้าง และใส่ไว้ในโค้ดที่ซานต้าแชร์แทน

การออกแบบแบบออฟไลน์

ตามติดซานต้าแบ่งฉากออกเป็นฉากๆ อย่างเป็นระเบียบด้วย Polymer และ lazy-pages นอกจากนี้ แต่ละฉากยังมีไดเรกทอรีของตัวเองอีกด้วย เราออกแบบโปรแกรมทำงานของบริการติดตามซานตาคลอส ซึ่งเป็นเครื่องมือหลักที่ทำให้ออฟไลน์ที่ทำงานบนเบราว์เซอร์ของผู้ใช้ เพื่อตระหนักถึงความแตกต่างระหว่างโค้ดที่แชร์กับความแตกต่างระหว่าง "ฉาก"

ทฤษฎีเบื้องหลัง Service Worker คืออะไร เมื่อผู้ใช้ในเบราว์เซอร์ที่รองรับโหลดเว็บไซต์ของคุณ HTML ของฟรอนท์เอนด์จะขอให้ติดตั้ง Service Worker ได้ สำหรับตามติดซานต้า พนักงานบริการจะอยู่ที่ /sw.js เหตุการณ์นี้จะทำให้เหตุการณ์ install เริ่มทำงานซึ่งจะแคชโค้ดที่แชร์ของซานต้าไว้ล่วงหน้า จึงไม่จำเป็นต้องดึงข้อมูลใด ๆ ขณะรันไทม์

เมื่อติดตั้ง Service Worker แล้วจะสามารถสกัดกั้นคำขอ HTTP ทั้งหมดได้ สำหรับตามติดซานต้า ขั้นตอนการตัดสินใจแบบง่ายมีลักษณะดังนี้

คำขอแคชอยู่แล้วใช่ไหม
- เยี่ยมเลย แสดงการตอบกลับที่แคชไว้
คำขอตรงกับไดเรกทอรีโหมด เช่น "viewss/Boatload/Boatload-signed_en.html" ใช่ไหม
- ส่งคำขอเครือข่ายและจัดเก็บผลลัพธ์ไว้ในแคชก่อนส่งคืนให้กับผู้ใช้
หรือดำเนินการตามคำขอเครือข่ายตามปกติ

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

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

เราจะทำให้ทันที

อย่างที่เรากล่าวไว้ เหล่าเอลฟ์ของซานต้าทำงานอย่างหนักตลอดเดือนธันวาคม และมักต้องเผยแพร่ การอัปเดตใหม่ๆ ตลอดทั้งเดือน เมื่อมีการเปิดตัว "ติดตามซานตาคลอส" จะมีการติดป้ายกำกับที่ไม่ซ้ำกัน เช่น v20161204112055 ซึ่งเป็นการประทับเวลาของการเผยแพร่ (11:20:55 ในวันที่ 4 ธันวาคม 2016)

สำหรับรุ่นที่ติดป้ายกำกับนี้ เราจะสร้างแฮช MD5 สำหรับทุกไฟล์และจัดเก็บไว้ใน "ไฟล์ Manifest ของแคช" บนดิสก์ Solid State สมัยใหม่ นี่จะเป็นการเพิ่มกระบวนการบิลด์เพียงไม่กี่วินาที

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

นอกจากนี้ เรายังใช้ทรัพยากร "prod" ซึ่งเป็นเวอร์ชันใหม่ของสิ่งที่เรียกว่าทรัพยากร "prod" ซึ่งก็คือ HTML ดัชนีของSanta และ Service Worker ที่เผยแพร่อยู่ใน https://santatracker.google.com/ การดำเนินการนี้จะแทนที่เวอร์ชันเก่า

ทุกครั้งที่ "ติดตามซานตาคลอส" โหลดขึ้นมา เบราว์เซอร์จะตรวจหา Service Worker ที่อัปเดตแล้วและดึงข้อมูลจากโปรแกรมทำงาน (หากมี) ในกรณีของเรา แต่ละรุ่นจะสร้างโค้ดที่แตกต่างกันแบบไบต์ เบราว์เซอร์มองว่านี่เป็นการอัปเกรดและดำเนินเหตุการณ์ install ใหม่

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

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

ประสบการณ์การท่องเว็บแบบออฟไลน์

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

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

ตามติดซานต้าจะส่งคำขอไปยัง API ของซานต้าเป็นประจำ หากคำขอเหล่านี้ล้มเหลวหรือหมดเวลา เราจะถือว่าผู้ใช้ออฟไลน์อยู่ เราใช้ API นี้แทนการใช้พร็อพเพอร์ตี้ navigator.onLine ในตัวของเบราว์เซอร์ เพียงแต่จะแจ้งให้เราทราบว่าผู้ใช้อาจออนไลน์หรือไม่ (หรือเรียกอีกอย่างว่า Lie-Fi)

การเชื่อมต่อระหว่างประเทศ

แม้ผู้ใช้ส่วนใหญ่จะเป็นภาษาอังกฤษ (ตามด้วยภาษาญี่ปุ่น โปรตุเกส สเปน และฝรั่งเศส) ซานต้าได้สร้างและเผยแพร่ในกว่า 35 ภาษา

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

หรือพูดอีกอย่างก็คือ ติดตามซานตาคลอสเวอร์ชันปัจจุบันสำหรับโปรแกรมทำงานของบริการ เป็นเวอร์ชันเก่าที่ประกอบด้วย (รุ่น,ภาษา)

เพิ่มลงในหน้าจอหลัก

เนื่องจากซานต้าทำงานแบบออฟไลน์และให้บริการโปรแกรมทำงาน ผู้ใช้ที่มีสิทธิ์จะได้รับแจ้งให้ติดตั้งแอปในหน้าจอหลัก ในปี 2016 ประมาณ 10% ของการโหลดที่มีสิทธิ์มาจากไอคอนหน้าจอหลัก

บทสรุป

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

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