คำแนะนำเกี่ยวกับแอปเว็บขั้นสูง

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

แต่อะไรกันแน่ ความแตกต่างระหว่างแบบทั่วไป และ ความก้าวหน้า เว็บแอป?

สำหรับนักพัฒนา, มันเป็นโลกที่แตกต่าง. Progressive Web Apps ใช้ API เว็บที่ทันสมัยในการ สร้างประสบการณ์การใช้งานแอปดั้งเดิม ในเบราว์เซอร์ ซึ่งหมายความว่าผู้พัฒนาสามารถสร้างแอพไดนามิกโหลดเร็วโดยไม่ต้องใช้เฟรมเวิร์กแบบไฮบริด.

ในคู่มือนี้ฉันจะครอบคลุม พื้นฐานของ Progressive Web Apps, ฟีเจอร์หลักบางประการและวิธีเริ่มต้นการสร้างของคุณเอง.

เว็บแอพก้าวหน้าคืออะไร?

แอพพลิเคชั่นบนเว็บแบบก้าวหน้า (หรือ PWAs) ใช้ประโยชน์จาก API ของเว็บเบราว์เซอร์ เพื่อสร้างประสบการณ์การใช้งานแอปที่ถูกต้องในเบราว์เซอร์บนอุปกรณ์ใดก็ได้.

ท้ายที่สุด Progressive Web Apps ได้รวมตัว เทคโนโลยีจำนวนหนึ่ง นักพัฒนาที่สามารถใช้เพื่อสร้างแอปพลิเคชันแบบเนทีฟที่ทรงพลัง หลายคนมาจาก เว็บ API เช่น API ผู้ปฏิบัติงานบริการ หรือ พุช API.

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

• อย่างเต็มที่ ตอบสนองมือถือ.
• ปฏิบัติตาม การเพิ่มความก้าวหน้า.
• สามารถ ติดตั้งในเครื่อง บนสมาร์ทโฟนและแท็บเล็ต.
• ทำงานแบบออฟไลน์ ไม่มีอินเทอร์เน็ตโดยใช้พนักงานบริการ.
• แยกเนื้อหาจากฟังก์ชั่น ใช้เปลือกแอพ.
• สร้าง HTTPS เพื่อความปลอดภัยที่มากขึ้น.
• ค้นพบ ในการค้นหาของ Google.
• มี หน้าเหมือนแอปแบบไดนามิก แต่ยังคง มี URL ของตัวเอง.

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

มาดำดิ่งลงสู่พื้นฐานของ Progressive Web Apps และเรียนรู้สิ่งที่ทำให้พวกเขาติ๊ก.

พนักงานบริการ

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

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

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

ลองดูที่ บริการคนงานตำรา สำหรับ ตัวอย่างพื้นฐาน และ การสาธิตสด. นี่เป็นวิธีที่ยอดเยี่ยมในการเรียนรู้โดยการศึกษาสิ่งที่ผู้อื่นทำและ ทำการโคลนในแอพของคุณเอง.

หากคุณหวังที่จะสร้าง Progressive Web App เริ่มต้นด้วย Service Worker API. เพียงคนจรจัดกับมันและตั้งค่าการสาธิตง่ายๆในประเทศ สิ่งนี้จะกำหนดรากฐานสำหรับภายหลัง การสร้างคุณสมบัติและหน้าแอปพลิเคชันที่กำหนดเอง ที่ทำงานทั้งหมดผ่านพนักงานบริการ.

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

• เริ่มต้นกับพนักงานบริการ
• เริ่มต้นใช้งานกับ Service Workers
• ตัวอย่างผู้ให้บริการ: ตัวอย่างหน้าออฟไลน์ที่กำหนดเอง

แอปเปลือก

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

