จะสร้าง React Progressive Web Application ได้อย่างไร?

ยักษ์ใหญ่ด้านเทคโนโลยีอย่าง Google และ Microsoft ได้ปูทางสำหรับโปรเกรสซีฟเว็บแอปพลิเคชัน (หรือ PWA) ตั้งแต่ 4-5 ปีที่แล้ว ปัจจุบัน กปภ. กลายเป็นเทคโนโลยีที่บริษัทขนาดใหญ่และสตาร์ทอัพขนาดเล็กต้องมี Twitter, Starbucks, Google และ AliExpress ใช้ตัวสร้างเว็บแอปที่มีความก้าวหน้าเพื่อปรับปรุงภาพออนไลน์ของพวกเขา

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

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

• การศึกษาของ Statista กล่าวว่ามากกว่า 40% ขององค์กร และโปรแกรมเมอร์อิสระทั่วโลกต้องการทำงานร่วมกับ React เพื่อทำให้เป็นเฟรมเวิร์กเว็บที่ได้รับความนิยมมากที่สุดในปี 2564
• React ยังถูกเรียกว่าเป็นเทคโนโลยีระดับดาวบน GitHub ด้วยที่เก็บ 85 แห่ง ทำให้เป็นเฟรมเวิร์กโอเพนซอร์ซที่เข้าถึงได้มากที่สุด
• ตามรายงานและการศึกษาบางฉบับที่จัดทำโดย รายงาน PWAs 30 อันดับแรก มีอัตรา Conversion เฉลี่ยสูงขึ้น 36% สำหรับผู้สร้างเว็บแอปแบบโปรเกรสซีฟที่ตอบสนองมากกว่าอัตราสำหรับแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่อง
• จากข้อมูลของ Smashing Ideas บริษัทที่มี PWA มี ส่วนร่วมกับลูกค้าเพิ่ม ขึ้น 50%
• รายงานเดียวกันนี้ซึ่งใช้แนวคิดยอดเยี่ยมยังระบุด้วยว่า การพัฒนาและบำรุงรักษาลดลง 33 % รายงานยังให้ข้อมูลเกี่ยวกับการประหยัดการพัฒนาและการบำรุงรักษาที่อาจมากกว่า 33% หาก PWA สามารถตอบสนองความต้องการเว็บบนมือถือทั้งหมด ขจัดความจำเป็นสำหรับแอปใหม่หรือที่มีอยู่

กปภ. และ ปฏิกิริยา

เนื่องจากท่านได้ทราบถึงความสำคัญของการประปาส่วนภูมิภาค มีหลายวิธีในการสร้างแอปตอบโต้ PWA หรือเว็บแอปพลิเคชันแบบโปรเกรสซีฟ คุณสามารถใช้ vanilla JS, HTML, CSS ได้อย่างง่ายดายและเลือกเฟรมเวิร์กและไลบรารีของคุณ ตัวเลือกยอดนิยมบางตัว ได้แก่ Ionic, Vue, Angular, Polymer และ React

เทคโนโลยีเว็บสำหรับ กปภ.:

• รายการเว็บ
• ตัวแทนบริการ
• เปลือกแอปพลิเคชัน
• HTTPS

วิธีสร้างแอป React

ในการเริ่มต้นสร้างเว็บแอป ก่อนอื่นให้ตรวจสอบว่าคุณมีโหนดเวอร์ชันล่าสุดและติดตั้งโปรแกรมแก้ไขโค้ดที่คุ้นเคย หลายคนใช้ Visual Studio Code เป็นตัวเลือกยอดนิยม

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

สร้าง PWA ด้วย Create-React-App

ตั้งค่าแอปตอบโต้อย่างง่าย

ขั้นตอนแรกคือการสร้าง กปภ. เพื่อที่คุณจะต้องใช้ create-react-app ตามที่กล่าวไว้ในย่อหน้าด้านบน หากคุณไม่ได้ติดตั้งไว้ในระบบ คุณสามารถเรียกใช้คำสั่งนี้โดยใช้โค้ดด้านล่าง:

npm ฉัน create-react-app -g

ในการสร้างแอป TypeScript React โดยใช้ create-react-app ให้ป้อนคำสั่ง npx ที่ระบุด้านล่าง:

npx create-react-app pwa-react-typescript –template typescript

ขั้นตอนเหล่านี้จะสร้างเว็บแอป React ที่สร้างขึ้นสำหรับคุณด้วย TypeScript ซึ่งสามารถทดสอบในเครื่องได้ด้วย:

cd pwa-react-typescript

เส้นด้ายเริ่มต้น

อีกวิธีในการสร้างแอป React คือ:

create-react-app react-pwa

ภาพด้านล่างแสดงไฟล์ที่จะสร้างขึ้นในโฟลเดอร์ react-app

ลงทะเบียนพนักงานบริการ

Create-react-app (CRA) นำเสนอเครื่องมือสำหรับการแก้ปัญหาคำถาม- วิธีสร้าง แอพ PWA ด้วย React สำหรับธุรกิจของคุณ ?

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

ไดเร็กทอรีของโปรเจ็กต์ที่สร้างขึ้นใหม่ประกอบด้วยไฟล์ index.js เมื่อเปิดขึ้นมาจะพบรหัสด้านล่าง:

