แอพพลิเคชั่นเว็บที่ก้าวหน้ามาก
แอพพลิเคชั่นเว็บที่ก้าวหน้ามาก
Superpwa ช่วยในการแปลงเว็บไซต์ WordPress ของคุณให้เป็นเว็บแอพที่ก้าวหน้าได้อย่างง่ายดาย
เยี่ยมชมเว็บไซต์»
รายงานข้อผิดพลาด·ปลั๊กอิน WordPress ·รีวิว·คำถามที่พบบ่อย·การมีส่วนร่วม
ยินดีต้อนรับสู่ที่เก็บ Super Pwa GitHub
⚡การสาธิต: superpwa.com ตรวจสอบวิดีโอเพื่อทราบว่ามันทำงานอย่างไร
แอพพลิเคชั่นเว็บแบบก้าวหน้าคืออะไร
Progressive Web Apps (PWA) เป็นเทคโนโลยีใหม่ที่สร้างจุดศูนย์กลางระหว่างเว็บไซต์และแอพมือถือ พวกเขาติดตั้งบนโทรศัพท์เช่นแอพปกติ (เว็บแอป) และสามารถเข้าถึงได้จากหน้าจอหลัก
ผู้ใช้สามารถกลับมาที่เว็บไซต์ของคุณโดยเปิดตัวแอพจากหน้าจอหลักและโต้ตอบกับเว็บไซต์ของคุณผ่านอินเทอร์เฟซเหมือนแอพ ผู้เยี่ยมชมการกลับมาของคุณจะได้สัมผัสกับเวลาโหลดเกือบภายในและเพลิดเพลินไปกับผลประโยชน์ที่ยอดเยี่ยมของ PWA ของคุณ!
Super Progressive Web Apps ทำให้คุณสามารถแปลงเว็บไซต์ WordPress ของคุณให้เป็นแอพพลิเคชั่นเว็บแบบก้าวหน้าได้อย่างง่ายดาย!
สนับสนุนโครงการ
หากคุณรู้สึกตื่นเต้นเป็นอย่างยิ่งและต้องการสนับสนุนเราในทางเล็ก ๆ โปรดพิจารณานำแสดงโดยและ/หรือแบ่งปัน repo! สิ่งนี้ช่วยให้เรารู้จักและเติบโตชุมชน
นอกจากนี้คุณยังสามารถสนับสนุนเราผ่านการติดตามในโซเชียลมีเดียและแบ่งปันเกี่ยวกับเรา
- การติดตั้ง
เมื่อติดตั้ง superpwa ⚡ผู้ใช้จะเรียกดูเว็บไซต์ของคุณจากอุปกรณ์มือถือที่รองรับจะเห็นประกาศ "เพิ่มลงในหน้าจอหลัก" (จากด้านล่างของหน้าจอ) และจะสามารถ 'ติดตั้งเว็บไซต์ของคุณ' บนหน้าจอหลักของอุปกรณ์ ทุกหน้าที่เข้าชมจะถูกจัดเก็บไว้ในอุปกรณ์ของพวกเขาและจะสามารถอ่านได้แม้ว่าจะออฟไลน์!
Superpwa นั้นง่ายต่อการกำหนดค่าใช้เวลาน้อยกว่าหนึ่งนาทีในการตั้งค่าเว็บแอปก้าวหน้าของคุณ! Superpwa ทำการถอนการติดตั้งที่สะอาดโดยการลบทุกรายการและไฟล์ที่สร้างขึ้น ในความเป็นจริงไม่มีการตั้งค่าเริ่มต้นใด ๆ ที่จะถูกบันทึกลงในฐานข้อมูลจนกว่าคุณจะบันทึกด้วยตนเองในครั้งแรก ไปข้างหน้าและลองดู
ข้อกำหนดขั้นต่ำของเว็บแอปพลิเคชันแบบก้าวหน้า
วิดีโอเกี่ยวกับวิธีการเพิ่มลงในหน้าจอหลักและเว็บแอพพลิเคชั่น Progressive ทำงานบนเบราว์เซอร์ที่แตกต่างกัน
Google Chrome สำหรับ Android |
Mozilla Firefox สำหรับ Android |
Microsoft Edge สำหรับ Android |
Samung Internet สำหรับ Android |
PWA บน iOS - เบราว์เซอร์ Safari |
|---|
เอกสารรายละเอียดสำหรับการทดสอบ PWA บนเบราว์เซอร์
- PWA บน Chrome สำหรับ Android
- PWA บนเดสก์ท็อป - โครเมี่ยม
- PWA บนอุปกรณ์ iOS - เบราว์เซอร์ Safari
- PWA บนเบราว์เซอร์ Microsoft Edge สำหรับ Android
- PWA บนเบราว์เซอร์ Internet Samsung สำหรับ Android
- มีอะไรอยู่ในกล่อง
นี่คือคุณสมบัติปัจจุบันของ Super Progressive Web Apps:
- สร้างรายการสำหรับเว็บไซต์ของคุณและเพิ่มลงในหัวเว็บไซต์ของคุณ
- ตั้งค่าไอคอนแอปพลิเคชันสำหรับแอปพลิเคชันเว็บแบบก้าวหน้าของคุณ
- ตั้งค่าสีพื้นหลังสำหรับหน้าจอสาดของแอปพลิเคชันเว็บแบบก้าวหน้าของคุณ
- เว็บไซต์ของคุณจะแสดงประกาศ "Add to Home Screen" เมื่อเข้าถึงในเบราว์เซอร์ที่รองรับ
- การแคชก้าวร้าวของหน้าโดยใช้ Cachestorage API
- หน้าเมื่อแคชจะให้บริการแม้ว่าผู้ใช้จะออฟไลน์
- ตั้งค่าหน้าออฟไลน์ที่กำหนดเอง: เลือกหน้าเว็บที่คุณต้องการให้ผู้ใช้ดูว่าหน้าใดที่ไม่ได้อยู่ในแคชและผู้ใช้ออฟไลน์
- ใหม่ในเวอร์ชัน 1.2: รองรับชุดรูปแบบสี
- ใหม่ในเวอร์ชัน 1.2: ตอนนี้คุณสามารถแก้ไขชื่อแอปพลิเคชันและแอปพลิเคชันชื่อสั้น ๆ
- ใหม่ในเวอร์ชัน 1.2: ตั้งค่าหน้าเริ่มต้นของ PWA ของคุณ
- ใหม่ในเวอร์ชัน 1.2: ตั้งค่าหน้าโทรศัพท์มือถือเร่งความเร็ว (AMP) ของหน้าเริ่มต้น ปลั๊กอินที่รองรับ: แอมป์สำหรับ WordPress, AMP สำหรับ WP, AMP ที่ดีกว่า, AMP Supremacy, WP AMP
- ใหม่ในเวอร์ชัน 1.3: เพิ่มการสนับสนุนสำหรับหน้าจอสาดคุณภาพสูง ตอนนี้คุณสามารถตั้งค่าไอคอน 512x512 สำหรับหน้าจอสาดของแอปพลิเคชันเว็บแบบก้าวหน้าของคุณ
- ใหม่ในเวอร์ชัน 1.3: Super Progressive Web Apps บัญชีสำหรับการอัปเดตเนื้อหาและจะอัปเดตแคชเมื่อคุณอัปเดตเว็บไซต์
- ใหม่ในเวอร์ชัน 1.3: ปรับปรุงการจัดการผู้ปฏิบัติงานบริการในเบราว์เซอร์
- ใหม่ในเวอร์ชัน 1.4: ตอนนี้คุณสามารถตั้งค่าการวางแนวเริ่มต้นของ PWA ของคุณ เลือกจาก "ใด ๆ " (ติดตามการวางแนวอุปกรณ์), "Portrait" และ "Landscape"
- ใหม่ในเวอร์ชัน 1.4: ตอนนี้คุณสามารถตั้งค่าคุณสมบัติ Theme_Color ในรายการ
- ใหม่ในเวอร์ชัน 1.5: การรวม OneSignal สำหรับการแจ้งเตือนแบบพุช
- ใหม่ในเวอร์ชัน 1.6: ความเข้ากันได้ของเครือข่าย WordPress Multisite
- ใหม่ในเวอร์ชัน 1.7: Add-on สำหรับ Superpwa อยู่ที่นี่! เรือที่มี UTM ติดตาม Add-on เพื่อติดตามการเข้าชมที่มาจาก PWA ของคุณ
- ใหม่ในเวอร์ชัน 1.8: ปัญหาความเข้ากันได้กับ OneSignal ได้รับการแก้ไขแล้ว!
- ใหม่ในเวอร์ชัน 1.8: ไอคอน Add-On ใหม่: Apple Touch ที่ตั้งค่าไอคอนแอปของคุณเป็นไอคอน Apple Touch
- ใหม่ในเวอร์ชัน 2.0: SuperPWA เข้ากันได้กับ WordPress ที่ติดตั้งในโฟลเดอร์ย่อย
- ใหม่ในเวอร์ชัน 2.0: ตอนนี้คุณสามารถตั้งค่าคุณสมบัติการแสดงผลได้จากการตั้งค่า superpwa
- ใหม่ในเวอร์ชัน 2.1.1: รองรับไอคอน Maskabale
- คุณสมบัติที่กำลังจะมาถึง:
อุปกรณ์และเบราว์เซอร์รองรับ PWA
| โครเมี่ยม | Firefox | ขอบ | โอเปร่า | ซาฟารี | ซัมซุง | เบราว์เซอร์ UC | กล้าหาญ |
|---|
| เพิ่มลงในหน้าจอหลัก | | | | | | | | |
| พนักงานบริการ | | | | | | | | |
| การผลักดันเว็บและการแจ้งเตือน | | | | | | | | |
| คำขอการชำระเงิน API | | | | | | | - | - |
| สีธีมเมตา | | - | - | - | - | | - | |
รองรับเบต้าหรือการสนับสนุนบางส่วนในการพัฒนา
แอพพลิเคชั่นเว็บแบบก้าวหน้าต้องการเบราว์เซอร์ที่สนับสนุนการปรากฏตัวและพนักงานบริการ ปัจจุบัน Google Chrome (เวอร์ชัน 57+), Chrome สำหรับ Android (62), Mozilla Firefox (57), Firefox สำหรับ Android (58) เป็นเบราว์เซอร์หลักที่รองรับ PWA
รายการเติบโตอย่างรวดเร็วและมีแนวโน้มที่จะได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญส่วนใหญ่ภายในสิ้นปีนี้
ทำไมต้องสร้างแอพพลิเคชั่นเว็บแบบก้าวหน้า?
วิธีการแปลงเว็บไซต์ WordPress ของคุณเป็นแอปพลิเคชันเว็บแบบก้าวหน้า
การติดตั้ง WordPress
- เยี่ยมชมผู้ดูแลระบบ WordPress> ปลั๊กอิน > เพิ่มใหม่
- ค้นหา เว็บแอป Super Progressive
- คลิก " ติดตั้งตอนนี้ " จากนั้น " เปิดใช้งาน " แอป Super Progressive Web
เพื่อติดตั้งด้วยตนเอง:
- อัปโหลดโฟลเดอร์ Super-Progressive-Web-Apps ไปยัง/WP-Content/Plugins/Directory บนเซิร์ฟเวอร์ของคุณ
- ไปที่ WordPress Admin> ปลั๊กอิน
- เปิดใช้งานปลั๊กอิน Web Progressive Super Progressive จากรายการ
ปรับแต่งแอปพลิเคชันเว็บแบบก้าวหน้าของคุณ
แอปพลิเคชันเว็บแบบก้าวหน้าของคุณควรพร้อมที่จะทดสอบด้วยการตั้งค่าเริ่มต้นเมื่อเปิดใช้งาน คุณสามารถปรับแต่งได้ต่อไปและทำให้เป็นของคุณเองอย่างแท้จริง
- ไปที่ผู้ดูแลระบบ WordPress> " superpwa "> การตั้งค่า
- ตั้งค่าสีพื้นหลังสำหรับหน้าจอสาดน้ำที่จะแสดงเมื่อ PWA ของคุณเปิดบนอุปกรณ์มือถือ
- ตั้งค่าไอคอนแอปพลิเคชัน นี่จะเป็นไอคอนของ PWA ของคุณเมื่อมีการเพิ่มเข้าไปในหน้าจอหลักในอุปกรณ์มือถือ ไอคอนจะต้องเป็นภาพ PNG และขนาด 192 x 192 พิกเซล
- ตั้งค่าหน้าออฟไลน์ หน้านี้จะปรากฏขึ้นหากผู้ใช้ออฟไลน์และหน้าเว็บที่เขาร้องขอไม่ได้ถูกแคชอยู่แล้ว เป็นการดีที่คุณควรสร้างหน้า WordPress เฉพาะและตั้งไว้ที่นี่ ภายในหน้าเว็บที่คุณสร้างคุณสามารถเพิ่มโน้ตที่อ่านได้ว่า "ดูเหมือนว่าคุณจะออฟไลน์และหน้าที่คุณร้องขอไม่พร้อมใช้งานตอนนี้โปรดกลับมาตรวจสอบอีกครั้งเมื่อคุณออนไลน์"
- คลิก "บันทึกการตั้งค่า"
ทดสอบแอปพลิเคชันเว็บแบบก้าวหน้าของคุณ
- เปิดเบราว์เซอร์ที่รองรับในอุปกรณ์ที่รองรับ (เช่น: Chrome สำหรับ Android (62 หรือสูงกว่า) ในอุปกรณ์ Android)
- ป้อนเว็บไซต์ของคุณและรอจนกว่าจะโหลดเต็ม
- คุณควรเห็นป๊อปอัพที่มีไอคอนแอปพลิเคชันของคุณและปุ่มที่อ่าน "เพิ่มลงในหน้าจอหลัก"
- คลิกที่มันและ PWA ของคุณจะถูกเพิ่มลงในหน้าจอหลักของคุณ รอให้การติดตั้งเสร็จสมบูรณ์
- ไปที่หน้าจอหลักของคุณและเปิด PWA ของคุณ เรียกดูหน้าไม่กี่หน้าถ้าคุณต้องการ ปิดแอพ
- ตัดการเชื่อมต่อจากอินเทอร์เน็ตและเปิด PWA ของคุณอีกครั้ง คุณควรจะเห็นหน้าทั้งหมดที่คุณเรียกดูก่อนหน้านี้
- ลองเยี่ยมชมหน้าเว็บที่คุณไม่เคยเยี่ยมชมมาก่อน คุณควรเห็นหน้าเว็บที่คุณตั้งเป็น "หน้าออฟไลน์" ของคุณในการตั้งค่า Superpwa
- เกี่ยวกับเรา
เราเป็นคู่ที่ตื่นเต้นกับความคิด ภารกิจของเรานั้นง่าย: ช่วยให้คุณสร้าง PWA ที่ยอดเยี่ยมที่ผู้ใช้ของคุณต้องการบนหน้าจอหลักของพวกเขา เมื่อเราได้ยินเกี่ยวกับ PWA ครั้งแรกเราต้องการเรียนรู้ทุกอย่างเกี่ยวกับเรื่องนี้ เราใช้เวลาหลายชั่วโมงในการเรียนรู้และต้องการแบ่งปันกับโลก โปรดให้ข้อเสนอแนะและการสนับสนุนที่สร้างสรรค์แก่คุณ
⛷สนับสนุน
นี่คือพอร์ทัลของนักพัฒนาซอฟต์แวร์สำหรับเว็บแอพที่มีความก้าวหน้าอย่างมากและไม่ควรใช้สำหรับการสนับสนุน กรุณาเยี่ยมชมฟอรัมการสนับสนุน
- การรายงานข้อบกพร่อง
หากคุณเคยติดอยู่เราอยู่ที่นี่เพื่อดูหลังของคุณ! เปิดตั๋วหัวข้อสนับสนุนใหม่หากคุณมีคำถามหรือต้องการคุณสมบัติ เรารู้สึกตื่นเต้นเป็นอย่างยิ่งที่ได้รับฟังความคิดเห็นของคุณและเราต้องการช่วยคุณสร้างเว็บแอพที่ก้าวหน้าที่สุดสำหรับเว็บไซต์ WordPress ของคุณอย่างแท้จริง!
- ผลงาน
ทุกคนยินดีที่จะมีส่วนร่วมใน Super PWA เพื่อให้เป็นสุดยอด
มีหลายวิธีที่คุณสามารถมีส่วนร่วม:
- ยกประเด็นเกี่ยวกับ GitHub
- ติดตามและมีส่วนร่วมกับเราในโซเชียลมีเดีย
แบ่งปันบน Twitter
แบ่งปันบน Facebook
แบ่งปันบน LinkedIn
- การเปลี่ยนแปลง
superpwa.com/changelog/
เครดิตอิโมจิ: ไอคอนไอคอนโซเชียลมีเดีย Emojipedia เครดิต: Flaticon
⬆กลับไปด้านบน
