Twitter PWA: สิ่งที่คุณต้องรู้

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

เรื่องราวของ Twitter ก่อนการบูรณาการ กปภ.

ในเดือนเมษายน 2017 Twitter Lite การปรับปรุงใหม่ของเว็บไซต์บนเบราว์เซอร์มือถือ เปิดตัวหลังจากร่วมมือกับ Google ชื่อนี้มาจากข้อเท็จจริงที่ว่ามันถูกสร้างมาให้เบาขึ้น เร็วขึ้น และใช้งานได้มากขึ้น

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

เรื่องราวของ Twitter Lite ต้องย้อนกลับไปตั้งแต่ปี 2010 ถึง 2017 โดยที่ Twitter กำลังจะกลายเป็นเว็บไซต์โซเชียลมีเดียชั้นนำของโลก

Twitter มีการเริ่มต้นอย่างคร่าวๆ เมื่อเทียบกับคู่แข่งอย่าง Facebook ในช่วงแรกๆ อย่างไรก็ตาม ตั้งแต่ปี 2010 เป็นต้นมา บลูเบิร์ดได้เห็นภาพที่ยอดเยี่ยมบนแผนภูมิ ซึ่งมีการเติบโตอย่างต่อเนื่องทุกไตรมาส ระหว่างปี 2558 2559 และ 2560 อัตราการเติบโตชะลอตัวลง

เมื่อตระหนักถึงศักยภาพนอกสหรัฐอเมริกา Twitter ได้เข้าถึงตลาดต่างประเทศอย่างรวดเร็ว

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

Nicolas Gallagher หัวหน้าฝ่ายวิศวกรรมของ Google สำหรับ Twitter Lite กล่าวว่า “ตอนนี้ Twitter Lite เป็นวิธีที่เร็ว ราคาถูกที่สุด และน่าเชื่อถือที่สุดในการใช้ Twitter” ความสำเร็จของ Twitter Lite กลายเป็นหัวข้อข่าวสำหรับบทความมากมายเกี่ยวกับ กปภ.

ทางออกของการประปาส่วนภูมิภาคที่ใหญ่ที่สุดในโลก – Twitter PWA

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

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

แนวคิดสถาปัตยกรรม

หัวใจของ Twitter Lite คือเซิร์ฟเวอร์ Node.js ที่เรียบง่ายและมีขนาดพอเหมาะ และแอป JavaScript ฝั่งไคลเอ็นต์ PWA จะเปิดใช้งานการสร้าง API สำหรับการแคชและจัดเก็บข้อมูล ขั้นแรก เซิร์ฟเวอร์จะดูแลกระบวนการรับรองความถูกต้อง รวบรวมสถานะแรกสุดของแอป และเปลี่ยนรหัสเว็บให้เป็นหน้าแบบโต้ตอบโดยการแสดง HTML เริ่มต้นในเปลือกแอปพลิเคชัน

เมื่อโหลดในพื้นหลังแล้ว ข้อมูลจะถูกร้องขอโดยตรงจาก Twitter API ความเรียบง่ายในสถาปัตยกรรมนี้ช่วยให้ Twitter PWA นำเสนอบริการที่โดดเด่นและเชื่อถือได้ในประสิทธิภาพแม้ในระดับขนาดใหญ่

การออกแบบประสิทธิภาพ

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

นักพัฒนาซอฟต์แวร์ได้ใช้รูปแบบการยกระดับประสิทธิภาพที่เพิ่มขึ้นหลายชุด รูปแบบ PRPL รวมกับการอัปเดตล่าสุดจากเบราว์เซอร์สมัยใหม่ เพื่อสร้าง Service Worker, Web Push Notifications, IndexedDB และ Web App Install Banners พวกเขาทั้งหมดเป็นส่วนหนึ่งของความเร็วในการโหลดที่น่าประทับใจและความเป็นอิสระจากการเชื่อมต่อ

การใช้ข้อมูล

อาศัยทรัพยากรแคชเพื่อให้บริการข้อมูลที่มีขนาดเล็กลงล่วงหน้า พร้อมด้วยโหมดบันทึกข้อมูล Twitter Lite ได้รับการตั้งค่าโดยเนื้อแท้เพื่อลดการใช้ข้อมูล ส่งผลให้หน้าไทม์ไลน์ลดลง 40% ในการโหลดรูปภาพที่ปรับให้เหมาะสมตามความต้องการ คำขอ HEAD จะดำเนินการเพื่อแสดงขนาดด้วยการคลิกปุ่ม

โหลดแบบโปรเกรสซีฟ

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

กล่าวอีกนัยหนึ่ง การโหลดเริ่มต้นจาก Twitter Lite นั้นรวดเร็วเป็นพิเศษ เนื่องจากดำเนินการเฉพาะความจำเป็นสำหรับมุมมองที่มองเห็นได้เท่านั้น ในขณะที่พนักงานบริการจะแคชทรัพยากรเพิ่มเติมล่วงหน้าเพื่อให้ปรากฏเกือบจะทันทีและการเปลี่ยนแปลงที่ราบรื่นในการโต้ตอบในอนาคต

