
Magic Web เป็นเว็บแอปที่ช่วยให้คุณค้นพบสิ่งมหัศจรรย์ทั้งหมดที่เบราว์เซอร์ของคุณสามารถทำได้ มันมีชุดของการสาธิตขนาดเล็กที่แสดง API เว็บมาตรฐานที่แตกต่างกันทั้งในปัจจุบันและอนาคต แนวคิดก็คือผู้คนโดยเฉพาะนักพัฒนาสามารถลองใช้เว็บ API เหล่านี้ในที่เดียวเพื่อรับรู้ถึงสิ่งที่เป็นไปได้และแม้แต่ดูรหัสในที่เก็บนี้เพื่อดูว่าพวกเขาสามารถใช้งานได้อย่างไร
เว็บแอปสร้างด้วย React สไตล์จะเขียนด้วย CSS ธรรมดาและนำหน้าด้วย AutopRefixer โดยอัตโนมัติ Babel ใช้สำหรับ transpiling และ webpack สำหรับการรวมโมดูล สร้างแอป React ถูกใช้เพื่อดูแลเครื่องมือทั้งหมดนี้ การกำหนดเส้นทางทั้งหมดได้รับการจัดการฝั่งไคลเอ็นต์ด้วยเราเตอร์ React และรหัสผู้ปฏิบัติงานบริการสำหรับการสนับสนุนออฟไลน์จะถูกสร้างขึ้นโดยอัตโนมัติด้วย SW-Precache ไซต์นี้โฮสต์ในหน้า GitHub และปรับใช้กับยูทิลิตี้บรรทัดคำสั่งของ GH-PAGES ผ่านสคริปต์ NPM อย่างง่าย
เว็บ API จำนวนหนึ่งถูกจัดแสดงและใช้ภายในแอพตั้งแต่ที่ได้รับการยอมรับไปจนถึงสิ่งที่ทันสมัยเช่นตำแหน่งทางภูมิศาสตร์อุปกรณ์สื่อการแจ้งเตือนการพูดเว็บคำพูดเว็บบลูทู ธ คำขอการชำระเงินและอื่น ๆ การสาธิตทุกครั้งในแอพแสดงรายการเว็บ API ทั้งหมดที่เกี่ยวข้องกับชื่อด้านล่าง รหัสทั้งหมดที่เกี่ยวข้องโดยตรงกับเว็บ API นั้นแยกได้ในโมดูลที่แตกต่างกันภายในโฟลเดอร์ helpers เพื่อให้คุณต้องไม่รู้อะไรเลยนอกจากจาวาสคริปต์ธรรมดาเพื่อดู
โครงการเริ่มต้นจากการที่ฉันส่งข้อเสนอการพูดคุยไปยัง Front Fest 2017 ฉันเพิ่งดูการพูดคุยนี้บนเว็บบลูทู ธ จากการประชุมสุดยอด Chrome Dev Summit 2015 และถูกปลิวไป ฉันเพิ่งอ่านเกี่ยวกับ API คำขอการชำระเงินดังนั้นฉันจึงคิดว่าเป็นความคิดที่ดีสำหรับการพูดคุยคือการแสดงความสามารถใหม่ที่เป็นที่รู้จักน้อยเหล่านี้ของแพลตฟอร์มเว็บ ข้อเสนอของฉันได้รับการยอมรับและเมื่อฉันคิดว่าฉันจะน่าสนใจและมีผลกระทบมากขึ้นที่จะเปลี่ยนการพูดคุยของฉันให้เป็นตัวอย่างสดในรูปแบบของเว็บแอพที่ผู้ชมสามารถอ่านได้ในภายหลัง
การออกแบบเว็บแอพพยายามทำตามแนวทางการออกแบบวัสดุ ไอคอนที่ใช้ตลอดทั้งแอพนั้นเป็นส่วนหนึ่งของชุดไอคอนวัสดุและ Roboto ใช้เป็นแบบอักษรเดียว ชื่อและสีหลักของเว็บแอปได้รับแรงบันดาลใจจาก GIF นี้ซึ่งเป็นภาพที่นึกถึงเมื่อฉันเรียนรู้เกี่ยวกับเว็บ API ใหม่ล่าสุด
ที่เก็บ React PWA นั้นช่วยได้อย่างมากในการเปลี่ยนแอพ React ที่สร้างขึ้นด้วยแอพสร้างปฏิกิริยาให้กลายเป็นแอปเว็บแบบก้าวหน้า นอกจากนี้ยังมีความช่วยเหลือที่ยอดเยี่ยมคือแอพหน้าเดียวสำหรับหน้า GitHub เพื่อให้การกำหนดเส้นทางฝั่งไคลเอ็นต์ด้วยการทำงานของเราเตอร์ React กับหน้า GitHub
ซอร์สโค้ดของเว็บแอปถูกปล่อยออกมาภายใต้ใบอนุญาต MIT ข้อความเต็มของใบอนุญาตมีอยู่ในไฟล์ใบอนุญาต หากคุณพบข้อผิดพลาดใด ๆ หรือมีคำแนะนำสำหรับโครงการนี้โปรดเปิดปัญหาและฉันจะพยายามอย่างเต็มที่เพื่อช่วย