การแปลงไซต์ WordPress ของคุณให้เป็น PWA: เปิดด้วย Trend

เผยแพร่แล้ว: 2021-02-17

สารบัญ

การเคลื่อนไหวของ กปภ. เป็นการเคลื่อนไหวที่เปลี่ยนแปลงและยิ่งใหญ่จนกลายเป็นเหมือนคลื่นยักษ์ที่กวาดล้างโลกเทคโนโลยี เปลี่ยนแปลงทุกอย่างในทางที่ดีขึ้น

แบรนด์ที่มีอิทธิพลมากที่สุดในโลก ได้แก่ Twitter กับ Twitter Lite อันโด่งดัง ได้ทำให้ PWA เป็นรากฐานอย่างเป็นทางการสำหรับการพัฒนาในอนาคตของพวกเขา

 การอ่านที่แนะนำ: 12 ตัวอย่างเว็บแอปแบบก้าวหน้าสำหรับแรงบันดาลใจของคุณ

WordPress หรือให้เจาะจงกว่านั้นคือ Automattic ผู้อยู่เบื้องหลัง WordPress ได้ริเริ่มการเคลื่อนไหวของ WordPress PWA ใน Chrome Dev Summit 2017 ด้วยการประกาศความคืบหน้าในการรวม Progressive Technologies เข้ากับเวิร์กโฟลว์ของแพลตฟอร์มเช่น WordPress

ตั้งแต่นั้นมา ภูมิทัศน์ของ WordPress ก็เปลี่ยนไปอย่างมาก การไม่แปลง WordPress ของคุณเป็น PWA นั้นแทบจะ รับประกันว่าผู้ดูจะสูญเสีย ความพึงพอใจ

ทำความเข้าใจ กปภ

ตามที่ Google พูดไว้ Progressive Web Apps คือ

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

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

ทำไมต้อง PWA สำหรับ WordPress?

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

กปภ.ทดลองใน Jetpack
WordPress ก่อนและหลังการเพิ่มประสิทธิภาพ PWA

ยกตัวอย่าง Twitter Lite อันโด่งดัง กรณีศึกษาแสดงให้เห็นว่า Twitter มีการเปลี่ยนแปลงอย่างมากในพฤติกรรมของผู้ใช้ด้วยการเปิดตัว Twitter Lite

Nicolas Gallagher หัวหน้าฝ่ายวิศวกรรมของ Twitter Lite กล่าวว่า:

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

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

สถิติการประปาส่วนภูมิภาค
ที่มา: PWAstats

ข้อกำหนดเบื้องต้นในการตั้งค่า PWA ใน WordPress

  • Progressive Web Apps ต้องการให้เว็บไซต์ WordPress ของคุณให้บริการจากแหล่งกำเนิดที่ปลอดภัย เช่น เว็บไซต์ของคุณ ควรเป็น HTTPS ไม่ใช่ HTTP
  • เวอร์ชัน WordPress: สูงกว่า 3.5.0
  • เวอร์ชัน PHP: สูงกว่า 5.3

วิธีแปลงไซต์ WordPress ของคุณเป็น PWA

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

1. พัฒนา PWA . ของคุณด้วยตนเอง

การพัฒนา PWA—แม้จะมีค่าใช้จ่ายน้อยกว่าการพัฒนาประเภทอื่น—ยังคง ต้องใช้ความรู้ด้านการเขียนโปรแกรมจำนวนมาก และผู้พัฒนาจะต้องรู้วิธีการของเขาหรือเธอในกรอบงานและไลบรารี Javascript ที่แพร่หลาย โดยเฉพาะอย่างยิ่ง Angular และ React ด้วยเหตุนี้จึงมักแนะนำว่าเจ้าของไซต์ที่ไม่มีประสบการณ์ควรลองใช้ปลั๊กอิน (ทั้งแบบฟรีและ/หรือจ่ายเงิน) หรือจ้างนักพัฒนามืออาชีพ เนื่องจากกระบวนการสร้าง PWA ไม่ใช่เรื่องง่าย

ขณะพยายามสร้าง PWA ด้วยตนเอง อย่าลืมทำตาม Progressive Web App Checklist ของ Google และทดสอบหน้าเว็บของคุณกับเครื่องมือ Lighthouse เพื่อประสบการณ์การใช้งานที่ดีที่สุด

