สร้างและแจกจ่ายเว็บแอปแบบโปรเกรสซีฟ
ใช้สตูดิโอออกแบบ Power Pages เพื่อกำหนดค่าว็บแอปแบบโปรเกรสซีฟ (PWA) ของคุณ คุณสามารถเปิดหรือปิดใช้งานความสามารถของ PWA ได้ คุณสามารถปรับแต่งการตั้งค่า PWA และเตรียมการสร้างแพคเกจแอปเพื่อเผยแพร่ไปยังที่เก็บอุปกรณ์ที่เกี่ยวข้อง หากคุณเลือก
ไปที่ Power Pages
เลือกไซต์ของคุณและเลือก แก้ไข
ในสตูดิโอออกแบบ เลือกพื้นที่ทำงาน ตั้งค่า แล้วเลือก เว็บแอปพลิเคชันแบบโปรเกรสซีฟ
เลือก เปิดใช้งาน PWA
สร้างแบรนด์แอปของคุณ
คุณสามารถสร้าง PWA ที่มีแบรนด์ของคุณเองได้โดยใช้ตัวเลือกการแก้ไข/ปรับปรุงตามคำสั่งเพื่อเปลี่ยนชื่อแอป, หน้าเริ่มต้น, สี, และอื่นๆ
หมายเหตุ
บนอุปกรณ์ iOS ไอคอนสำหรับ PWA จะแสดงเป็นรูปขนาดย่อ และหน้าจอเริ่มต้นที่กำหนดเองจะไม่แสดง
ในสตูดิโอออกแบบ เลือก เว็บแอปแบบโปรเกรสซีฟ
ปรับปรุงการตั้งค่า PWA ต่อไปนี้สำหรับไซต์ของคุณ
การตั้งค่า Description Title ชื่อของ PWA ของพอร์ทัลที่จะปรากฎบนอุปกรณ์มือถือและในร้านค้าแอป Description คำอธิบาย PWA ของพอร์ทัลที่จะปรากฎบนอุปกรณ์มือถือและในร้านค้าแอป เพจเริ่มต้นของแอป หน้าเริ่มต้นสำหรับไซต์เมื่อเปิดผ่าน PWA พื้นหลังหน้าจอเริ่มต้น สีพื้นหลังสำหรับหน้าจอเริ่มต้น เมื่อมีการโหลด PWA ไอคอนแอป ไอคอนสำหรับแอปที่ปรากฎบนอุปกรณ์มือถือและในร้านค้าแอป
หมายเหตุ: รองรับรูปแบบ .jpg, .jpeg, .png ที่มีขนาดอัปโหลดสูงสุด 5 MB ขนาดของไอคอนต้องเป็น 512 × 512 พิกเซลหมายเหตุ
อาจใช้เวลาสักครู่จึงจะแสดงการเปลี่ยนแปลงของคุณ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ของคุณ หลังจากปรับแต่ง PWA เลือก แสดงตัวอย่าง เพื่อล้างแคชของไซต์
กำหนดลักษณะการทำงานออฟไลน์
PWA ให้การสนับสนุนสำหรับประสบการณ์การนำทางที่ราบรื่น เมื่ออุปกรณ์ที่ใช้อยู่ในสถานะออฟไลน์หรือไม่ได้เชื่อมต่ออินเทอร์เน็ต คุณสามารถเลือกหน้าภายในไซต์ของคุณที่พร้อมใช้งานแบบออฟไลน์ (อ่านอย่างเดียว) และหน้าข้อความสำหรับความสามารถที่เหลือของพอร์ทัลที่ไม่ได้ถูกเปิดใช้งานสำหรับการเข้าถึงแบบออฟไลน์
ตั้งค่าคอนฟิกหน้าออฟไลน์สำหรับ PWA ของพอร์ทัล
ในสตูดิโอออกแบบในพื้นที่ทำงาน ตั้งค่า เลือก เว็บแอปพลิเคชันแบบโปรเกรสซีฟ
ภายใต้ การตั้งค่าเพิ่มเติม เลือก กำหนดเพจออฟไลน์
เลือกหน้าที่คุณต้องการให้ผู้ใช้เข้าถึงได้ เมื่อพวกเขาใช้ PWA ออฟไลน์
หมายเหตุ
เมื่อตั้งค่าคอนฟิกการเข้าถึงแบบออฟไลน์สำหรับหน้า PWA ตรวจสอบให้แน่ใจว่าได้พิจารณาข้อจำกัดด้านพื้นที่เก็บข้อมูลสำหรับอุปกรณ์ของผู้ใช้ เมื่อข้อกำหนดในการจัดเก็บข้อมูลสำหรับการเข้าถึง PWA เกินพื้นที่เก็บข้อมูลที่มีอยู่บนอุปกรณ์ พอร์ทัลทั้งหมดจะไม่พร้อมใช้งานสำหรับการเข้าถึงแบบออฟไลน์ เราขอแนะนำให้คุณทดสอบประสบการณ์การใช้งานการเข้าถึงแบบออฟไลน์ของผู้ใช้และแคชเฉพาะหน้าที่จะเป็นประโยชน์และมีความสำคัญต่อผู้ใช้ของคุณมากที่สุด จำไว้ว่าเพจออฟไลน์สามารถแสดงได้เฉพาะข้อมูลเท่านั้น เพจที่เชื่อมต่อกับ Microsoft Dataverse ที่มีฟอร์มเพื่อกรอกหรือเรียกใช้การสอบถามจะไม่ทำงานขณะออฟไลน์
ตั้งค่าหน้าข้อความออฟไลน์
เมื่ออุปกรณ์ออฟไลน์ หน้าที่คุณกำหนดค่าเป็นหน้าข้อความออฟไลน์จะปรากฏขึ้น เมื่อผู้ใช้หากพวกเขาพยายามเข้าถึงหน้าที่ไม่ได้ถูกเปิดใช้งานสำหรับการเข้าถึงแบบออฟไลน์
ในสตูดิโอออกแบบ เลือกพื้นที่ทำงาน เพจ
เลือก เพจออฟไลน์เริ่มต้น
ปรับแต่งเพจ
หมายเหตุ
- คุณไม่สามารถเปลี่ยน ชื่อเรื่อง หรือ URL บางส่วน และฟิลด์ ("/default-offline-page") สำหรับหน้าออฟไลน์ หน้าออฟไลน์เริ่มต้นจะแสดงต่อผู้ใช้ หากไม่มีหน้าออฟไลน์
- อาจใช้เวลาสักครู่จึงจะแสดงการเปลี่ยนแปลงของคุณ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ของคุณ หลังจากปรับแต่งประสบการณ์ PWA แบบออฟไลน์ เลือก แสดงตัวอย่าง เพื่อล้างแคชของไซต์
ทดสอบไซต์ของคุณในโหมดออฟไลน์
หลังจากที่คุณ เปิดใช้งานหน้าออฟไลน์ คุณสามารถใช้อุปกรณ์เคลื่อนที่ในโหมดออฟไลน์และเรียกดูหน้าต่างๆ ที่เปิดใช้งานสำหรับการเข้าถึงแบบออฟไลน์ได้
เรียกดูไซต์ของคุณโดยใช้เว็บเบราว์เซอร์บนอุปกรณ์มือถือของคุณในโหมดออนไลน์
เลือก เพิ่มไปที่หน้าจอหลัก หรือตัวเลือกที่คล้ายกัน ตัวอย่างเช่น บนอุปกรณ์ Android ตัวเลือกอาจเป็น + เพิ่มไปยัง>หน้าจอแอป
หมายเหตุ
การดำเนินการนี้จะดาวน์โหลดหน้าพอร์ทัลที่ถูกเปิดใช้งานสำหรับการเรียกดูแบบออฟไลน์ การดำเนินการนี้อาจใช้เวลาสักครู่ ทั้งนี้ขึ้นอยู่กับแบนด์วิดท์ของเครือข่ายและขนาดของเพจที่เลือกสำหรับการเรียกดูแบบออฟไลน์
เปิดใช้งานโหมดออฟไลน์ในอุปกรณ์มือถือของคุณ
เปิดพอร์ทัลของคุณจากหน้าจอหลัก คุณจะเห็นการแจ้งเตือนที่ด้านบนเพื่อเตือนว่าคุณกำลังเรียกดูในโหมดออฟไลน์ หากคุณเลือกหน้าใดๆ ที่ไม่ได้เปิดใช้งานสำหรับการเรียกดูแบบออฟไลน์ ข้อความออฟไลน์จะปรากฏขึ้น
เผยแพร่แอปของคุณ
คุณสามารถเผยแพร่แอปของคุณโดยใช้เบราว์เซอร์หรือผ่านร้านค้าแอปก็ได้
เผยแพร่แอปของคุณโดยใช้เบราว์เซอร์
หลังจากที่พอร์ทัลของคุณถูกเปิดใช้งานเป็น PWA ผู้ใช้ของคุณสามารถปักหมุดไซต์ Power Pages เป็นแอปไปยังหน้าจอหลักบนอุปกรณ์ของตนได้ ตัวเลือกนี้มีการรองรับในทุกแพลตฟอร์ม (Android, iOS, Chromebook และ Windows) นอกเหนือจากปัจจัยของฟอร์มทั้งหมด (อุปกรณ์เคลื่อนที่, เดสก์ท็อป และแท็บเล็ต)
กราฟิกต่อไปนี้แสดงประสบการณ์ของผู้ใช้ในการเพิ่มพอร์ทัลไปยังหน้าจอหลักโดยใช้เบราว์เซอร์ที่ติดตั้งพอร์ทัลเป็น PWA
Android และ iOS ต่างมีวิธีการที่แตกต่างกันสำหรับการติดตั้งบนเบราว์เซอร์
เผยแพร่แอปของคุณผ่านร้านค้าแอป
เว็บแอปแบบโปรเกรสซีฟสามารถแจกจ่ายผ่านร้านค้าแอปสำหรับ Android, iOS และ Windows ได้เช่นกัน การแจกจ่ายนี้ทำได้โดยการสร้างแพคเกจแอปและเผยแพร่แอปไปยังร้านค้าแอปที่เกี่ยวข้อง สำหรับการสร้างแพ็คเกจแอป เราร่วมมือกับ PWABuilder ซึ่งเป็นแพลตฟอร์มสำหรับสร้างแพคเกจแอปพลิเคชันสำหรับร้านค้าแอปต่างๆ
หากต้องการสร้างแพ็กเกจแอป ให้ไปที่พื้นที่ทำงาน ตั้งค่า ในสตูดิโอออกแบบ ภายใต้ แพคเกจแอป เลือก สร้างแพคเกจแอป
สิ่งนี้จะถูกพาไปที่ เว็บไซต์ตัวสร้าง PWA ที่ซึ่งคุณสามารถสร้างแพคเกจแอปสำหรับร้านค้าแอปต่างๆ แพคเกจที่คุณสร้างโดยใช้ตัวสร้าง PWA ประกอบด้วย:
แพคเกจแอปสำหรับ PWA ที่จะใช้ในร้านค้าแอปที่เกี่ยวข้อง
เอกสารทีละขั้นตอนเกี่ยวกับการเผยแพร่แอป
สำหรับรายละเอียดเพิ่มเติม ไปที่ ฮับทรัพยากร PWA
สำหรับ iOS PWABuilder ให้การสนับสนุนสำหรับการสร้างแพคเกจสำหรับร้านค้าแอป สำหรับข้อมูลเพิ่มเติม โปรดดู แพคเกจสำหรับร้านค้าแอป
สำหรับ Windows โปรดดู แพคเกจสำหรับ Microsoft Store
ข้อควรพิจารณาอื่นๆ สำหรับ Android
สำหรับแพลตฟอร์ม Android คุณยังสามารถอัปเดตใบรับรอง Android ด้วยตัวเลือก อัปเดตใบรับรอง Android
อัปเดตชื่อและลายนิ้วมือของใบรับรอง SHA-256 เพื่ออัปเดตไฟล์ลิงก์เนื้อหาดิจิทัล (assetlinks.json) ที่พิสูจน์ความเป็นเจ้าของของ PWA ของคุณ
ดูเพิ่มเติม
ภาพรวมของเว็บไซต์ในฐานะเว็บแอปแบบโปรเกรสซีฟ
ภาพรวมของเว็บแอปแบบโปรเกรสซีฟ (PWA)
สร้างและกระจายเว็บแอปแบบโปรเกรสซีฟ (วิดีโอ)