Progressive Web App ใน WordPress: บทช่วยสอนในการเปลี่ยนไซต์ WordPress ของคุณให้เป็น PWA
เผยแพร่แล้ว: 2020-12-25สวัสดีชาวเน็ต
ในบทช่วยสอนนี้ ฉันจะแสดงวิธีตั้งค่า Progressive Web App ใน WordPress (PWA) ในไม่กี่ขั้นตอนง่ายๆ
Progressive Web App มีมาระยะหนึ่งแล้ว และเว็บไซต์จำนวนมากที่ทำขึ้นในปัจจุบันก็ถูกสร้างให้เป็น PWA เช่นกัน ก่อนจะพูดถึงบทความนี้ ผมจะขออธิบายให้ฟังก่อนว่าการประปาส่วนภูมิภาคคืออะไร
Progressive Web App คืออะไร?
แม้ว่าคุณอาจได้ยินคำนี้เป็นครั้งแรก แต่คุณอาจพบเว็บแอปแบบก้าวหน้าหรือถูกขอให้ติดตั้งลงในโทรศัพท์ของคุณ หากคุณเคยใช้เว็บไซต์ Twitter มาก่อน คุณน่าจะเคยเจอสิ่งนี้
Progressive Web App เป็นเว็บแอปพลิเคชันประเภทหนึ่งที่สร้างด้วยเทคโนโลยีเว็บ (HTML, CSS, Javascript) เช่นเดียวกับเว็บแอปอื่นๆ แต่มีลักษณะและทำงานเหมือนแอปพลิเคชันดั้งเดิม PWA ทำงานบนเบราว์เซอร์ของคุณ แต่สามารถเพิ่มลงในหน้าจอหลักของโทรศัพท์ได้เหมือนกับแอปที่มาพร้อมเครื่อง มีไอคอนและชื่อ เช่นเดียวกับแอปที่มาพร้อมเครื่องอื่นๆ ในอุปกรณ์ของคุณ และเมื่อเปิดตัวก็ไม่มีสัญญาณชัดเจนว่าเป็นเว็บไซต์
ฉันควรใช้ปลั๊กอิน PWA เมื่อใด
เว็บแอปพลิเคชันสามารถเข้าถึงได้จากเบราว์เซอร์ผ่าน URL หรือค้นพบโดยคำค้นหา แต่มักขาดในสิ่งที่พวกเขาสามารถจะทำได้ PWAs มอบสิ่งที่ดีที่สุดให้กับคุณทั้งสองโลก (เว็บและแอปที่มาพร้อมเครื่อง) โดยเพิ่มขีดความสามารถของเว็บไซต์ของคุณโดยไม่ต้องเสียสละการเข้าถึง
ด้านล่างนี้คือข้อดีบางประการที่มาพร้อมกับการทำให้เว็บไซต์ของคุณเป็น กปภ.
- พวกเขาสามารถทำงานแบบออฟไลน์ได้ (ในระดับหนึ่ง)
- สามารถเข้าถึงได้ผ่าน URL หรือค้นพบผ่านเครื่องมือค้นหา
- พวกเขาอนุญาตให้คุณส่งผู้ใช้ของคุณเพื่อผลักดันการแจ้งเตือน
- เร็วกว่าและเบากว่าเว็บแอปทั่วไปมาก
- สามารถติดตั้งได้เหมือนกับแอปทั่วไปและยังสามารถแจกจ่ายผ่าน App Store ได้อีกด้วย
- พวกเขาสามารถเข้าถึงคุณลักษณะดั้งเดิมหลายอย่าง เช่น ตำแหน่งทางภูมิศาสตร์ กล้อง ไมโครโฟน การวางแนวหน้าจอ ฯลฯ
- มีการอัปเดตอยู่เสมอเนื่องจากคุณไม่จำเป็นต้องอัปเดตจากร้านแอป
หากคุณพบว่าคุณต้องการคุณสมบัติข้างต้นในเว็บไซต์ WordPress ให้พิจารณาติดตั้งปลั๊กอิน PWA สำหรับ WordPress
ฉันจะตั้งค่า PWA บน WordPress ได้อย่างไร
เมื่อคุณทราบแล้วว่า PWA คืออะไรและควรใช้เมื่อใด เรามาดูวิธีตั้งค่าใน WordPress กัน มีสามขั้นตอนที่เกี่ยวข้องในการทำเช่นนั้น
- การติดตั้งปลั๊กอิน PWA สำหรับ WordPress
- การตั้งค่าแอพ PWA WordPress
- ยืนยันว่าเราตั้งค่าเรียบร้อยแล้ว
การติดตั้งปลั๊กอิน WordPress PWA
ในการติดตั้งปลั๊กอิน PWA ตรวจสอบให้แน่ใจว่าคุณลงชื่อเข้าใช้บัญชี WordPress แล้วไปที่แดชบอร์ดของคุณ
ตอนนี้เลื่อนเคอร์เซอร์ไปที่ Plugins บนเมนูด้านซ้าย แล้วคลิก Add New จากเมนูป๊อปอัปทางด้านขวา ซึ่งควรนำคุณไปยังหน้า เพิ่มปลั๊กอิน
ในแถบค้นหาในหน้า Add Plugins ให้พิมพ์ "PWA" คุณจะเห็นรายการปลั๊กอิน PWA ที่พร้อมใช้งาน สำหรับบทช่วยสอนนี้ เราจะใช้ PWA สำหรับ WP & AMP เป็นปลั๊กอิน PWA ที่ค่อนข้างดีสำหรับ WordPress และสามารถใช้กับเว็บไซต์ AMP ได้
ตอนนี้คลิกที่ปุ่ม ติดตั้ง ทันที เมื่อติดตั้งปลั๊กอินแล้ว คุณจะเห็นปุ่ม เปิดใช้งาน คลิกเพื่อเปิดใช้งานปลั๊กอิน
ตอนนี้คุณควรถูกเปลี่ยนเส้นทางไปยังหน้าปลั๊กอิน PWA สำหรับ WP & AMP ตอนนี้ ไปที่การตั้งค่าปลั๊กอินกัน
การตั้งค่าแอพ PWA WordPress
เมื่อติดตั้งปลั๊กอินแล้ว มาตั้งค่ากัน คลิกแท็บ ทั่วไป จากแท็บในหน้า แท็บนี้เป็นตำแหน่งการตั้งค่าพื้นฐานสำหรับ กปภ.
ตั้ง ชื่อแอ ปและ ชื่อย่อ ของแอปเป็นชื่อเว็บแอปของคุณ จากนั้นให้คำอธิบายสั้นๆ แก่แอปของคุณโดยใช้ คำอธิบาย แอป ไอคอนแอ ปและไอคอน หน้าจอ เริ่มต้นของแอปควรเป็น PNG ที่มี 192 x 192 พิกเซล และ 512 x 512 พิกเซล ในการตั้งค่าไอคอน ให้คลิกที่ปุ่ม เลือกไอคอน ข้างช่องข้อความ
หน้าออฟไลน์ จะกำหนดหน้าเว็บที่จะแสดงเมื่อผู้ใช้ออฟไลน์ เมื่อคุณคลิกที่เมนูแบบเลื่อนลง คุณจะเห็นรายการหน้าเว็บที่คุณสามารถตั้งค่าสำหรับหน้าออฟไลน์ของคุณได้
คุณยังสามารถสร้างหน้าเว็บสำหรับสถานการณ์นี้โดยเฉพาะและให้หน้าเว็บนั้นพูดว่า “คุณกำลังออฟไลน์อยู่ คุณจะไม่สามารถเข้าถึงคุณสมบัติบางอย่างของแอพได้” ปล่อยให้การตั้งค่าที่เหลือเหมือนเดิม คุณสามารถปรับแต่งได้ในภายหลังตามที่เห็นสมควร คลิก บันทึกการตั้งค่า ที่ด้านล่างของแท็บเมื่อดำเนินการเสร็จ
นั่นคือทั้งหมดสำหรับแท็บ ทั่วไป มีอีกหนึ่งรายการในแท็บ ขั้นสูง ที่เราจะทำการแก้ไขเช่นกัน แม้ว่าจะเป็นทางเลือกก็ตาม คลิกแท็บ ขั้นสูง แล้วเลื่อนลงมาจนเจอ Custom Add To Home Banner
ยกเลิกการเลือก "แสดงการเพิ่มการตอบสนองที่กำหนดเองในแบนเนอร์หน้าแรก" แบนเนอร์ไม่สามารถปรับแต่งได้ และแบนเนอร์ที่เป็นค่าเริ่มต้นก็ดูไม่ดี นั่นเป็นเหตุผลที่ฉันชอบปิดการใช้งาน แต่ให้เปิดใช้งานสำหรับเดสก์ท็อป ตอนนี้คลิกที่ บันทึกการตั้งค่า เพื่อบันทึกการเปลี่ยนแปลงของคุณ และนั่นแหล่ะ! คุณตั้งค่าไซต์ WordPress เป็น PWA เรียบร้อยแล้ว ตอนนี้เราจะตรวจสอบเว็บไซต์เพื่อให้แน่ใจว่าตั้งค่าสำเร็จแล้ว
ยืนยันการตั้งค่าการประปาส่วนภูมิภาค
มีสองวิธีในการตรวจสอบว่าไซต์ WordPress ของคุณเป็น PWA หรือไม่ วิธีแรกคือการตรวจสอบเว็บไซต์โดยใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เดสก์ท็อปของคุณ
เปิดเว็บไซต์ในเบราว์เซอร์ของคุณและคลิกขวาที่เว็บไซต์ คลิกที่ ตรวจสอบองค์ประกอบ หรือ ตรวจสอบ (ขึ้นอยู่กับเบราว์เซอร์ของคุณ) ตอนนี้คลิกที่แท็บ คอนโซล คุณควรเห็นการอ้างอิงถึง “กปภ.” หรือ “พนักงานบริการ” Service Worker คือไฟล์ JavaScript หรือสคริปต์ที่ขับเคลื่อนฟังก์ชันการทำงานส่วนใหญ่ของเว็บแอปแบบโปรเกรสซีฟ
วิธีที่สองในการตรวจสอบว่าไซต์ WordPress ของคุณเป็น PWA หรือไม่คือเปิดเว็บไซต์บนโทรศัพท์ของคุณ หากคุณใช้ Android คุณควรได้รับป๊อปอัปที่ด้านล่างของหน้าจอเพื่อขอให้คุณเพิ่มแอปลงในหน้าจอหลัก เมื่อคุณคลิกที่มัน คุณจะได้รับกล่องโต้ตอบเพื่อยืนยันการเลือกของคุณ ยืนยันว่าจะเพิ่มแอปลงในหน้าจอหลักของโทรศัพท์
สำหรับ iOS กระบวนการนี้ไม่ตรงไปตรงมาเล็กน้อย ผู้ใช้ iOS จะไม่ถูกขอให้ "เพิ่มไปที่หน้าจอหลัก" โดยอัตโนมัติเมื่อเปิดไซต์ PWA ในการติดตั้ง PWA บนโทรศัพท์ iOS ให้คลิกที่ปุ่มแชร์ที่ด้านล่างของเบราว์เซอร์เมื่อโหลดไซต์แล้ว ตอนนี้เลือก เพิ่มไปที่หน้าจอ หลัก จากรายการตัวเลือกที่แสดงให้คุณเห็น ตอนนี้คุณควรเห็นการประปาส่วนภูมิภาคบนหน้าจอหลักของคุณ
ปัจจุบันบริษัทจำนวนมาก เช่น Uber, Instagram, Twitter และ Forbes ใช้ PWA เข้าถึงและมีส่วนร่วมกับผู้ใช้ได้มากกว่าแอปที่มาพร้อมเครื่อง หากสิ่งนี้สำคัญสำหรับคุณ (รวมถึงเหตุผลอื่นๆ ที่กล่าวถึงข้างต้น) คุณควรทำให้เว็บไซต์ WordPress ของคุณเป็นแอพ PWA WordPress อย่างแน่นอน
นั่นคือมัน โปรดแสดงความคิดเห็นหากคุณมีคำถามใด ๆ และฉันจะตอบโดยเร็วที่สุด ครั้งต่อไป!
ตัวเลือกและคำแนะนำของฉันสำหรับคุณ:
เครื่องมือสร้างใบรับรอง SSL ฟรี: https://punchsalad.com/ssl-certificate-generator
โฮสติ้งที่ฉันใช้: Hostpapa (ส่วนลด 60%)
ฉันจะรับโดเมนของฉันได้ที่ไหน: ชื่อ Cheap
ดูปลั๊กอิน WP ที่ฉันใช้ที่นี่
ลิงค์ด้านบนบางส่วนอาจเป็นลิงค์พันธมิตร
นี่คือรายการบทความที่คุณอาจสนใจ:
- วิธีเพิ่มความเร็ว WordPress ด้วยปลั๊กอิน
- สร้าง ส่งแผนผังไซต์ของคุณไปยัง Google Search Console
#sitemapforwordpress #digitalworld #พันช์สลัด