2. ด้วยปลั๊กอิน

ไม่ต้องกังวล เจ้าของไซต์ที่ไม่ใช่นักพัฒนา! WordPress นำเสนอปลั๊กอินที่หลากหลายซึ่งทำหน้าที่ส่วนใหญ่เพื่อให้ผู้ใช้เลือกได้ ปลั๊กอินเหล่านี้มี 2 ประเภท: ปลั๊กอินฟรีและจ่ายเงิน

ปลั๊กอินฟรี

1. SuperPWA

แบนเนอร์ SuperPWA

ที่ด้านบนสุดของปลั๊กอิน PWA ฟรีสำหรับ WordPress คือ SuperPWA ที่มีบริการและคุณภาพที่เป็นเลิศมาอย่างยาวนาน

SuperPWA นั้นง่ายต่อการกำหนดค่า ใช้เวลาน้อยกว่าหนึ่งนาทีในการตั้งค่า Progressive Web App ของคุณ SuperPWA ทำการถอนการติดตั้งใหม่ทั้งหมด โดยลบทุกรายการฐานข้อมูลและไฟล์ที่สร้างขึ้น ที่จริงแล้วไม่มีการตั้งค่าเริ่มต้นใด ๆ ที่บันทึกลงในฐานข้อมูลจนกว่าคุณจะบันทึกด้วยตนเองในครั้งแรก

การติดตั้งที่ใช้งานอยู่: 30000+
ระดับดาว: ★★★★★

2. กปภ

ป้าย กปภ

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

หากคุณกำลังพัฒนาปลั๊กอินหรือธีมที่มีพนักงานบริการอยู่ด้วย ให้พิจารณาใช้ปลั๊กอิน PWA นี้ หรืออย่างน้อยก็ใช้เฉพาะการใช้งานที่มีอยู่แล้วภายในเป็นทางเลือกแทนเมื่อปลั๊กอิน PWA ไม่พร้อมใช้งาน

Last updated: 5 months ago
การติดตั้งที่ใช้งานอยู่: 20,000+
ระดับดาว: ★★★★

3. กปภ สำหรับ WP & AMP

PWA สำหรับแบนเนอร์ WP

สำหรับข้อเสนอฟรี PWA สำหรับ WP & AMP นั้นยอดเยี่ยมในสิ่งที่ทำ ดี ใช้งานง่าย และให้บริการลูกค้าที่ยอดเยี่ยม อย่างไรก็ตาม เอกสารประกอบยังขาดอยู่เล็กน้อย ซึ่งอาจส่งผลให้การทำงานทุกอย่างยากขึ้น
การติดตั้งที่ใช้งานอยู่: 8,000+
ระดับดาว: ★★★★★

4. WebSuite PWA

ปลั๊กอิน WebSuit WordPress PWA

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

การติดตั้งที่ใช้งานอยู่: 30+

ระดับดาว: ★★★★★

5. Simple PWA สำหรับ WordPress โดย Webkul

Webkul PWA สำหรับ WordPress

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

การติดตั้งที่ใช้งานอยู่: ไม่มีข้อมูล

ระดับดาว: ไม่มีข้อมูล

วิธีการติดตั้งปลั๊กอิน PWA

ขั้นตอนการติดตั้งปลั๊กอิน WordPress PWA ค่อนข้างตรงไปตรงมาและคล่องตัว ด้านล่างเราจะใช้ SuperPWA เป็นตัวอย่าง:

การติดตั้งเวิร์ดเพรส :

  • ไป ที่ WordPress Admin > Plugins > Add New
  • ค้นหา ' Super Progressive Web Apps '
  • คลิก " ติดตั้งทันที " จากนั้น " เปิดใช้งาน " Super Progressive Web Apps

ในการติดตั้งด้วยตนเอง:

  • อัปโหลดโฟลเดอร์ super-progressive-web-apps ไปยัง /wp-content/plugins/ ไดเร็กทอรีบนเซิร์ฟเวอร์ของคุณ
  • ไปที่ WordPress Admin > Plugins
  • เปิดใช้งานปลั๊กอิน Super Progressive Web Apps จากรายการ

บทสรุป

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

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


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

  • Magento PWA Studio: การเปรียบเทียบโดยละเอียดกับหน้าร้าน Vue
  • การรวม Magento WordPress: คำแนะนำทีละขั้นตอน