ทำแอพพลิเคชั่นบนเว็บ (PWA) เพื่อนที่ดีที่สุดของคุณ

“ กปภ. เป็นการปฏิวัติการพัฒนาเว็บ ช่วยเพิ่มประสิทธิภาพการทำงานของคุณด้วยการมอบประสบการณ์การใช้งานที่ยอดเยี่ยมที่รวมประโยชน์ของเว็บและแอพมือถือเข้าด้วยกันโดยมีค่าใช้จ่ายน้อยที่สุด”
การจับมือกันเป็นการปฏิบัติที่ดี

การเขย่าด้วย PWA ทำให้ลูกค้าของคุณมีส่วนร่วม และกปภ. พร้อมเสมอที่จะเป็นเพื่อนที่ดีที่สุดของคุณแล้วทำไมเราไม่ส่งคำขอเป็นเพื่อนถึงกปภ.

ถึงเวลาที่จะทำความรู้จักกับกปภ. และฉันจะอธิบายว่ามิตรภาพของคุณเป็นประโยชน์กับคุณอย่างไรกับกปภ.

อย่าสับสนกับ PWA

ด้วยเหตุผลบางอย่างหลายคนคิดว่า PWAs เป็นแอปพลิเคชันหน้าเดียว (SPA)
นี่เป็นสิ่งที่ผิดผิดปกติมาก (ด้วยรหัสสถานะ 400 )

สปาสามารถเป็นกปภ. แต่กปภ. ไม่จำเป็นต้องเป็นสปา

กปภ. ชอบทำงานกับทุกคน

เว็บไซต์ที่สร้างขึ้นบนกรอบหรือไลบรารีใด ๆ เช่น ReactJs, Angular, VueJS หรือแม้แต่ใน HTML สามารถเป็น PWA ได้

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

หากคุณมีตำนานที่ PWA เป็นเทคโนโลยีของ Google ข้อมูลเหล่านี้ก็เพียงพอที่จะเคลียร์ตำนานของคุณ Progressive Web Apps เป็นไปตามมาตรฐานของเว็บ ใช้ได้กับทุกเบราว์เซอร์และทุกแพลตฟอร์ม

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

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

  • ต้องแสดงผลโดยใช้ HTTPS (ปลอดภัย)
  • มีไฟล์ Manifest ที่ถูกต้องพร้อมชุดไอคอนที่เฉพาะเจาะจงน้อยที่สุด
  • ควรลงทะเบียนผู้ให้บริการที่ถูกต้องและการสนับสนุนออฟไลน์ขั้นต่ำ

ไม่มีสิ่งใดในข้อกำหนดที่กล่าวว่าเว็บไซต์จะต้องใช้ JavaScript ในระยะสั้นคุณต้องลงทะเบียนพนักงานบริการโดยใช้ JavaScript ฝั่งไคลเอ็นต์

กปภ. รองรับคุณสมบัติดังนี้:

  • การปักหมุดไว้ที่หน้าจอหลัก - เราสามารถเพิ่มไอคอนแอปเว็บของเราบนหน้าจอหลัก
  • การแจ้งเตือนแบบพุช - เราสามารถรวมการแจ้งเตือนแบบพุชเช่นเดียวกับในแอพเนทีฟผ่าน Push API และ API การแจ้งเตือนสำหรับเว็บ
  • หน้าจอเริ่มต้น - ไฟล์รายการจัดการหน้าจอสแปลชสำหรับ PWA ของคุณเพื่อเข้าถึงการมีส่วนร่วมเช่นแอปในเครื่อง
  • ตำแหน่งทางภูมิศาสตร์ - เราสามารถเข้าถึงตำแหน่งปัจจุบันของผู้ใช้ผ่าน Geolocation API
  • โหมดการทำงานออฟไลน์ - เนื่องจากพนักงานบริการที่จัดการกลไกการแคชเราจะได้รับประสบการณ์การใช้งานที่หลากหลายแม้ว่าจะไม่มีอินเทอร์เน็ต
  • การเข้าถึงคุณสมบัติสื่อ - เราสามารถเข้าถึงอุปกรณ์ไมโครโฟนวิดีโอและกล้อง นอกจากนี้ยังใช้ฟังก์ชั่นการโทรผ่านวิดีโอและเสียงโดยใช้ WebRTC API

โดยรวมแล้วคุณไม่จำเป็นต้องพัฒนาแอพมือถือแยกต่างหากสำหรับโครงการเดียวกันหากความต้องการของคุณเต็มไปด้วยคุณสมบัติของ PWA หมายความว่า PWA ยังคงดิ้นรนเพื่อมอบคุณสมบัติของแอปดั้งเดิม

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

PWA จะสนับสนุนคุณสมบัติดังต่อไปนี้ในอนาคตเช่น:

  • บลูทู ธ - เว็บบลูทู ธ API อยู่ระหว่างการพัฒนาและในไม่ช้าเราจะเข้าถึงบลูทู ธ บนแพลตฟอร์มเว็บ
  • เซ็นเซอร์ - เซ็นเซอร์เป็นส่วนสำคัญในยุคการพัฒนาในปัจจุบันการเข้าถึงเซ็นเซอร์บางส่วนได้รับการพัฒนาอยู่แล้วเช่นเซ็นเซอร์วัดแสงรอบข้าง, เซ็นเซอร์ความใกล้ชิด, เซ็นเซอร์ความเร่งเซ็นเซอร์แม่เหล็กเซ็นเซอร์และเซ็นเซอร์วัดการหมุนวน
  • การแบ่งปันแบบเนทีฟ - เราสามารถเรียกใช้กลไกการแชร์แบบเนทีฟของอุปกรณ์ซึ่งเป็นส่วนหนึ่งของ Web Share API
  • เซ็นเซอร์ลายนิ้วมือ - เราสามารถตรวจสอบผู้ใช้ผ่านเซ็นเซอร์ลายนิ้วมือโดยใช้ Web Authentication API แต่มันยังอยู่ระหว่างการพัฒนาเนื่องจากเหตุผลด้านความปลอดภัย

