12 ตัวอย่างที่ดีที่สุดของ Progressive Web Apps (PWAs) ในปี 2022

เผยแพร่แล้ว: 2022-01-03

สารบัญ

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

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

เพื่อให้เข้าใจอย่างลึกซึ้งว่า Progressive Web App แตกต่างจากเว็บไซต์แบบตอบสนองทั่วไปอย่างไร วิธีที่ดีที่สุดคือการดูตัวอย่างที่ดีของ PWA

นี่คือรายการตัวอย่าง Progressive Web App ที่น่าประทับใจจากหลากหลายอุตสาหกรรม เพื่อให้คุณสามารถสัมผัสกับเทคโนโลยีเว็บใหม่ได้ด้วยตัวเอง

1. สตาร์บัคส์

starbucks pwa บนมือถือ
Starbucks PWA บนเดสก์ท็อป
Starbucks PWA บนมือถือและเดสก์ท็อป

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

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

2. เดเบนแฮมส์

Debenhams PWA บนมือถือ
Debenhams PWA บนเดสก์ท็อป
Debenhams PWA บนมือถือและเดสก์ท็อป

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

กปภ.คือคำตอบของทีมเดเบนแฮม หลังจากเปลี่ยนเว็บไซต์เก่าเป็น กปภ. แล้ว ความพยายามของพวกเขาก็คุ้มค่าอย่างแน่นอน พวกเขาได้ปรับปรุงประสบการณ์ของลูกค้าโดยการลบการบล็อกในการเดินทางของลูกค้า – หน้าที่ช้า โครงสร้างที่นำทางยาก กระบวนการเช็คเอาต์ที่ซับซ้อน โดยรวมแล้ว Debenhams มีรายได้จากอุปกรณ์เคลื่อนที่เพิ่มขึ้น 40% และ Conversion เพิ่มขึ้น 20%

3. BMW

BMW PWA บนมือถือ
BMW PWA บนเดสก์ท็อป
BMW PWA บนมือถือและเดสก์ท็อป

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

PWA ใหม่ของ BMW มอบประสบการณ์ที่ 'ว้าว' ให้กับผู้ใช้อย่างแน่นอน สิ่งแรกที่ทุกคนจะสังเกตเห็นคือรูปภาพและวิดีโอที่มีความละเอียดสูง และเว็บโหลดได้ทันทีด้วยคุณสมบัติทั้งหมดเหล่านี้ (เร็วกว่าไซต์เก่า 4 เท่า) รายงานของพวกเขายังแสดงให้เห็นตัวเลขที่น่าประทับใจอื่นๆ หลังจากการจัดตั้ง กปภ.: มีคนคลิกจากหน้าแรกไปยังไซต์ขาย BMW เพิ่มขึ้น 4 เท่า ; ผู้ใช้อุปกรณ์เคลื่อนที่เพิ่มขึ้น 50% และการเข้าชมเว็บไซต์เพิ่มขึ้น 49% เมื่อเทียบกับเว็บไซต์เก่า

4. Flipboard

กระดานโต้คลื่น
Flipboard PWA บนเดสก์ท็อป
Flipboard PWA บนมือถือและเดสก์ท็อป

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

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

5. Soundslice

soundlice pwa
Soundslice PWA บนเดสก์ท็อป
Soundslice PWA บนมือถือและเดสก์ท็อป

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

6. เกม 2048

2048 pwa
เกม 2048 PWA บนเดสก์ท็อป
เกม 2048 PWA บนมือถือและเดสก์ท็อป

เกมไขปริศนา 2048 เดิมเปิดตัวเป็นแอปฟรีสำหรับ Android และ iO ในปี 2014 เกมดังกล่าวกลายเป็นเกมยอดนิยมที่มีผู้ใช้มากกว่า 4 ล้านคนในเวลาไม่ถึงสัปดาห์หลังจากเปิดตัว เกมนี้เล่นง่ายและน่าติดตาม อธิบายว่าเป็น "Candy Crush สำหรับผู้คลั่งไคล้คณิตศาสตร์" เป้าหมายของมันคือการรวมบล็อกที่มีตัวเลขเดียวกันเพื่อรวมเป็น 2048 ในท้ายที่สุด เวอร์ชัน PWA อย่างเป็นทางการมีให้บริการที่ 2048game.com เพื่อให้ผู้เล่นสามารถเข้าถึงได้ทันทีจากเว็บเบราว์เซอร์ใดก็ได้ ด้วยการเปลี่ยนภาพที่ราบรื่นและการดูแบบเต็มหน้าจอ เป็นการยากที่จะแยก PWA ออกจากแอปที่มาพร้อมเครื่อง นอกจากนี้ยังสามารถเล่น 2048 PWA ในโหมดออฟไลน์ได้อย่างเต็มที่

7. MakeMyTrip

makemytrip pwa
Makemytrip pwa
MakeMyTrip PWA บนมือถือและเดสก์ท็อป

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

ประสบการณ์ PWA ใหม่ได้เพิ่มอัตราการแปลงเป็นสามเท่าโดยลดเวลาในการโหลดหน้าเว็บลง 38% เมื่อเทียบกับไซต์บนอุปกรณ์เคลื่อนที่ก่อนหน้านี้ MakeMyTrip กระตุ้นเซสชันผู้ใช้เพิ่มขึ้น 160% และลดอัตราตีกลับลง 20%

8. Uber

uber pwa
Uber PWA
Uber PWA บนมือถือและเดสก์ท็อป

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

ด้วยการนำประสบการณ์ดั้งเดิมมาไว้ในเว็บแอปที่มีน้ำหนักเบาเป็นพิเศษ Uber ได้เปิดใช้งานคำขอเรียกรถด่วนโดยไม่คำนึงถึงตำแหน่ง ความเร็วเครือข่าย และอุปกรณ์ แอปหลักเพียง 50kB อนุญาตให้โหลดภายใน 3 วินาทีบนเครือข่าย 2G

9. โกปา (Padpiper )

โคปา กปภ โมบาย
Kopa PWA desktop
Kopa PWA บนมือถือและเดสก์ท็อป

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

10. Pinterest

pinterest pwa
Pinterest PWA
Pinterest PWA บนมือถือและเดสก์ท็อป

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

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

11. Yummly

อร่อยปวา
อร่อยมาก
Yummly PWA บนมือถือและเดสก์ท็อป

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

12. Spotify

spotify pwa
Spotify pwa
Spotify PWA บนมือถือและเดสก์ท็อป

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

ห่อ

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


อ่านเพิ่มเติม

15 ตัวอย่างที่ดีที่สุดของการค้าหัวขาดในปี 2022
15 ตัวอย่างที่ดีที่สุดของการค้าหัวขาดในปี 2565
ลุค วู 3 ม.ค. 2022 อ่าน 11 นาที
11 สุดยอดเกมโปรเกรสซีฟเว็บ (PWAs) ในปี 2022
11 สุดยอดเกมโปรเกรสซีฟเว็บ (PWAs) ในปี 2022
ลุค วู 3 ม.ค. 2022 อ่าน 5 นาที
10 สุดยอดเว็บแอปโปรเกรสซีฟ (PWAs) สำหรับอีคอมเมิร์ซปี 2022
10 สุดยอดเว็บแอปโปรเกรสซีฟ (PWAs) สำหรับอีคอมเมิร์ซปี 2022
เพอร์รี่ 3 ม.ค. 2022 อ่าน 7 นาที
10 ตัวอย่าง Magento PWA ที่ดีที่สุด
10 ตัวอย่าง Magento PWA ที่ดีที่สุด
ลุค วู 25 ธ.ค. 2020 อ่าน 11 นาที