PWA vs. AMP: ไหนดีกว่าและแตกต่างกันอย่างไร?

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

แต่ยังมีปัญหาสำคัญสำหรับเว็บบนอุปกรณ์เคลื่อนที่ นั่นคือ การมีส่วนร่วม เว็บไซต์บนอุปกรณ์เคลื่อนที่ 1,000 อันดับแรกเข้าถึงผู้คนได้มากกว่าแอพเนทีฟ 1,000 อันดับแรกถึง 4 เท่า อย่างไรก็ตาม เว็บไซต์เหล่านั้นดึงดูดผู้ใช้โดยเฉลี่ยน้อยกว่าแอปบนอุปกรณ์เคลื่อนที่ถึง 20 เท่า

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

เว็บแอปโปรเกรสซีฟคืออะไร?

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

คำว่า "เว็บแอปโปรเกรสซีฟ" ได้รับการประกาศเกียรติคุณจาก Google ในปี 2015 บริษัท กล่าวว่าเว็บแอปโปรเกรสซีฟมีคุณสมบัติตรงตามเกณฑ์สามประการ:

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

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

แอพเนทีฟคืออะไร?

แอปที่มาพร้อมเครื่องได้รับการติดตั้งผ่านตลาดกลาง เช่น App Store หรือ Google Play และใช้งานเป็นไอคอนบนหน้าจอหลักของอุปกรณ์ ได้รับการออกแบบมาโดยเฉพาะสำหรับอุปกรณ์เฉพาะ และสามารถใช้คุณลักษณะทั้งหมดได้ เช่น GPS, กล้อง, รายชื่อผู้ติดต่อ และอื่นๆ แอปเหล่านี้มีแนวโน้มว่าจะอยู่ในอุปกรณ์ของคุณในปัจจุบัน เช่น Google Maps, Gmail หรือ Instagram

แอมป์คืออะไร?

โครงการ Accelerated Mobile Pages แบบโอเพนซอร์ส (เรียกสั้นๆ ว่า AMP) ช่วยให้นักพัฒนาสร้างหน้าเว็บที่โหลดได้เกือบจะในทันทีด้วยภาษาเขียนโค้ดที่ไม่ซ้ำกัน ภาษานั้นเป็นเวอร์ชัน HTML และ CSS แบบแยกส่วนซึ่งจำกัดการใช้ JavaScript หน้าเหล่านี้โฮสต์อยู่บน CDN ซึ่งส่งเวอร์ชันแคชของหน้าเมื่อผู้ใช้เข้าชม

เว็บแอปแบบโปรเกรสซีฟกับแอปแบบเนทีฟ

แอพที่มาพร้อมเครื่องให้ประสบการณ์การใช้งานที่รวดเร็วและราบรื่นแก่ผู้ใช้ และได้รับการสนับสนุนจากตลาดกลางขนาดใหญ่ เช่น App Store และ Google Play เหตุใดจึงเลือกใช้เว็บแอปแบบโปรเกรสซีฟมากกว่าเวอร์ชันดั้งเดิมดั้งเดิม ในบทความของ Forbes Andrew Gazdecki ได้เสนอคำอธิบายระดับสูง:

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

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

• การใช้คุณลักษณะ: ใน ปัจจุบัน แม้ว่าเว็บแอปสามารถใช้ประโยชน์จากคุณลักษณะของอุปกรณ์ได้ แต่แอปที่มาพร้อมเครื่องก็สามารถทำได้มากกว่านั้น สิ่งต่างๆ เช่น GPS การแจ้งเตือนแบบพุช และท่าทางสัมผัสมีให้ใช้งานในแอปที่มาพร้อมเครื่องมากขึ้น
• การจำกัดเนื้อหา: เพื่อให้แอปของคุณมีโอกาสแข่งขันใน Google Play หรือ App Store คุณจะต้องยอมรับกฎของตลาดกลาง การจำกัดเนื้อหาและค่าธรรมเนียมทำให้บางเว็บไซต์สร้างแอปที่มาพร้อมเครื่องให้ประสบความสำเร็จได้ยาก อย่างไรก็ตาม สำหรับเว็บแอป ไม่มีการจำกัดเนื้อหาหรือค่าธรรมเนียมใดๆ ทำให้ทุกคนสร้างแอปได้ง่ายขึ้นโดยไม่คำนึงถึงประเภทเนื้อหา
• การเชื่อมต่อออฟไลน์: ใน ที่นี้ ขอบจะไปถึงแอปแบบเนทีฟซึ่งมีการแคชที่สมบูรณ์กว่าเว็บแอปแบบโปรเกรสซีฟที่สร้างใน HTML5 หากแอปของคุณต้องทำงานแบบออฟไลน์ ทางเลือกที่ดีกว่าคือเนทีฟในปัจจุบัน
• การติดตั้ง: การ ติดตั้งแอพเนทีฟต้องมีการดำเนินการที่สำคัญในนามของผู้ใช้ พวกเขาต้องเปิดตลาดกลางและค้นหาแอพแล้วดาวน์โหลด ต้องมีเจตนาจริงจัง สำหรับการติดตั้งเว็บแอปแบบโปรเกรสซีฟ มีแรงเสียดทานน้อยกว่ามาก การเพิ่มหนึ่งรายการในอุปกรณ์ของคุณเปรียบเสมือนการสร้างบุ๊กมาร์กบนหน้าจอหลักของคุณ การติดตั้งเว็บแอปแบบโปรเกรสซีฟนั้นง่ายกว่า แต่กระบวนการนี้ไม่ค่อยคุ้นเคยนัก ซึ่งอาจขัดขวางการยอมรับในช่วงต้น
• ความเร็ว: ใน ปัจจุบัน เว็บแอปแบบโปรเกรสซีฟจะล้าหลังแอปพลิเคชันแบบเนทีฟ อย่างไรก็ตาม พวกเขากำลังปิดช่องว่างอย่างต่อเนื่อง โดยเฉพาะอย่างยิ่งเมื่อคุณพิจารณาการเปรียบเทียบครั้งต่อไป

