การออกแบบเว็บที่ตอบสนองและโปรเกรสซีฟเว็บแอป (PWA): ความแตกต่าง

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

การออกแบบเว็บไซต์ที่ตอบสนอง

มันคืออะไร

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ (RWD) เป็นแนวทางในการพัฒนาเว็บไซต์ครั้งแรกที่อธิบายโดยอีธาน มาร์ก็อตในปี 2010 ซึ่งเร็วกว่าแนวคิดของ Progressive Web App ห้าปี

มันทำงานอย่างไร

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

กริดแบบไหล รูปภาพที่ยืดหยุ่น และข้อความค้นหาสื่อเป็นส่วนประกอบทางเทคนิคสามประการสำหรับการออกแบบเว็บที่ตอบสนอง...

Ethan Marcotte การออกแบบเว็บไซต์ที่ตอบสนอง

กริดของไหล

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

ภาพที่ยืดหยุ่น

รูปภาพบนเว็บไม่ได้ไหลลื่นตามธรรมชาติ แต่มีการกำหนดค่าบางอย่าง (คุณสมบัติ width ตั้งเป็น 100% และคุณสมบัติ height ตั้งเป็น auto ) รูปภาพใด ๆ ที่สามารถสร้างให้ตอบสนองได้ในทุกอุปกรณ์

CSS Media Queries

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

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

ตัวอย่าง

เว็บไซต์ที่ตอบสนองได้เป็นเรื่องธรรมดาในปัจจุบัน และเกือบทุกเว็บไซต์ที่คุณเจอนั้นค่อนข้างตอบสนองในลักษณะของมัน

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

มันคืออะไร

ก่อตั้งขึ้นครั้งแรกโดย Alex Russel ในปี 2558 P rogressive W eb A pp เป็นวิวัฒนาการทางธรรมชาติต่อไปของเว็บเนื่องจากมีประโยชน์มากมายเหนือเว็บไซต์ตอบสนองทั่วไป Pete LePage – Google Developer Advocate อธิบายไว้ในส่วน " ก้าวหน้า " ว่า " ในขณะที่ผู้ใช้ค่อยๆ สร้างความสัมพันธ์กับแอปเมื่อเวลาผ่านไป มันจะมีประสิทธิภาพมากขึ้นเรื่อยๆ "

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

 บทความที่เกี่ยวข้อง: Progressive Web Application คืออะไร?

มันทำงานอย่างไร

การสรุปองค์ประกอบหลักของ กปภ. เป็นเรื่องง่าย โดยพื้นฐานแล้ว เพื่อทำให้คุณลักษณะที่ก้าวหน้าทั้งหมดดังกล่าวเป็นไปได้ มีข้อกำหนดเหล่านี้:

รายการเว็บแอป

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

พนักงานบริการ

ถือเป็นองค์ประกอบพื้นฐานที่ทำให้คุณลักษณะก้าวหน้าทั้งหมดของ PWA เป็นไปได้ พนักงานบริการทำงานโดยไม่ขึ้นกับเบราว์เซอร์และบนเธรดอื่นกับ JavaScript หลัก

บริบทที่ปลอดภัย

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

ตัวอย่าง

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

 การอ่านที่แนะนำ: 12 ตัวอย่างที่ดีที่สุดของ Progressive Web Apps ในปี 2020

ที่พวกเขาทับซ้อนกัน

ประสบการณ์ที่คล้ายคลึงกันด้วยคุณสมบัติที่ทันสมัย

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

และเนื่องจากเป็นแนวทางในการพัฒนาเว็บไซต์ทั้งสอง จึงมีประโยชน์เกือบทั้งหมดจากเว็บ ซึ่งรวมถึง:

• หนึ่ง URL หนึ่งรหัสฐานสำหรับทุกแพลตฟอร์ม
• เพิ่มความปลอดภัยด้วย HTTPS
• การค้นพบที่ดีขึ้นและทันสมัยอยู่เสมอ

ต่างกันตรงไหน

นี่คือสิ่งที่น่าสนใจ เนื่องจากทั้งสองแนวทางในการพัฒนาเว็บ—ซึ่งโดยส่วนใหญ่จะมีลักษณะที่คล้ายคลึงกัน—แตกต่างกันมากในผลกระทบในโลกแห่งความเป็นจริง

ในแง่ของคุณสมบัติ

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

เพิ่มไปที่หน้าจอหลัก

ด้วยพนักงานบริการที่ลงทะเบียนและรายการเว็บแอป PWA สามารถติดตั้งได้ในทุกอุปกรณ์ที่มีเบราว์เซอร์ที่รองรับ

>> เรียนรู้เพิ่มเติม: สร้าง PWA แรกของคุณ

การแจ้งเตือนแบบพุช

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

ความสามารถออฟไลน์

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

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

 การอ่านที่แนะนำ: Progressive Web App (PWA) และการเข้าถึงฮาร์ดแวร์

ในแง่ของประสิทธิภาพ

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

กลไกการแคชที่เร็วขึ้น

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

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

ผลลัพธ์ที่ได้นั้นน่าประทับใจเป็นพิเศษบนเดสก์ท็อป เนื่องจากเราสามารถเห็นพนักงานบริการได้ทำหน้าที่ในการลดเวลาการ firstpaint ครั้งแรก (912 มิลลิวินาที) ให้เหลือเพียง 583 มิลลิวินาที นี่เป็นประสบการณ์ที่ใกล้เคียงกับประสบการณ์ทันทีที่ได้รับ

อย่างไรก็ตาม สิ่งต่าง ๆ บนอุปกรณ์พกพาไม่ค่อยน่าประทับใจนัก:

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

โดยรวม การเพิ่มประสิทธิภาพที่ทำได้โดยพนักงานบริการ—หรืออีกนัยหนึ่ง กับ กปภ.— ไม่มีอะไรที่น่าแปลกใจเลย แน่นอนว่ายังมีงานบางอย่างที่ต้องทำในส่วนของพนักงานบริการเคลื่อนที่ แต่เรารู้สึกว่าโดยรวมแล้ว มันยังเป็นเพียงก้าวเล็ก ๆ ของสิ่งที่เว็บเคยเป็น และก้าวไปในทิศทางที่ถูกต้อง

ในเรื่องความปลอดภัย

HTTPS—เส้นแบ่ง

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

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

เอกสารเว็บ MDN, เว็บแอปโปรเกรสซีฟ (PWA)

 บทความที่เกี่ยวข้อง: คุณต้องการ HTTPS หรือไม่

บทสรุป

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

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

สตีฟ จ็อบส์ ปี 2550