เดสก์ท็อปโปรเกรสซีฟเว็บแอป: ความก้าวหน้าครั้งสำคัญ

เผยแพร่แล้ว: 2019-09-10

สารบัญ

เมื่อพูดถึง Progressive Web Apps (PWAs) แอปพลิเคชั่นมือถือเป็นสิ่งแรกที่ควรคำนึงถึงเพราะมันเป็นแบบนั้นมาโดยตลอด

 การอ่านที่แนะนำ: Progressive Web App คืออะไร

อย่างไรก็ตาม เมื่อเวลาผ่านไป เบราว์เซอร์หลักเช่น Chrome ที่มีโครงการริเริ่ม PWA กำลังบุกเข้าสู่ตลาดเดสก์ท็อป ขยายศักยภาพของ PWA ที่ดูเหมือนไม่มีขีดจำกัดมากยิ่งขึ้น

ตั้งแต่ Chrome 70 เป็นต้นไป ผู้ใช้สามารถติดตั้ง Desktop Progressive Web Apps บน Windows และ Linux เมื่อติดตั้งแล้ว พวกมันจะเปิดขึ้นจากเมนูเริ่ม และทำงานเหมือนกับแอปที่ติดตั้งอื่นๆ ทั้งหมด โดยไม่มีแถบที่อยู่หรือแท็บ

ดูโพสต์นี้บน Instagram

Progressive Web App (PWA) แทบจะแยกไม่ออกจากแอปพลิเคชันดั้งเดิม คืออนาคตของเว็บที่มีฟีเจอร์ที่คล้ายกับแอป ซึ่งหนึ่งในนั้นคือความสามารถในการติดตั้ง (เพิ่ม PWA ลงในหน้าจอหลัก) ที่อาจปฏิวัติประสบการณ์การใช้งานเว็บได้ ?สร้าง กปภ. วันนี้กับ SimiCart . . #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsummit #chromedevsummit2019

โพสต์ที่แบ่งปันโดย SimiCart (@simicart.official) on

และมันไม่ได้หยุดอยู่ แค่นั้น รากฐานของ PWA แบบไฮบริดของ Microsoft Store มีการจัดวางแบบทีละขั้นตอน: ใน Microsoft Store เว็บแอปแบบโปรเกรสซีฟนั้นเทียบเท่ากับแอปพลิเคชัน Windows แบบเนทีฟ ดังนั้นจึงขยายการเข้าถึงฐานการติดตั้ง Windows 10 ทั้งหมดเกือบ 700 ล้านตัว ผู้ใช้รายเดือนที่ใช้งานอยู่

การทำความเข้าใจ PWA ของเดสก์ท็อปและเหตุใดจึงสำคัญมาก

ด้วยข้อดีทั้งหมดของ Progressive Web Apps และ อื่นๆ Desktop Progressive Web App กำลังกลาย เป็น เทรนด์ในการพัฒนาแอปเดสก์ท็อปอย่างต่อเนื่อง

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

เพื่อให้เข้าใจสั้น ๆ เกี่ยวกับ Desktop PWA คุณสามารถจินตนาการได้ว่า Desktop PWA นั้นเหมือนกับ เอกสารออนไลน์หรือเอกสาร ของ Google ที่ทำงานโดยใช้ส่วนประกอบเว็บ ในทางกลับกัน แอปพลิเคชันเดสก์ท็อปดั้งเดิมนั้นเหมือนกับ Microsoft Word : ดี มีขนาดเล็ก และได้รับการออกแบบให้ทำงานได้อย่างราบรื่น สาเหตุที่ Desktop PWA มาแรง ในตอนนี้ก็เพราะว่า Desktop PWA สามารถทำงานได้ค่อนข้างมากกับแอปพลิเคชันเดสก์ท็อปแบบเนทีฟพร้อมประสบการณ์ที่น่าดึงดูดมากกว่า และใช้พื้นที่เพียงเล็กน้อยหรือไม่มีเลยบนฮาร์ดดิสก์ของคุณ

โดยสรุป Desktop PWA คือ:

  • รวดเร็ว – กปภ. นำเสนอประสบการณ์ที่สนุกสนาน ตอบสนองฉับไว รวดเร็วทันใจ
  • ติดตั้ง ได้ – สามารถติดตั้ง PWA ได้เหมือนกับแอปพื้นฐานอื่นๆ และแสดงบนเดสก์ท็อปหรือหน้าจอหลักของคุณ แทนที่จะต้องใช้เบราว์เซอร์ การติดตั้ง กปภ. มักจะเกิดขึ้นทันทีและมีขนาดเล็กในขนาดบรรจุภัณฑ์
  • การมีส่วนร่วม – PWA ใช้แนวทางที่ดีที่สุดสำหรับ UX & UI คุณภาพสูง ในขณะเดียวกันก็สามารถทำงานได้โดยไม่คำนึงถึงสถานะของเครือข่ายหรือความสามารถของอุปกรณ์

ตัวอย่างที่โดดเด่นที่สุดของ Desktop PWA คือ Twitter Lite แม้ว่า Twitter จะเน้นไปที่ผู้ใช้มือถือเป็นหลัก แต่ Twitter ก็มีการเติบโตที่โดดเด่นในการโต้ตอบกับผู้ใช้เดสก์ท็อป

เพิ่มขึ้น 65% ในหน้าต่อเซสชัน

ส่งทวีตเพิ่มขึ้น 75%

อัตราตีกลับลดลง 20%

