การวางฐานราก

รากฐานที่มั่นคง

รากฐานที่มั่นคงคือข้อกำหนดพื้นฐานสำหรับการสร้าง PWA ที่ยอดเยี่ยม ในการใช้รากฐานนี้ คุณต้องออกแบบและเขียนโค้ดสำหรับข้อจำกัดของเว็บโดยใช้หลักการ 2 ข้อดังนี้

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

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

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์

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

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

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์มีองค์ประกอบทางเทคนิค 3 ส่วน ได้แก่

  • ตารางกริดแบบไหล
  • สื่อที่ยืดหยุ่น
  • การค้นหาสื่อ

Ethan สรุปว่าข้อกำหนดทางเทคนิคเหล่านี้ยังนั้นไม่เพียงพอ ขั้นต่อไปก็ต้องใช้วิธีคิดที่ต่างออกไปด้วย

ความเชื่อผิดๆ ของผู้ใช้อุปกรณ์เคลื่อนที่

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

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

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

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

โหมดมินิ

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

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

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

อุปกรณ์แบบพับได้และแบบผสม

ปัจจุบันอุปกรณ์แบบพับได้และอุปกรณ์ไฮบริดยังพบเห็นได้ทั่วไปดังนี้

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

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

ดำเนินการทุกอย่างก่อน

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

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

Luke Wroblewski

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

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

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

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

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

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

ใช้ @supports ตรวจสอบการรองรับเบราว์เซอร์ของฟีเจอร์ CSS และใช้กฎตามผลลัพธ์ ซึ่งจะมีผลกับทั้งพร็อพเพอร์ตี้และค่า CSS หากระบบรองรับพร็อพเพอร์ตี้และค่าใดไม่ได้ ค่านั้นก็จะล้มเหลว เช่นเดียวกับพร็อพเพอร์ตี้ที่ระบบไม่รองรับ โค้ด JavaScript สามารถเข้าถึงได้ผ่าน CSSSupportsRule

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

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

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

หลีกเลี่ยงการตรวจหาอุปกรณ์

คุณควรทดสอบการสนับสนุนฟีเจอร์โดยตรงแทนที่จะตั้งสมมติฐานด้านการสนับสนุนตามสตริง User-Agent

สตริง User-agent ไม่เคยเชื่อถือได้อย่างแท้จริง เบราว์เซอร์นี้ต้องอาศัยความรู้ที่แทบจะสมบูรณ์แบบเกี่ยวกับเบราว์เซอร์ ระบบปฏิบัติการ และอุปกรณ์ต่างๆ ที่คุณมีอยู่ในการ "ลองเดาถูก" ซึ่งถึงกระนั้นก็ตาม ไซต์ดังกล่าวยังอาจเสี่ยงต่อการปลอมแปลงของผู้ใช้ได้ เช่น การเปลี่ยนเส้นทางเว็บไซต์บนเดสก์ท็อปในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่นั้นก็ทำได้ง่ายๆ อย่างการปลอมแปลงสตริง User Agent บนเดสก์ท็อป

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

เน้นเนื้อหาก่อน

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

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

การออกแบบภายใน

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

หลักการเหล่านี้ผสมผสานกันเพื่อสร้างสิ่งใหม่ให้กับเรา นั่นก็คือการออกแบบภายใน ในการพูดคุยเรื่อง Designing Intrinsic Layouts ทาง Jen Simmons จะพูดถึงการใช้เครื่องมือ CSS สมัยใหม่ เช่น Grid, Flexbox, เลย์เอาต์การจัดวาง และโหมดการเขียน เพื่อออกแบบและสร้างอินเทอร์เฟซผู้ใช้ เธอพูดว่าด้วยเครื่องมือเหล่านี้

คุณสามารถทำให้เลย์เอาต์มีเอกลักษณ์ ในเนื้อหาที่เรามีและการออกแบบที่เราต้องการ

เจน ซิมมอนส์

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

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

ประสิทธิภาพเว็บ

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

ประสิทธิภาพของเว็บมีขั้นตอนดังนี้

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

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

Web Vitals

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

  • กำลังโหลด
  • อินเทอร์แอกทีฟ
  • ความเสถียรของภาพ

ชุดเมตริกจาก Core Web Vitals ที่แสดงผลลัพธ์ประสิทธิภาพของเว็บไซต์

Core Web Vitals ช่วยให้คุณทราบข้อมูลโดยย่อว่า PWA ดีหรือไม่ดีต่อประสิทธิภาพเว็บและประสบการณ์ของผู้ใช้

มูลนิธิ PWA

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

แหล่งข้อมูล