เว็บแอปแบบโปรเกรสซีฟกับ AMP

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

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

ใน Smashing Magazine Paul Bakaus ได้สรุปการแลกเปลี่ยนระหว่างสองรูปแบบนี้ด้วย:

ในการทำให้ประสบการณ์รวดเร็วเชื่อถือได้ คุณจะต้องปฏิบัติตามข้อจำกัดบางประการเมื่อใช้งานหน้า AMP AMP ไม่มีประโยชน์เมื่อคุณต้องการฟังก์ชันที่มีไดนามิกสูง เช่น Push Notifications หรือ Web Payments หรืออะไรก็ได้ที่ต้องใช้ JavaScript เพิ่มเติม

นอกจากนี้ เนื่องจากหน้า AMP มักจะให้บริการจากแคช AMP คุณจะไม่ได้รับประโยชน์สูงสุดจาก Progressive Web App ในการคลิกครั้งแรกนั้น เนื่องจาก Service Worker ของคุณเองไม่สามารถทำงานได้ ในทางกลับกัน Progressive Web App จะไม่เร็วเท่ากับ AMP ในการคลิกครั้งแรกนั้น เนื่องจากแพลตฟอร์มสามารถแสดงหน้า AMP ล่วงหน้าได้อย่างปลอดภัยและราคาถูก ซึ่งเป็นคุณลักษณะที่ทำให้การฝังง่ายขึ้นด้วย (เช่น ในโปรแกรมดูแบบอินไลน์)

แต่สุดท้ายแล้ว เราต้องเลือกอย่างใดอย่างหนึ่งจริง ๆ หรือไม่?

ความร่วมมือเหนือการแข่งขัน

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

ทุกวันนี้ การใช้ AMP ร่วมกับโปรเกรสซีฟเว็บแอปกำลังเป็นที่แพร่หลายมากขึ้น โดยนักพัฒนาใช้ประโยชน์จากทั้งสองวิธีในสามวิธี

1. AMP เป็นเว็บแอปโปรเกรสซีฟ

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

2. AMP เป็นโปรเกรสซีฟเว็บแอป

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

3. AMP ในเว็บแอปโปรเกรสซีฟ

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

สิ่งนี้เกี่ยวข้องกับการใช้ AMP อีกรูปแบบหนึ่งที่เรียกว่า “Shadow AMP” ซึ่งช่วยให้ AMP ซ้อนภายในพื้นที่ของหน้าเว็บได้ ผลลัพธ์คือ AMP ภายในเชลล์ของเว็บแอปพลิเคชันโปรเกรสซีฟ หากต้องการดูการใช้งานจริง ให้ลองดูการสาธิตที่ Google สร้างขึ้นชื่อ ShadowReader:

พร้อมที่จะสร้างเว็บแอปโปรเกรสซีฟของคุณเองหรือยัง

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

• คำพูดนี้จาก Ben Morss
• คำพูดนี้จาก Eric Lindley

เมื่อคุณพร้อมแล้ว ให้เริ่มใช้เครื่องมือสร้างหน้า Landing Page ของ AMP หลังคลิกใน Instapage เพื่อมอบประสบการณ์การใช้งานที่เร็วที่สุดให้กับคุณ