การยิงนัดแรกเป็นจุดเริ่มต้นของการเคลื่อนไหวของ กปภ. ถูกยิงโดย Twitter อย่างแน่นอน ตามมาด้วยแบรนด์ที่ทรงอิทธิพลอย่าง Spotify และ Pinterest อย่างเร่งรีบและมีคุณภาพผลิตภัณฑ์ที่ยอดเยี่ยมไม่น้อยเช่นกัน:

เดสก์ท็อป Spotify & Pinterest PWA

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

สีพื้นหลังที่ปรับเปลี่ยนได้ของ Spotify PWA

Pinterest ก็ประสบกับการปรับปรุงในเชิงบวกหลายประการในตัวชี้วัดธุรกิจหลัก

เวลาที่ใช้เพิ่มขึ้น 40% เมื่อเทียบกับประสบการณ์เว็บบนอุปกรณ์เคลื่อนที่แบบเก่า รายได้จากโฆษณาที่ผู้ใช้สร้างขึ้นเพิ่มขึ้น 44% และการมีส่วนร่วมหลักเพิ่มขึ้น 60%

ประสบการณ์เว็บบนมือถือใหม่ของพวกเขาเป็นขั้นตอนที่ก้าวขึ้นสู่เสาหินของเว็บไซต์มาก่อน

พวกเขาไม่เพียงแต่แยกส่วนและโกนหลายร้อย KB จาก JavaScript ของพวกเขาเท่านั้น แต่ยังลดขนาดของบันเดิลหลักจาก 650 KB เหลือ 150 KB แต่ยังปรับปรุงเมตริกประสิทธิภาพหลักอีกด้วย First Meaningful Paint ลดลงจาก 4.2s เป็น 1.8s และ Time To Interactive ลดลงจาก 23s เป็น 5.6s

สำหรับผู้อ่านที่สนใจกรณีศึกษาเฉพาะของ Pinterest PWA เราขอแนะนำบทความนี้เป็นอย่างยิ่ง: กรณีศึกษาเกี่ยวกับประสิทธิภาพของแอป Pinterest แบบก้าวหน้า

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

วิธีการติดตั้ง Progressive Web Apps บนเดสก์ท็อป

ขั้นตอนการติดตั้ง Desktop Progressive Web App ค่อนข้างตรงไปตรงมาและคล่องตัว ขั้นตอนที่สำคัญที่สุดของคุณคือการค้นหาที่อยู่ PWA ที่ถูกต้องของแอปของคุณเท่านั้น

ในบทช่วยสอนของเราวันนี้ เราจะใช้ Twitter เป็นตัวอย่างของ Desktop PWA:

ขั้นตอนที่ 1 : ใช้ Google Chrome เวอร์ชัน 70 ขึ้นไป ตรงไปที่ https://mobile.twitter.com/home

ขั้นตอนที่ 2 : ตรวจสอบว่ามีปุ่ม (+) ที่ด้านขวาสุดของแถบที่อยู่หรือไม่

ป๊อปอัปแอพติดตั้ง Twitter PWA

หรือหากมีตัวเลือก “ ติดตั้ง Twitter ” ในเมนูแบบเลื่อนลง

ตัวเลือกการติดตั้ง Twitter PWA

ขั้นตอนที่ 3 : คลิกที่ ติดตั้ง และกระบวนการจะสิ้นสุดลงทันที

ขั้นตอนที่ 4 : เปิด PWA ที่ติดตั้งใหม่จากเดสก์ท็อปของคุณ

desktop-twitter-icon
ไอคอน Twitter บนเดสก์ท็อป

วิธีถอนการติดตั้ง Progressive Web Apps บนเดสก์ท็อป

สำหรับผู้ใช้ที่ไม่เกี่ยวข้อง การลบไอคอน Desktop PWA เป็นวิธีที่ยอมรับได้ในการถอนการติดตั้ง PWA อย่างไรก็ตาม สำหรับผู้ใช้ที่กำลังมองหาวิธีที่แน่นอนกว่าในการถอนการติดตั้ง PWA ขอแนะนำขั้นตอนด้านล่าง:

ขั้นตอนที่ 1 : เปิด Desktop PWA ของคุณ (ในกรณีนี้คือ Twitter )

ขั้นตอนที่ 2 : เลือก “ ถอนการติดตั้ง Twitter …” ในเมนูแบบเลื่อนลง

ตัวเลือกถอนการติดตั้ง Twitter PWA

ขั้นตอนที่ 3 : ทำเครื่องหมายหรือยกเลิกการเลือกตัวเลือกที่แนะนำแล้วคลิกสุดท้าย " ลบ "

Twitter PWA ถอนการติดตั้งป๊อปอัป

และนั่นแหล่ะ! ลบ Twitter PWA ของคุณออกจากคอมพิวเตอร์แล้วด้วยขั้นตอนง่ายๆ เพียงไม่กี่ขั้นตอน

สรุปข้อสังเกต

Desktop PWA เป็นการปฏิวัติขั้นต่อไปอย่างปฏิเสธไม่ได้ในการโต้ตอบและการทำงานของเว็บแอป เพื่อที่จะนำหน้าคู่แข่งของคุณ บริษัทต่างๆ จะต้อง เปิดรับการเคลื่อนไหวของ กปภ. ในขณะนี้และตื่นตัวต่อแนวโน้มที่เปลี่ยนแปลงไปในการพัฒนาเว็บ/แอพ

สำหรับผู้ค้าออนไลน์ที่กำลังมองหาโซลูชัน Magento Progressive Web App ที่สมบูรณ์แบบ ที่ SimiCart เราขอเสนอแพ็คเกจที่สมบูรณ์สำหรับคุณและร้านค้าของคุณ

สร้าง กปภ. กับ SIMICART