สร้างเว็บแอปแบบโปรเกรสซีฟที่สามารถติดตั้งและเรียกใช้บนไคลเอนต์แต่ละเครื่องได้

สิ่งแวดล้อม

วิชวลสตูดิโอ

• วิชวลสตูดิโอ 2019

.NET

• .สุทธิ 5.0

โปรเกรสซีฟเว็บแอป (PWA) คืออะไร

พูดง่ายๆก็คือมันเป็นแอปพลิเคชั่นที่ให้คุณติดตั้งและใช้เว็บแอปพลิเคชันบนอุปกรณ์แต่ละเครื่องเช่นพีซี Windows, iPhone หรือ Android

ความเป็นจริงของ Blazor WebAssembly เป็น WebAssembly ที่ได้มาตรฐานดังนั้นการใช้งานข้างต้นจึงเป็นไปได้ โดยพื้นฐานแล้วมันใช้เว็บแอปพลิเคชัน แต่คุณยังสามารถใช้คุณสมบัติดั้งเดิมเช่นการแจ้งเตือนแบบพุชใน Plus Alpha

ขั้นตอนการติดตั้งสําหรับผู้ใช้นั้นง่ายมากเนื่องจากจําเป็นต้องไปที่หน้าเป้าหมายและกดปุ่มติดตั้งเท่านั้น

การสร้างโครงการ PWA แอสเซมบลีเว็บ Blazor

โดยทั่วไปจะเหมือนกับการสร้างโครงการ Blazor WebAssembly

เพียงสร้างโครงการตามปกติและเมื่อคุณมาถึงหน้าจอ "ข้อมูลเพิ่มเติม" ด้านล่างเพียงตรวจสอบ "Progressive Web Application"

นอกเหนือจากคุณสมบัติเฉพาะของ PWA แล้ว การพัฒนา Blazor WebAssembly ยังเหมือนกับรูปแบบที่ปราศจาก PWA

ความแตกต่างจากโครงการที่ไม่ใช่ PWA

เมื่อคุณสร้างโครงการใน PWA คุณจะได้รับไฟล์กสองสามไฟล์

นอกจากนี้เมื่อคุณเปิดindex.html , รหัสบางอย่างจะถูกเพิ่มที่อ้างอิงไฟล์เหล่านี้.

ลองใช้ PWA

เรียกใช้โครงการสําหรับการดีบัก

ตัวอย่างการดําเนินการจะเหมือนกับรูปแบบที่ไม่มี PWA ทุกประการ แต่เมื่อทํางานกับ PWA คุณจะเห็นว่ามีการเพิ่มปุ่มติดตั้งลงในเว็บเบราว์เซอร์

เมื่อคุณคลิกการยืนยันการติดตั้งจะปรากฏขึ้นดังนั้นฉันจะพยายามติดตั้ง

นี่จะเป็นการเปิดหน้าต่างแยกต่างหากซึ่งคุณสามารถเรียกใช้แอป Blazor ได้ มันทําหน้าที่เป็นแอพไคลเอนต์ไม่ใช่เว็บเบราว์เซอร์ดังนั้นคุณยังสามารถกําหนดการตั้งค่าที่เกี่ยวข้องกับระบบปฏิบัติการดังที่แสดงในรูปได้

เนื่องจากมีการติดตั้งแล้วมันจะถูกลงทะเบียนในเมนูเริ่มเช่นนี้และคุณจะสามารถเริ่มต้นได้

อย่างไรก็ตามเนื่องจากเนื้อหาเป็นเว็บแอปจึงไม่สามารถใช้งานได้เว้นแต่จะมีเซิร์ฟเวอร์ที่สามารถดาวน์โหลดเนื้อหาได้ ตัวอย่างเช่น ถ้าคุณติดตั้งในระหว่างการเรียกใช้การตรวจแก้จุดบกพร่อง คุณจะไม่สามารถใช้โปรแกรมประยุกต์ที่ติดตั้งไว้เว้นแต่คุณได้เริ่มต้น IIS Express สําหรับการดีบัก นอกจากนี้โปรดทราบว่า PWA ไม่สามารถติดตั้งได้หากไม่มีการเชื่อมต่อ https

ถอนการติดตั้ง

ขั้นตอนการถอนการติดตั้งจะเหมือนกับแอปที่ติดตั้งเป็นประจํา วิธีการใช้งานขึ้นอยู่กับแพลตฟอร์มเป้าหมายของการติดตั้ง

บันทึกการเปลี่ยนแปลง

2022/7/13

• เพิ่มคําอธิบายว่า https เป็นสิ่งจําเป็นในการติดตั้ง PWA

2022/3/30

• ฉบับพิมพ์ครั้งแรก