ในไฟล์ คุณอาจเห็น service Worker ซึ่งไม่ได้ลงทะเบียนไว้ หากต้องการลงทะเบียน คุณต้องเปลี่ยนการเรียก unregister() เป็น register()

ดังนั้นคำถามเกี่ยวกับวิธีการสร้างแอพตอบโต้หรือสร้างแอพ PWA กับพนักงานบริการโดยใช้ React ได้รับการแก้ไขแล้ว?

กำหนดค่า Web App Manifest

คุณควรรู้ว่า manifest.js ในโฟลเดอร์สาธารณะมีข้อมูลเมตาที่เรียกว่าข้อมูลที่ควบคุมวิธีที่แอปเกิดขึ้นกับผู้ใช้และอธิบายลักษณะที่ปรากฏเมื่อเปิดตัว

manifest.json เชื่อมโยงในไฟล์ public/index.html:

<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />

หมายเหตุ: การใช้ %PUBLIC_URL% ในแท็กด้านบน มันจะแลกเปลี่ยนกับ URL ของโฟลเดอร์สาธารณะในระหว่างการพัฒนา โปรดทราบด้วยว่าเฉพาะไฟล์ที่อยู่ในโฟลเดอร์สาธารณะเท่านั้นที่สามารถนำมาจาก HTML

Chrome จำเป็นต้องมี manifest.json เพื่อเพิ่ม PWA ของคุณไปที่หน้าจอหลัก

serviceWorker.js ลงทะเบียนไฟล์พนักงานบริการของเรา เพื่อตอบคำถามของคุณว่าไฟล์คนงานจะลงทะเบียนที่ไหน? ไฟล์จะถูกสร้างขึ้นด้วย CRA เมื่อสร้างแอป เช่น เมื่อมีการสร้างสำหรับการผลิต:

npm รัน build

อธิบายส่วนประกอบของไฟล์ ไปกันเลย:

• คำสั่งสร้างโปรเจ็กต์และเก็บไว้ในโฟลเดอร์บิลด์
• ไฟล์ js และ css ทั้งหมดอยู่ในโฟลเดอร์สแตติก
• index.html คือหน้าหลักที่โหลดไฟล์ React ทั้งหมดที่จัดเก็บไว้ในโฟลเดอร์ static/js และ CSS ที่จัดเก็บไว้ในโฟลเดอร์ static/css
• ในไฟล์ service-worker.js รหัสพนักงานบริการทั้งหมดจะถูกเก็บไว้
• ไฟล์ทั้งหมดที่พนักงานบริการแคชในอาร์เรย์จะถูกเก็บไว้โดยไฟล์ precache-man aifest.*.js
• เพื่อให้ทุกอย่างเป็นไปตามแผนที่วางไว้ คุณต้องโหลดโฟลเดอร์บิลด์ในเบราว์เซอร์ แต่ก่อนอื่น คุณจะต้องมีเบราว์เซอร์ ติดตั้ง http-เซิร์ฟเวอร์
• ขั้นตอนต่อไปคือการเพิ่ม start ในส่วนสคริปต์ของ package.json

การทดสอบ กปภ

หลังจากทำ React PWA ขั้นตอนต่อไปเกี่ยวข้องกับการทดสอบแอป

ในการรันแอพในโหมดที่ใช้งานจริง ให้พิมพ์คำสั่งต่อไปนี้ตามภาพด้านล่าง:

ตอนนี้คุณได้สร้างแอปพลิเคชันของคุณแล้ว และได้เวลาทดสอบแล้ว Google ได้สร้างรายการตรวจสอบใน PWA และคุณสามารถประเมินเว็บแอปของคุณโดยใช้ Lighthouse เป็นเครื่องมือที่อยู่ในแท็บของ Chrome DevTools

ทำไมต้องเลือก React เพื่อสร้าง Progressive Web App?

React เป็นไลบรารีโอเพ่นซอร์สสำหรับ JavaScript ที่สร้างโดย Jordan Walke จาก Facebook ในปี 2013 ซึ่งสร้างขึ้นเพื่อการพัฒนา UI อย่างรวดเร็ว พื้นฐาน และปรับเปลี่ยนได้ กลุ่ม Facebook ติดตามห้องสมุดและปัจจุบันมีการดำเนินการในรายการเช่น Facebook และ Instagram

React ได้รับความนิยมจากปริมาณการดาวน์โหลด JavaScript ที่มีการดาวน์โหลดถึง 8 ล้านครั้งต่อสัปดาห์ หนึ่งในหลายๆ เหตุผลที่ผู้คนหันมาใช้ React กับ Native Application Development

ตอนจบ

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

PWAs ด้วยความช่วยเหลือของบริษัทพัฒนาแอพ pwa นั้นง่ายต่อการสร้างและแจกจ่าย และเพิ่มมูลค่าของลูกค้าด้วยการให้ข้อมูลเชิงลึกในท้องถิ่น ความมุ่งมั่นที่ดีขึ้นโดยใช้ส่วนประกอบต่างๆ เช่น เพิ่มในหน้าจอหลัก ข้อความป๊อปอัป และอื่นๆ โดยไม่ต้องมีสถานประกอบการ ปฏิสัมพันธ์.

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