ความพร้อมใช้งานออฟไลน์

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

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

กำลังแสดงผล

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

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

ระบบและความเร็วที่ซ้ำซ้อน

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

ผลลัพธ์ของ Twitter PWA

ไซต์บนมือถือและเดสก์ท็อป

Twitter PWA อ้างว่าสามารถโต้ตอบได้ภายใน 5 วินาทีและต่ำกว่าในอุปกรณ์ส่วนใหญ่ที่มีเครือข่าย 3G เวอร์ชัน Lite โหลดเร็วขึ้น 30% และประหยัดการใช้ข้อมูลได้มากถึง 70% พร้อมลดความล่าช้าในการโต้ตอบลงมากกว่า 25%

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

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

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

ปัจจุบัน Twitter Lite รองรับถึง 42 ภาษา และฟีเจอร์ Globalize ถูกสร้างขึ้นเพื่อแสดงตัวเลข วันที่ และข้อความที่เข้ากับคนในท้องถิ่น

ผลลัพธ์เป็นตัวเลข

• เพิ่มขึ้น 65% ในหน้าต่อเซสชัน
• เพิ่มจำนวนทวีตที่ส่งถึง 75%
• อัตราตีกลับลดลง 20%

Twitter PWA กลายเป็นหนึ่งใน PWA ที่เร็วที่สุดได้อย่างไร?

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

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

จากที่กล่าวมา Twitter Lite เป็นชุดของการปรับปรุงและการอัปเดตเล็กน้อยในการโหลดหน้าแรก การเรนเดอร์ส่วนประกอบ React การป้องกันการแสดงผลซ้ำ และอื่นๆ แต่ละรายการรองรับการเพิ่มประสิทธิภาพโดยรวม และความพยายามเพียงเล็กน้อยในสิ่งที่เราเห็นในตอนนี้ ซึ่งเป็นหนึ่งในการนำ PWA ที่ใหญ่และเร็วที่สุดในโลกมาใช้

แน่นอน เพื่อรักษาชื่อนั้นไว้ นักพัฒนาต้องทำงานอย่างต่อเนื่องเพื่อให้แน่ใจว่าทุกอย่างอยู่ในการควบคุม และพัฒนากระบวนการให้ดีขึ้นหากมีโอกาส

คำถามที่พบบ่อยเกี่ยวกับ Twitter PWA และ PWA

Twitter เป็น PWA หรือไม่?

อย่างแน่นอน. Twitter เปิดตัวเว็บแอปโปรเกรสซีฟเวอร์ชันใหม่โดยร่วมมือกับนักพัฒนาของ Google ในปี 2560 Twitter PWA มีชื่อว่า Twitter Lite และโครงสร้างของมันมุ่งเน้นไปที่การให้บริการผู้ใช้ต่างประเทศที่อาจพบการเชื่อมต่อที่ไม่เสถียรเมื่อเปรียบเทียบกับสหรัฐอเมริกา

การสร้าง PWA เช่น Twitter PWA นั้นแพงไหม

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

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

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

จะเริ่มพัฒนาธุรกิจ กปภ. ได้ที่ไหน?

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

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

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

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

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

เราเชี่ยวชาญด้านการพัฒนาอีคอมเมิร์ซ โดยเฉพาะกับบริการพัฒนา Magento และ PWA เราต้องการนำเสนอข้อเสนอที่ดีที่สุดที่คุณไม่สามารถหาได้จากที่อื่น ช่วยเหลือคุณจนถึงที่สุด และบรรลุเป้าหมายที่คุณมาหาเรา

คุณสามารถวางใจได้หากต้องการโซลูชันที่มีประสิทธิภาพและคุ้มค่าสำหรับ:

• การพัฒนา PWA อีคอมเมิร์ซอย่างเต็มที่ตั้งแต่เริ่มต้น
• การพัฒนา กปภ. อีคอมเมิร์ซบางส่วน
• โซลูชันและการปรับปรุงในตัว PWA . ของอีคอมเมิร์ซที่มีอยู่
• ธีม/ปลั๊กอิน/ส่วนขยายอีคอมเมิร์ซ PWA ที่พร้อมใช้งานระดับพรีเมียม

ประเด็นที่สำคัญ

Twitter PWA ใหม่นำอากาศบริสุทธิ์มาสู่โลกของเว็บบนมือถือที่น่าเบื่อและไม่ตอบสนอง ความร่วมมืออันทรงพลังระหว่าง Twitter และ Google ได้สร้างชื่อเสียงด้วยการปรับใช้การเปลี่ยนแปลง ขจัดข้อกังวลและข้อสงสัยทั้งหมดเกี่ยวกับศักยภาพของ กปภ. เป็นผู้เริ่มใช้งาน PWA ก่อนใครที่ประสบความสำเร็จ เริ่มเอาใจผู้ใช้ออนไลน์ของคุณ และกระตุ้นการเพิ่ม ROI ของคุณด้วย Tigren วันนี้ก่อนที่จะสายเกินไป