สิ่งนี้คงเหมือนเดิม “แอพเนทีฟ” ความรู้สึกที่ อินเตอร์เฟสยังคงปรากฏให้เห็นอยู่เสมอ แต่ เนื้อหา / ฟังก์ชั่นโหลดแตกต่างกัน แต่ละครั้ง. ลองดูหน้านี้ในเว็บไซต์ Google Developers เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ แอปโมเดลเชลล์.

แอพส่วนใหญ่มี เปลือกแอพที่ง่ายมาก และคุณควรออกแบบสถาปัตยกรรมของคุณด้วย ความเรียบง่ายในใจ.

โดยทั่วไปแล้วแอปเชลล์มีสิ่งเหล่านี้ องค์ประกอบหลัก:

• ลิงค์แถบนำทางด้านบน.
• ปุ่มรีเฟรช (ไม่จำเป็น).
• คอนเทนเนอร์พื้นหลังของหน้า.

คุณสามารถค้นหากรณีศึกษาที่ดีเกี่ยวกับที่นี่ สถาปัตยกรรมเชลล์ I / O Progressive Web App ของ Google. พวกเขายังมีเคล็ดลับในการสร้างสถาปัตยกรรมเชลล์ของคุณเองแคชและ ดึงมันโดยอัตโนมัติสำหรับทุกหน้า.

คิดว่าสถาปัตยกรรมของเชลล์เป็น องค์ประกอบ UI แบบคงที่ทั้งหมด คุณจะใช้ในทุก ๆ หน้า สิ่งเหล่านี้ควรจะเป็น แยกออกจากส่วนที่เหลือของรหัสของคุณ และแคชเพื่อนำมาใช้ใหม่ได้ง่าย ยังตรวจสอบ คำนำของ Google กับเรื่องที่มีรหัสมากมาย ตัวอย่างเพื่อช่วยคุณเริ่มต้น.

การสนับสนุนออนไลน์และออฟไลน์

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

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

หากคุณใช้ Service Worker API ลองดูที่ Cache API ซึ่งเป็น ส่วนหนึ่งของกรอบงานเดียวกัน. เป็นวิธีที่ดีที่สุด เก็บข้อมูลในเครื่อง และ เข้าถึงได้จากพนักงานบริการ ต่อมา.

นอกจากนี้คุณยังสามารถ ทดสอบแอปเว็บใด ๆ การใช้ ประภาคาร, เครื่องมือฟรีสำหรับตรวจสอบการปฏิบัติตามคุณสมบัติและสนับสนุนเทคโนโลยี PWA.

PWAs เสมอ ต้องการการสนับสนุนออฟไลน์ ผ่าน Service Worker API เพื่อให้สามารถ ทำงานในสถานะการเชื่อมต่อต่ำ. ประภาคารเป็นวิธีที่ดีที่สุดในการทดสอบการรองรับออฟไลน์พร้อมกับคุณสมบัติอื่น ๆ.

ตัวอย่างสด

ศึกษา PWAs สดและดูว่าพวกเขาทำงานอย่างไรเป็นวิธีที่ดีในการเรียนรู้ อย่างไรก็ตามตลาด Progressive Web App นั้นเป็น ยังคงเกิดขึ้น, มีสิ่งที่ดีที่สุดมากมาย กระจายอยู่ในมุมต่าง ๆ ของอินเทอร์เน็ต.

แต่ต้องขอบคุณ แกลลอรี่ PWA หิน, ฉันได้รวบรวมตัวอย่างที่น่าทึ่งเพื่อแสดงให้เห็นว่า PWAs สามารถทำอะไรได้บ้าง.

1. การแปลงสกุลเงิน

เรื่องนี้ค่อนข้างง่าย แปลงสกุลเงิน ใช้อัตราแลกเปลี่ยนและคำนวณกระแส ความแตกต่างระหว่างสกุลเงินมากมายทั่วโลก.

คุณจะสังเกตเห็นว่าแอปนี้เป็นเว็บ ตอบสนองอย่างเต็มที่, รองรับการสัมผัส, และ อัปเดตอัตโนมัติ โดยไม่ต้องรีเฟรชหน้าใด ๆ.

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

