Progressive Web Apps (PWA)
การเติบโตอย่างมหาศาลของอุปกรณ์มือถือนำมาซึ่งการเปลี่ยนแปลงมากมายในวิธีที่เราบริโภคเนื้อหาดิจิทัล เราไม่ควรพูดถึงอนาคตแต่พูดถึงปัจจุบันเพื่อทำความเข้าใจว่า Progressive Web Apps หรือ PWAs คืออะไร
Progressive Web Apps หรือ PWAs คืออะไร?
Progressive Web Apps คือ การผสมผสานทางเทคโนโลยีของแอปพลิเคชันเนทีฟและเว็บแอปพลิเคชันที่ใช้ HTML5 ที่เรารู้จัก PWAs เข้ามาเพื่อเชื่อมช่องว่างทางเทคโนโลยีระหว่างแอปและหน้าเว็บ
Google เป็นหนึ่งในผู้สนับสนุนหลักในการส่งเสริมการพัฒนาเทคโนโลยีประเภทนี้ เพื่อทำความเข้าใจคุณสมบัติให้ดีขึ้น เราต้องพูดถึงแอปพลิเคชันที่ต้อง เชื่อถือได้ รวดเร็ว และน่าสนใจ
คุณสมบัติที่ Progressive Web Apps ต้องมี
เพื่อทำให้แนวคิด PWA ชัดเจนและอธิบายเพียงพอ มาดำดิ่งสู่คุณสมบัติที่จำเป็นที่เทคโนโลยีเหล่านี้ต้องมี
แน่นอน เรากำลังพูดในแง่ทั่วไป จากนั้น แต่ละโมเดลธุรกิจ/บริการจะปรับวัตถุประสงค์ตามความต้องการของกลุ่มเป้าหมายของตน
ความเร็ว
เวลาคือเงิน ไม่ใช่แค่สำหรับ Google แต่สำหรับทุกธุรกิจที่การโหลดผลิตภัณฑ์ที่ช้าอาจทำให้ผู้ใช้ละทิ้งการซื้อที่อาจเกิดขึ้น
Google เน้นย้ำหลักการนี้มาเป็นเวลานาน การกำเนิดของโครงการ AMP มีวัตถุประสงค์นี้ และตอนนี้ PWAs เข้าร่วมกับความต้องการเข้าถึงข้อมูลจากแอปพลิเคชันอย่างรวดเร็ว
ผู้ใช้ในปัจจุบันไม่มีความอดทน พวกเขาไม่รอให้เว็บไซต์โหลดเสร็จ 53% ของผู้ใช้จะไม่รอเว็บไซต์โหลดเกิน 3 วินาที ตามข้อมูลของ Think with Google
เชื่อถือได้
เมื่อเราพูดถึงความน่าเชื่อถือ เราหมายถึงการรับประกันการทำงานของเว็บไซต์ ขอบคุณสิ่งที่รู้จักกันในชื่อ Service Workers ปัญหาการเชื่อมต่อเครือข่ายไม่ควรขัดขวาง PWA ไม่ให้โหลด
ติดตั้งได้
PWAs สามารถติดตั้งได้โดยไม่ต้องไปที่ Chrome Store, Apple Store หรือ app store ที่มีอยู่ใดๆ จำไว้ว่าไม่ใช่แอปพลิเคชันเนทีฟ ดังนั้นเราสามารถเข้าถึงโดยไม่ต้องผ่าน stores เหล่านี้
การติดตั้งทำงานเหมือน shortcut ไม่ต้องใช้พื้นที่เก็บไฟล์ต่างๆ
อุปกรณ์ที่แตกต่าง: มือถือและเดสก์ท็อป
Codebase รวมเป็นหนึ่งระหว่างทั้งสองอุปกรณ์ ซึ่งหมายถึงเทคนิค responsive design ใช้กับทั้งมือถือและเดสก์ท็อป
ข้อดีและข้อเสียของ PWAs
ข้อดีบางอย่างได้กล่าวไปแล้วเมื่ออธิบายคุณสมบัติของแอปพลิเคชันแบบ progressive แต่มีอีกหลายเหตุผลที่ควรพิจารณาใช้เทคโนโลยีนี้ในธุรกิจของเรา
- ประหยัดทรัพยากร
- ไม่ต้องติดตั้ง
- ความเร็วในการโหลดสูงมาก
- การแจ้งเตือน push ตรงสู่สมาร์ทโฟน
- ทำงานบนระบบปฏิบัติการทั้งหมด
- ความปลอดภัยที่ดีขึ้น
- งานพัฒนาและบำรุงรักษาน้อยกว่า native app
- ประหยัดกว่า native app
ข้อเสีย
- ต้องการการเชื่อมต่ออินเทอร์เน็ต
- ไม่ใช่ทุกเบราว์เซอร์รองรับ PWAs
- การใช้แบตเตอรี่สูง
Service Worker คืออะไร?
กลับไปที่ด้านเทคนิคโดยย่อ เราต้องพูดถึงด้านบางอย่างที่หากไม่มีแอปพลิเคชันแบบ progressive จะทำงานไม่ได้ Service workers เป็น scripts ที่ทำงานในพื้นหลัง สร้างคำขอไปยังเว็บแอปพลิเคชัน cache หรือเครือข่ายเอง
สิ่งหนึ่งที่ควรรู้คือ Service Workers สามารถทำงานเฉพาะเมื่อคุณมีใบรับรอง SSL และให้บริการผ่าน https
ทีนี้มาดูทั้งหมดด้วยตัวอย่าง: เว็บไซต์ของ BMW และ PWA
ตัวอย่าง PWA: BMW
ผมพยายามเขียนบทความโดยไม่เข้าลึกในด้านเทคนิค และตอนนี้เราจะมาดูตัวอย่างแอปพลิเคชันที่จะช่วยเข้าใจแนวคิด PWA ได้ดีขึ้น
หากเราเข้าเว็บไซต์ของ BMW เราจะเห็นว่ามีการออกแบบที่น่าสนใจมาก ให้ความสำคัญกับภาพ แต่นอกเหนือจากการพูดถึงการออกแบบ มาดูประเภทของเว็บไซต์ที่เรากำลังจัดการ
ดูเหมือนว่าเป็นเว็บไซต์ "ปกติ" แต่หากคุณเจาะลึกในโค้ดเราได้รับความประหลาดใจครั้งแรก แน่นอน เป็นเว็บไซต์ ที่พัฒนาทั้งหมดใน AMP ไม่ใช่แค่เวอร์ชันมือถือ
แต่เรามาทำเรื่องที่ทำกันในวันนี้
เมื่อเข้าเว็บไซต์แล้ว ไปที่แถบ "customize and control" ของ Chrome
ตามที่เห็น หน้าต่างเปิดด้วย เนื้อหาของเว็บไซต์ BMW เปรียบเทียบเนื้อหาทั้งสอง เราเห็นว่าเหมือนกันแทบทุกอย่าง
ภาพเว็บไซต์ในเบราว์เซอร์ (Chrome)
ภาพเว็บไซต์ใน PWA เดสก์ท็อป
ผู้พัฒนาของ BMW สามารถรักษาลักษณะภาพที่เหมือนกัน เมื่อเรายอมรับ "การติดตั้ง" ของ PWA ใน Chrome applications folder หรือแม้แต่บนเดสก์ท็อป (ขึ้นอยู่กับ OS ผมใช้ MacOS อยู่) shortcut ของ PWA ถูกดาวน์โหลด
หากเรารู้สึกว่าติดตั้งแอปมากเกินไปและต้องการถอน เราเพียงต้องไปที่หน้าต่างเวอร์ชัน PWA คลิกด้านขวาเช่นเดียวกับใน Chrome และเลือกถอนการติดตั้ง
ในเวอร์ชันมือถือก็คล้ายกัน เมื่อเราเข้าเว็บไซต์ที่มีเวอร์ชัน PWA เราได้รับการแจ้งเตือนให้ "สร้าง shortcut"
เมื่อเข้าเว็บไซต์ที่มี PWA เราจะเห็นตัวเลือกในการสร้าง shortcut
หากเรายอมรับ เราจะเห็นไอคอน PWA บนเดสก์ท็อปมือถือ
DevTools เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ PWAs
ในจุดนี้ ผมต้องการดำดิ่งสู่ตัวอย่างเพื่ออธิบายแนวคิดและคุณสมบัติของแอปพลิเคชันประเภทนี้
สำหรับสิ่งนี้ เราจะใช้เครื่องมือผู้พัฒนาที่ Chrome ให้ (DevTools) เราเปิด inspector ด้วยปุ่มขวาและไปที่ Application
Chrome Devtools
App Manifest (Web Application Manifest)
manifest เป็นไฟล์ JSON เล็กพร้อมด้านสไตล์พื้นฐานที่ให้กับเบราว์เซอร์เพื่อหลีกเลี่ยงการเปลี่ยนแปลงที่ฉับพลัน
ตัวอย่าง Manifest (JSON)
Service Workers
ตามที่อธิบายก่อนหน้า ตอนนี้เราสามารถเห็นว่ามันเกี่ยวกับอะไร เราเห็นไฟล์ JS และใน scripts ที่ใช้ Service Worker ติดตั้งในเบราว์เซอร์ เราจะมีหลายตัวจากเว็บแอปพลิเคชันอื่น
หนึ่งในฟังก์ชันหลักของโค้ดประเภทนี้คือการรับรองว่ามีการให้บริการเวอร์ชันเดียวกันเสมอ (ควบคุม cache) แม้ว่าเราจะเปิดแท็บอื่น
ใช้ PWA ใน WordPress อย่างไร?
ในขณะที่หากเราพัฒนาเว็บไซต์ด้วยโค้ดของเราเอง เราต้องทำงานด้วยตนเองค่อนข้างมาก สถานการณ์จะแตกต่างมากหากเราพัฒนาเว็บไซต์ใน WordPress หากเป็นเช่นนี้ เราจะมี plugins หลายตัวให้ใช้ที่จะอนุญาตให้เปิดใช้เทคโนโลยี PWA ในไม่กี่คลิก เวอร์ชัน PWA ของ SEO Alive แท้จริงแล้วเป็นผลของ plugin ที่เราแนะนำนี้
plugins ที่ได้รับความนิยมมากที่สุดในการใช้ PWA ใน WordPress
PWAs ในการตลาด
สำหรับเราที่ทำงานในด้านการตลาด Progressive Web Apps สามารถช่วยให้เราบรรลุวัตถุประสงค์ที่ทุกฝ่ายการตลาดมีในใจ เพื่อขยายแบรนด์
ความภักดีและการขาย
หนึ่งในวัตถุประสงค์ที่บางแบรนด์ทำงานแย่ที่สุด เราทุกคนรู้จักการมีส่วนร่วมต่ำที่แบรนด์โทรศัพท์มือถือมีในการดูแลลูกค้า ตัวอย่างเช่น
การแจ้งเตือน push ใน PWAs เป็นหนึ่งในการกระทำที่ทำงานได้ดีที่สุด และมีส่วนช่วยในการสร้างยอดขาย
การศึกษาที่ดำเนินการโดย Gartner เกี่ยวกับ PWAs ให้สถิติที่น่าสนใจมากชุดหนึ่งเกี่ยวกับ Lancome และ Alibaba Lancome รายงานการเพิ่มขึ้น 17% ในการแปลง 51% ใน sessions จากอุปกรณ์มือถือ และ 52% บน iOS Alibaba (กลุ่มที่ Aliexpress สังกัด) ปรับปรุงอัตราการแปลง 76%
แม้ว่าเราจะพูดถึง 2 ยักษ์ใหญ่ระดับโลก การมีแอปบนมือถือที่เวลาโหลดและการดำเนินการไม่เป็นภาระ บวกกับการเคารพการออกแบบที่ดี ได้แสดงให้เห็นว่าเพิ่มอัตราการแปลง
โดยสรุป เราสามารถพูดได้ว่า PWAs กำลังแพร่หลายมากขึ้น โดยเฉพาะในแบรนด์ใหญ่ ในสเปน เราคงใช้เวลาสักหน่อยในการตระหนักถึงศักยภาพมหาศาลของเทคโนโลยีนี้ แต่ไม่นานกว่าที่จะนำมาใช้
เทคโนโลยีใดที่อำนวยความสะดวกในการนำทางบนมือถือมีความสำคัญอย่างมาก เราใช้เวลาหลายชั่วโมงกับสมาร์ทโฟน และท้ายที่สุด การเข้าถึงทั้งเนื้อหาและผลิตภัณฑ์เป็นธุรกิจ
อ้างอิง
โดย: David Kaufmann
ในช่วง 10+ ปีที่ผ่านมา ผมหมกมุ่นกับ SEO อย่างสมบูรณ์ — และพูดตรง ๆ ก็ไม่อยากให้เป็นแบบอื่น
อาชีพของผมก้าวขึ้นไปอีกระดับเมื่อทำงานเป็นผู้เชี่ยวชาญ SEO อาวุโสที่ Chess.com — หนึ่งใน 100 เว็บไซต์ที่มีผู้เข้าชมมากที่สุดในอินเทอร์เน็ต การทำงานในระดับนี้สอนสิ่งที่ไม่มีหลักสูตรหรือประกาศนียบัตรใดสอนได้
จากประสบการณ์นี้ ผมก่อตั้ง SEO Alive — เอเจนซีสำหรับแบรนด์ที่จริงจังกับการเติบโตแบบออร์แกนิก และเพราะหาเครื่องมือที่จัดการทั้งโลกคลาสสิกและยุค AI ได้ดีไม่ได้ ผมจึงสร้าง SEOcrawl ขึ้น หากคุณกำลังมองหาพาร์ตเนอร์ SEO มากประสบการณ์ที่รักสาขานี้ — ยินดีพูดคุยครับ!
ค้นพบเนื้อหาเพิ่มเติมของผู้เขียนคนนี้