ทำไมทุกคนถึงยอมรับกปภ. ในทุกวันนี้?

หลังจากอ่านสถิติของ บริษัท ขนาดใหญ่ที่รับ PWA มาแล้วคุณจะรู้ถึงพลังของ PWA และเข้าใจอย่างชัดเจนว่าทำไมทุกคนต้องการไปหา PWA

ที่นี่ฉันต้องการแสดงข้อมูลบางส่วนจาก PWA กรณีศึกษาของ บริษัท ยอดนิยม:

  • Twitter พัฒนา Twitter Lite Progressive Web App ในเดือนเมษายน 2017 และในทวิตเตอร์ผลลัพธ์เพิ่มหน้าต่อเซสชัน 65% ทวีตส่งทวีตเพิ่มขึ้น 75% และอัตราตีกลับลดลง 20%
  • Flipkart เว็บไซต์อีคอมเมิร์ซที่ใหญ่ที่สุดของอินเดียตัดสินใจปิดกลยุทธ์เฉพาะแอพในปี 2558 หลังจากนั้นพวกเขามาพร้อมกับ Flipkart Lite ซึ่งขับเคลื่อนโดย PWA และคุณจะทึ่งกับการอ่านผลลัพธ์ที่ยอดเยี่ยม ผู้ใช้ใช้เวลาบนไซต์มากขึ้นในอัตรา 3 เท่าอัตราการมีส่วนร่วมอีกครั้งจะสูงขึ้น 40% อัตราการแปลงที่สูงขึ้น 70% สำหรับผู้ที่เดินทางผ่านหน้าจอ Add to Home และการใช้ข้อมูลลดลง 3 เท่าเมื่อเทียบกับแอปดั้งเดิม
  • Alibaba.com แพลตฟอร์มการซื้อขาย B2B ออนไลน์ที่ใหญ่ที่สุดในโลก Alibaba.com มาพร้อมกับกลยุทธ์ใหม่ในฐานะ PWA เพื่อมอบประสบการณ์การใช้งานที่ยอดเยี่ยมสำหรับผู้เข้าชมครั้งแรกและผู้เยี่ยมชมซ้ำ กลยุทธ์ใหม่ของพวกเขามาพร้อมกับผลลัพธ์ที่น่าประหลาดใจ Alibaba.com มีอัตราการแปลงที่สูงขึ้น 76% ในเบราว์เซอร์เพิ่มผู้ใช้งานรายเดือนบน iOS 4% และ Android 30% และอัตราการโต้ตอบสูงขึ้น 4 เท่าจากหน้าจอ Add to Home

ใช่มันไม่น่าเชื่อและเราต้องยอมรับความงามของ Progressive Web App ตอนนี้คุณเข้าใจแล้วทำไมฉันบังคับให้คุณทำให้กปภ. เป็นเพื่อนที่ดีที่สุดของคุณ

Play Store พร้อมเผยแพร่ PWAs แล้ว

ใช่ใช่ใช่! Play Store และ PWAs เป็นเพื่อนกันแล้ว ตอนนี้เราสามารถเผยแพร่ PWAs บน play store ด้วยความช่วยเหลือของ Trusted Web Activities (TWA) Google Chrome 72 เพิ่มกิจกรรมบนเว็บที่เชื่อถือได้เพื่อรองรับการดูเว็บแบบเต็มหน้าจอโดยไม่แสดง URL หรือองค์ประกอบใด ๆ ที่เกี่ยวข้องกับเบราว์เซอร์ ดังนั้นคุณสามารถสร้าง APK ของเว็บแอพของคุณและอัปโหลดไปยังร้านค้าได้ด้วยความช่วยเหลือของสตูดิโอ Android และความรู้เกี่ยวกับการพัฒนา Android

ที่นี่ฉันแนะนำให้คุณดูวิดีโอด้านล่างเพื่อรับความรู้โดยละเอียดเกี่ยวกับ TWA:

การมีอยู่ของ PWAs เช่น Facebook Lite, Instagram Lite, Flipkart Lite และ Twitter Lite ส่วนใหญ่ใช้ WebView และให้ความรู้สึกเหมือนแอป แต่โปรดทราบว่า Apple ยังไม่ให้การสนับสนุน TWA

ในที่สุดเราสามารถพูดได้ว่า PWA เป็นวิธีที่ดีและประหยัดค่าใช้จ่ายในการพัฒนาเว็บแอปของเรา มันเป็นอนาคตของการพัฒนาเว็บอย่างแน่นอน เราหวังว่ากปภ. จะให้บริการกับเราได้มากขึ้นในอนาคตเช่นเคย

Clap Clap Clap! เพราะการตบมือเป็นนิสัยที่ดี