2. สำเนียงภาษาอังกฤษ

ฉันชื่นชอบแอพพลิเคชั่นเว็บนี้เพราะมันมีทั้งเอกลักษณ์และการออกแบบที่ยอดเยี่ยม แผนที่สำเนียงภาษาอังกฤษ ดามัสก์วิดีโอออนไลน์ ที่ผู้คนพกพาสำเนียงจากภูมิภาคเฉพาะของสหรัฐอเมริกาและสหราชอาณาจักร.

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

internals ทำงานใน ตอบสนอง / Redux กับ Firebase และ การเชื่อมต่อ API กับ Google Maps. ตัวอย่างที่ยอดเยี่ยมของสิ่งที่ค่อนข้างง่ายสำหรับผู้เริ่มต้นในการศึกษาและเรียนรู้.

3. Pokedex.org

PWA ที่ค่อนข้างง่ายอีกอย่างหนึ่งคือ แอพ Pokedex สร้างโดย Nolan Lawson เขายังเผยแพร่รหัสนี้อย่างอิสระ บน GitHub, ดังนั้นเราจึงเป็นอีกโครงการหนึ่งที่ มูลค่าการสอดแนมไปรอบ ๆ และศึกษา.

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

สิ่งทั้งหมดคือ ขับเคลื่อนโดย JavaScript, ดังนั้นจึงเป็นเครื่องพิสูจน์ได้ว่าคุณสามารถใช้โค้ดส่วนหน้าได้มากแค่ไหน มันใช้ แคชจำนวนมาก ด้วย Service Worker API ดังนั้น มันเร็วและใช้งานง่ายสุด ๆ.

4. Flipkart

สุดท้ายและน่าประหลาดใจที่สุดเรามาดูกัน เว็บไซต์ Flipkart. แบบเต็มนี้ ในความเป็นจริงแล้วร้านค้าอีคอมเมิร์ซคือ Progressive Web App.

มัน ตอบสนองอย่างเต็มที่ และ โหลดหน้าแบบไดนามิก. URL ของหน้าจะถูกผนวกเข้ากับเบราว์เซอร์ดังนั้นคุณสามารถคัดลอก / วางและแบ่งปันได้เหมือนเว็บไซต์ทั่วไป.

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

และในขณะที่ฉันไม่พบ repo สำหรับซอร์สโค้ด Flipkart ทั้งหมด แต่ก็มี หน้า Flipkart บน GitHub กับ ตัวอย่างโค้ดขนาดเล็ก จากทีมนักพัฒนาซอฟต์แวร์ของพวกเขา.

เรียนรู้เพิ่มเติม

แอพก้าวหน้าทางเว็บคือ ยอดนิยมอย่างไม่น่าเชื่อและจะได้รับไอน้ำอย่างแน่นอน เมื่อนักพัฒนาซอฟต์แวร์เปลี่ยนจากแอพเนทีฟ / ไฮบริดมากขึ้น.

มีการประชุมสุดยอดประจำปีเรียกว่า การประชุมสุดยอด Web App ขั้นสูง และพวกเขาเผยแพร่วิดีโอบน YouTube ที่คุณสามารถรับชมได้ฟรี นี่เป็นวิธีที่ดีในการ รับความรู้ระดับมืออาชีพโดยไม่ต้องจ่ายค่าตั๋ว.

แต่ถ้าคุณกำลังมองหารายละเอียดเพิ่มเติม คู่มือการเข้ารหัส PWA ตรวจสอบบทเรียนเหล่านี้อย่างแน่นอน:

• คู่มือสำหรับผู้เริ่มต้นสู่แอปเว็บขั้นสูง
• สร้างแอปเว็บโปรเกรสซีฟแรกของคุณด้วย React
• สร้างแอพพลิเคชั่นเว็บแบบก้าวหน้าด้วยโพลีเมอร์