มีผู้คน 6.8 พันล้านคนบนโลกนี้ 5.1 พันล้านคนเป็นเจ้าของโทรศัพท์มือถือ และปัจจุบันอุปกรณ์เหล่านี้มีจำนวนมากขึ้นเรื่อย ๆ คือสมาร์ทโฟน ตามล่าสุด Pew Research Center ศึกษา จำนวนผู้ใช้ที่เข้าถึงอินเทอร์เน็ตบนสมาร์ทโฟนเพิ่มขึ้นกว่า 2 เท่าในช่วง 5 ปีที่ผ่านมาเนื่องจากจำนวนผู้ใช้ดาวน์โหลดและใช้งาน แอพมือถือ . ในบรรดาผู้ที่ใช้อินเทอร์เน็ตหรืออีเมลบนโทรศัพท์มากกว่าหนึ่งในสามออนไลน์ผ่านอุปกรณ์พกพาเป็นหลัก
อันที่จริงการประมวลผลบนมือถือแพร่หลายมากขึ้นเรื่อย ๆ …และมันยอดเยี่ยมมาก
ยกเว้นแน่นอนเมื่อไม่เป็นเช่นนั้น
ในฐานะผู้ใช้อุปกรณ์พกพามีบางสิ่งที่น่าหงุดหงิดและยากที่จะใช้นิ้วชี้ไปที่เว็บแอปบนอุปกรณ์เคลื่อนที่ที่ออกแบบมาไม่ดีหรือแม้แต่แอปที่มาพร้อมเครื่อง
และในฐานะที่เป็น นักพัฒนาแอพมือถือ มีบางสิ่งที่อาจสร้างความรำคาญใจอย่างมากพอ ๆ กับการพยายามสนับสนุนไคลเอนต์มือถือให้กว้างที่สุดเท่าที่จะเป็นไปได้ซึ่งแต่ละอย่างมีชุดความแปลกประหลาดที่น่าหงุดหงิดของตัวเอง ไม่ว่าคุณจะเลือกพัฒนาเว็บบนมือถือแอปเนทีฟหรือไฮบริดภารกิจเพื่อรองรับเบราว์เซอร์มือถือหลายเครื่องอุปกรณ์ที่แปลกใหม่และการจับคู่กับแพลตฟอร์มต่างๆอาจเป็นประสบการณ์ที่น่าเบื่ออย่างแท้จริง
แน่นอนว่าไม่ใช่นักพัฒนาซอฟต์แวร์ทุกคนในปัจจุบันที่ต้องกังวลเกี่ยวกับการสนับสนุนไคลเอนต์มือถือ แต่ลักษณะที่ปรากฏอยู่ทั่วไปทุกหนทุกแห่งของอุปกรณ์เคลื่อนที่และแอปพลิเคชันชี้ให้เห็นอย่างยิ่งว่าผู้ที่ไม่จำเป็นต้องรองรับไคลเอนต์มือถือในปัจจุบันมีแนวโน้มที่จะต้องทำเช่นนั้นในอนาคตอันไม่ไกล ดังนั้นหากคุณยังไม่ได้คิดถึง การพัฒนาแอพมือถือ คุณน่าจะเป็น
ตามความเป็นจริงกับการเลือกใช้เทคโนโลยีส่วนใหญ่ไม่มีคำตอบเดียวสำหรับประเภทของแอปบนอุปกรณ์เคลื่อนที่ที่จะพัฒนา มีแนวทางปฏิบัติที่ดีที่สุดสำหรับเว็บแอปมากมายที่ควรพิจารณาไม่ใช่ทั้งหมดที่เป็นเรื่องเทคนิค กลุ่มเป้าหมายของคุณคือใคร? พวกเขามีแนวโน้มที่จะชอบเว็บบนมือถือหรือแอปเนทีฟมากกว่ากัน? แอปแบบเนทีฟกับแอปไฮบริดต่างกันอย่างไร คุณมีทรัพยากรการพัฒนาใดบ้างและเทคโนโลยีใดที่พวกเขาคุ้นเคยมากที่สุด รูปแบบการให้ใบอนุญาตและการขายที่คุณคาดไม่ถึงสำหรับผลิตภัณฑ์ของคุณคืออะไร
โดยทั่วไป (แม้ว่าจะมีข้อยกเว้นอยู่เสมอ) เส้นทางของเว็บแอปบนอุปกรณ์เคลื่อนที่นั้นเร็วกว่าและถูกกว่าเส้นทางของแอปบนอุปกรณ์เคลื่อนที่โดยเฉพาะอย่างยิ่งเมื่อมีวัตถุประสงค์เพื่อรองรับอุปกรณ์ที่หลากหลาย ในทางกลับกันอาจมีความสามารถที่มาจากอุปกรณ์เคลื่อนที่ (เช่นเซ็นเซอร์การเคลื่อนไหวเป็นต้น) ที่จำเป็นสำหรับแอปของคุณ แต่สามารถเข้าถึงได้ผ่านแอปเนทีฟเท่านั้น (ซึ่งจะทำให้ตัวเลือกเว็บบนอุปกรณ์เคลื่อนที่ไม่ เริ่มต้นสำหรับคุณ)
และนอกเหนือจากคำถามเกี่ยวกับเว็บแอปแบบเก่ากับแอปเนทีฟแอปมือถือแบบไฮบริดอาจเป็นคำตอบที่เหมาะสมสำหรับคุณทั้งนี้ขึ้นอยู่กับความต้องการและข้อ จำกัด ด้านทรัพยากรของคุณ แอปไฮบริดเช่นแอปที่มาพร้อมเครื่องทำงานบนอุปกรณ์เอง (ซึ่งต่างจากในเบราว์เซอร์) แต่เขียนด้วยเทคโนโลยีเว็บ (HTML5, CSS และ JavaScript) และโดยทั่วไปแล้วจะได้รับการสนับสนุนโดยเฟรมเวิร์กของแอปไฮบริด โดยเฉพาะอย่างยิ่งแอปไฮบริดทำงานภายในคอนเทนเนอร์เนทีฟและใช้ประโยชน์จากกลไกเบราว์เซอร์ของอุปกรณ์ (แต่ไม่ใช่เบราว์เซอร์) เพื่อแสดงผล HTML และประมวลผล JavaScript ภายในเครื่อง เลเยอร์นามธรรมจากเว็บสู่เนทีฟช่วยให้สามารถเข้าถึงความสามารถของอุปกรณ์ที่ไม่สามารถเข้าถึงได้ในแอปพลิเคชันเว็บบนมือถือเช่นมาตรความเร่งกล้องถ่ายรูปและที่เก็บข้อมูลในเครื่อง
ไม่ว่าคุณจะเลือกทางเลือกใดไม่ว่าจะเป็นเว็บแอปบนอุปกรณ์เคลื่อนที่แอปเนทีฟหรือแอปไฮบริดโปรดระมัดระวังในการค้นคว้าและยืนยันสมมติฐานของคุณอย่างเพียงพอ ตัวอย่างเช่นสำหรับวัตถุประสงค์ของบทแนะนำการพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่นี้คุณอาจตัดสินใจที่จะพัฒนาแอปบนอุปกรณ์เคลื่อนที่สำหรับอีคอมเมิร์ซเพื่อขายผลิตภัณฑ์ของคุณ แต่ตาม Hubspot 73% ของผู้ใช้สมาร์ทโฟนกล่าวว่าพวกเขาใช้เว็บบนมือถือมากกว่าแอปที่มาพร้อมเครื่องในการช็อปปิ้ง…ดังนั้นในกรณีนี้คุณอาจเดิมพันม้าผิดตัว
ไม่ว่าคุณจะเลือกทางเลือกใดไม่ว่าจะเป็นเว็บบนอุปกรณ์เคลื่อนที่แอปเนทีฟหรือไฮบริดโปรดระมัดระวังในการค้นคว้าและยืนยันสมมติฐานของคุณอย่างเพียงพอและแน่นอนว่ามีการพิจารณาในทางปฏิบัติเกี่ยวกับเวลาและงบประมาณ เป็นหนึ่งในคำพูดที่ฉันชอบมากที่สุด “ เร็วกว่าดีกว่าถูกกว่า…เลือกสองอย่าง” . แม้ว่าข้อ จำกัด ด้านเวลาสู่ตลาดและต้นทุนมีความสำคัญอย่างยิ่งในการพัฒนาเว็บแอปพลิเคชัน แต่สิ่งสำคัญคือไม่ต้องประนีประนอมกับคุณภาพในกระบวนการมากเกินไป การกู้คืนความเชื่อมั่นของผู้ใช้ที่มีประสบการณ์ครั้งแรกที่ไม่ดีนั้นค่อนข้างยาก
แท้จริงแล้วเว็บบนอุปกรณ์เคลื่อนที่แอปเนทีฟและไฮบริดล้วนเป็นสัตว์ร้ายที่แตกต่างกันอย่างสิ้นเชิงโดยแต่ละตัวจะมีสิทธิประโยชน์และความท้าทายที่เป็นเอกลักษณ์ของตัวเอง บทแนะนำการพัฒนาเว็บบนมือถือนี้มุ่งเน้นไปที่วิธีการและเครื่องมือในการใช้งานโดยเฉพาะและข้อผิดพลาดที่ควรหลีกเลี่ยงในการพัฒนาเว็บแอปพลิเคชันบนมือถือที่ใช้งานง่ายและใช้งานง่าย
การระบุข้อกำหนดของคุณ (หรือลูกค้าของคุณ) เป็นแนวทางปฏิบัติที่ดีที่สุดที่สำคัญที่สุดอย่างหนึ่งในการพัฒนาแอปอุปกรณ์เคลื่อนที่หรืออื่น ๆ ศึกษาความสามารถที่กำหนดเป้าหมายอย่างรอบคอบเพื่อพิจารณาว่าสามารถทำได้ในเว็บแอปบนอุปกรณ์เคลื่อนที่ของคุณหรือไม่ เป็นเรื่องที่น่าผิดหวังและไม่ได้ผลอย่างมากที่ต้องตระหนักว่าไม่รองรับฟังก์ชันไคลเอ็นต์ที่สำคัญอย่างน้อยหนึ่งอย่างของคุณเมื่อคุณได้ลงทุนเวลาและทรัพยากรไปแล้วเพื่อออกแบบอินเทอร์เฟซบนเว็บและโครงสร้างพื้นฐานที่รองรับ
gotcha ทั่วไปอีกอย่างหนึ่งสำหรับมือใหม่สำหรับนักพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่คือสมมติว่าโค้ดบนเว็บสำหรับเบราว์เซอร์เดสก์ท็อปจะทำงาน“ ตามที่เป็นอยู่” ในเบราว์เซอร์มือถือ ไม่. แน่นอนที่สุด คือ ความแตกต่างและหากคุณไม่รู้ตัวพวกเขาสามารถกัดคุณได้อย่างแน่นอน ตัวอย่างเช่นฟังก์ชันการเล่นอัตโนมัติของ HTML5tag ไม่ทำงานบนเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ในทำนองเดียวกัน CSS transition
และ opacity
ไม่รองรับคุณสมบัติ (หรืออย่างน้อยก็ไม่ได้รับการสนับสนุนอย่างสม่ำเสมอ) ในเบราว์เซอร์มือถือส่วนใหญ่ในปัจจุบัน นอกจากนี้คุณจะมีปัญหากับวิธี Web API บางอย่างบนแพลตฟอร์มมือถือเช่น SoundCloud music streaming API ที่ต้องใช้ Adobe Flash ซึ่งไม่รองรับบนอุปกรณ์มือถือส่วนใหญ่
ปัจจัยที่ซับซ้อนโดยเฉพาะอย่างยิ่งในการพัฒนาเว็บแอปพลิเคชันบนมือถือคืออายุการใช้งานของอุปกรณ์พกพามีแนวโน้มที่จะสั้นกว่าหน้าจอเดสก์ท็อปมาก (อายุการใช้งานโดยเฉลี่ยของโทรศัพท์มือถือในสหรัฐอเมริกาอยู่ที่ประมาณ 21 เดือน) อายุการใช้งานอุปกรณ์ที่สั้นลงเหล่านี้พร้อมกับอุปกรณ์เคลื่อนที่และเทคโนโลยีใหม่ ๆ ที่ออกมาอย่างต่อเนื่องทำให้เกิดการเปลี่ยนแปลงตลอดเวลาของอุปกรณ์ที่เป็นเป้าหมาย ในขณะที่ทำงานในเบราว์เซอร์จะช่วยบรรเทาปัญหานี้ได้บ้างโดยการป้องกันคุณจากปัญหาเฉพาะอุปกรณ์หลายประการคุณยังคงต้องออกแบบมุมมองบนเบราว์เซอร์ที่รองรับความละเอียดหน้าจอที่แตกต่างกันจำนวนมาก (รวมทั้งปรับให้เหมาะสมสำหรับแนวนอนและแนวตั้ง ).
จำเป็นต้องให้ความคิดเช่นกันเพื่อรองรับ Retina Displays ของ Apple (จอแสดงผลคริสตัลเหลวที่มีความหนาแน่นของพิกเซลสูงพอที่สายตามนุษย์จะไม่สามารถมองเห็นแต่ละพิกเซลในระยะการมองเห็นทั่วไปได้) ผลิตภัณฑ์ Apple หลายรายการรวมถึง iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini และ iPad Air มีจอภาพ Retina โดยเฉพาะอย่างยิ่งสำหรับเว็บแอปบนอุปกรณ์เคลื่อนที่สิ่งสำคัญคือต้องทราบว่าจอภาพ Retina ทำให้ภาพที่มีความละเอียดต่ำ (ซึ่งโดยปกติจะใช้กับอุปกรณ์เคลื่อนที่) ดูไม่ชัดเจนและ พิกเซล สามารถเกิดขึ้น. โซลูชันการพัฒนาแอปที่ดีที่สุดในกรณีเหล่านี้คือการให้เซิร์ฟเวอร์รับรู้ว่าคำขอนั้นมาจากอุปกรณ์ Retina จากนั้นจึงให้ภาพที่มีความละเอียดสูงกว่าทางเลือกอื่นแก่ไคลเอ็นต์
หากคุณต้องการใช้สิ่งที่น่าสนใจเกี่ยวกับ HTML5 อย่าลืมยืนยันล่วงหน้าว่าฟังก์ชันที่คุณกำลังมองหาได้รับการสนับสนุนในอุปกรณ์ที่ลูกค้าของคุณน่าจะใช้งานอยู่ ตัวอย่างเช่นใน iOS 6 ขึ้นไปจะไม่มีการรองรับตัวนำทาง getUserMedia
ฟังก์ชันการทำงานเนื่องจากกล้องสามารถเข้าถึงได้ผ่านแอปเนทีฟเท่านั้น แหล่งข้อมูลที่ดีสองอย่างสำหรับการตรวจสอบสิ่งที่รองรับบนอุปกรณ์และเบราว์เซอร์ที่เฉพาะเจาะจงคือ caniuse.com และ html5test.com .
คิวรีสื่อ CSS3 ยังช่วยให้คุณจัดเตรียมเนื้อหาที่กำหนดเองสำหรับแต่ละอุปกรณ์ ต่อไปนี้เป็นโค้ดตัวอย่างสำหรับการจับภาพลักษณะต่างๆของอุปกรณ์เช่นความหนาแน่นของพิกเซลความละเอียดหน้าจอและการวางแนว:
/* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }
“ โอ้พระเจ้าสิ่งนี้ช้ามาก!” ในฐานะนักพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่คำเหล่านี้อาจเป็นคำพูดสุดท้ายที่คุณอยากได้ยินจากผู้ใช้ของคุณ ดังนั้นคุณต้องพิจารณาอย่างรอบคอบเกี่ยวกับวิธีลดและเพิ่มประสิทธิภาพการถ่ายโอนไบต์และเซิร์ฟเวอร์แต่ละรายการเพื่อลดเวลารอของผู้ใช้ เป็นเรื่องไม่จริงที่จะคาดหวังว่าการถ่ายโอนจะกระทำผ่านเครือข่าย WiFi เสมอไปและคุณควรรู้ไว้ 60% ของผู้ใช้เว็บบนอุปกรณ์เคลื่อนที่ กล่าวว่าพวกเขาคาดว่าไซต์จะโหลดบนโทรศัพท์มือถือภายใน 3 วินาทีหรือน้อยกว่านั้น (ที่มา) ในทำนองเดียวกัน Google พบว่าทุกๆห้าวินาทีของเวลาโหลดเพิ่มขึ้นการเข้าชมลดลง 20% (และเป็นที่น่าสังเกตว่าเครื่องมือค้นหาดูเวลาในการโหลดเป็นส่วนหนึ่งของการคำนวณคะแนนคุณภาพของหน้า)
60% ของผู้ใช้เว็บบนอุปกรณ์เคลื่อนที่กล่าวว่าพวกเขาคาดหวังว่าเว็บไซต์จะโหลดบนโทรศัพท์มือถือได้ภายใน 3 วินาทีหรือน้อยกว่านั้นในฐานะส่วนหนึ่งของบทช่วยสอนการพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่ต่อไปนี้เป็นเคล็ดลับบางประการที่สามารถช่วยเพิ่มประสิทธิภาพของแอปพลิเคชันเว็บบนมือถือของคุณและลดเวลาในการตอบสนอง:
“ เครื่องมือที่เหมาะสมสำหรับงานที่เหมาะสม” เป็นสุภาษิตโบราณที่ใช้กับการพัฒนาซอฟต์แวร์ได้มากพอ ๆ กับโดเมนอื่น ๆ บทช่วยสอนนี้ให้ข้อมูลและข้อมูลเบื้องต้นเกี่ยวกับเครื่องมือที่ได้รับความนิยมและใช้กันอย่างแพร่หลายสำหรับการพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่ แต่โปรดทราบว่าอาจมีเครื่องมืออื่น ๆ ที่ 'เหมาะสม' สำหรับการพัฒนาเว็บแอปพลิเคชันบนมือถือของคุณขึ้นอยู่กับ ความต้องการของคุณและทรัพยากรที่มีอยู่
เนื่องจากการพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่มักจะสร้างความท้าทายที่เหมือนกันหลายประการเช่นความเข้ากันได้ข้ามเบราว์เซอร์และ HTML และ CSS ที่ไม่สอดคล้องกันในเบราว์เซอร์มือถือจึงได้มีการพัฒนาเฟรมเวิร์ก (อิงตาม HTML5 และ CSS3) ที่ออกแบบมาโดยเฉพาะเพื่อแก้ไขปัญหาเหล่านี้และ เพื่อให้ทำงานได้อย่างไม่มีที่ติบนสมาร์ทโฟนและแท็บเล็ตหลากหลายรุ่น เฟรมเวิร์กเว็บแอปบนอุปกรณ์เคลื่อนที่เหล่านี้ส่วนใหญ่มีน้ำหนักเบาซึ่งช่วยอำนวยความสะดวกในการท่องเว็บบนอุปกรณ์เคลื่อนที่ได้อย่างรวดเร็วโดยไม่กระทบกับรูปลักษณ์ของไซต์ของคุณ
การขยายมุมมองของเราให้กว้างขึ้นนอกเหนือจากภาพรวมของอุปกรณ์เคลื่อนที่หากมีกรอบ JavaScript ยอดนิยมเพียงตัวเดียวที่ควรค่าแก่การกล่าวถึง jQuery . หากคุณคุ้นเคยกับเวอร์ชันเดสก์ท็อปขอแนะนำให้ลองใช้ jQuery มือถือ สำหรับเว็บแอปบนมือถือของคุณ มีไลบรารีวิดเจ็ตที่แปลงมาร์กอัปความหมายให้อยู่ในรูปแบบที่เป็นมิตรกับท่าทางสัมผัสทำให้การใช้งานง่ายบนหน้าจอสัมผัส เวอร์ชันล่าสุดประกอบด้วยฐานรหัสที่มีน้ำหนักเบาซึ่งอัดแน่นไปด้วยองค์ประกอบกราฟิกจำนวนมากที่สามารถปรับปรุง UI ของคุณได้
ทางเลือกอื่น Sencha Touch กำลังได้รับส่วนแบ่งการตลาดอย่างรวดเร็วเช่นกัน มีประสิทธิภาพที่ยอดเยี่ยมโดยรวมและช่วยสร้างอินเทอร์เฟซผู้ใช้บนเว็บบนมือถือที่ส่วนใหญ่มีลักษณะและให้ความรู้สึกเหมือนเป็นเจ้าของภาษา ไลบรารีวิดเจ็ตที่มีคุณสมบัติครบถ้วนจะขึ้นอยู่กับ Sencha’s ExtJS ไลบรารี JavaScript
ความแตกต่างที่สำคัญบางประการที่ควรพิจารณาเมื่อเปรียบเทียบ jQuery Mobile กับ Sencha Touch:
เฟรมเวิร์กที่ตอบสนองได้เพิ่มขึ้นจำนวนมากขึ้นในช่วงไม่กี่ปีที่ผ่านมาโดยสองเฟรมที่ได้รับความนิยมมากที่สุดในปัจจุบัน Bootstrap และ รากฐาน . ในระยะสั้นกรอบตอบสนองช่วยลดความซับซ้อนและปรับปรุง การออกแบบ UI ที่ตอบสนองบนเว็บ และการนำไปใช้งานโดยสรุปเค้าโครงและกระบวนทัศน์ UI ที่พบบ่อยที่สุดไว้ในกรอบงานที่นำกลับมาใช้ใหม่ได้และได้รับการเพิ่มประสิทธิภาพ ส่วนใหญ่ใช้ CSS และ JavaScript เฟรมเวิร์กเหล่านี้ส่วนใหญ่เป็นโอเพ่นซอร์สดาวน์โหลดฟรีและปรับแต่งได้ง่าย หากคุณไม่มีข้อกำหนดที่แปลกประหลาดเป็นอย่างมากมีแนวโน้มว่าการใช้กรอบงานเหล่านี้จะช่วยลดระดับความพยายามในการออกแบบและใช้งานเว็บแอปพลิเคชันบนอุปกรณ์เคลื่อนที่ของคุณ
การตรวจสอบสองตัวเลือกชั้นนำ Bootstrap และ Foundation ข้อแตกต่างที่สำคัญบางประการที่ควรพิจารณา ได้แก่ :
การดีบักแอปพลิเคชันเว็บบนอุปกรณ์เคลื่อนที่อาจเป็นเรื่องยุ่งยากและค่อนข้างน่าหงุดหงิดโดยเฉพาะอย่างยิ่งหากคุณต้องการตรวจสอบอุปกรณ์ต่างๆเพื่อทดสอบหรือติดตั้ง SDK สำหรับการจำลองแพลตฟอร์มไคลเอนต์เป้าหมาย (โดยทั่วไปไม่สมบูรณ์)
ในบริบทนี้ข้อได้เปรียบที่ชัดเจนอย่างหนึ่งของการพัฒนาเว็บบนอุปกรณ์เคลื่อนที่ (เมื่อเทียบกับการพัฒนาแอปเนทีฟ) คือคุณสามารถใช้เครื่องมือสำหรับนักพัฒนาที่ใช้เบราว์เซอร์มาตรฐานเพื่อแก้ไขข้อบกพร่องของแอปพลิเคชันของคุณ จากความชอบส่วนตัวของฉันสำหรับการดีบักระยะไกลสิ่งที่ฉันแนะนำในบทช่วยสอนการพัฒนาแอปนี้คือ Chrome พร้อม DevTools ตัวเลือกมาตรฐานอื่น ๆ ได้แก่ Firefox พร้อม Firebug หรือ Opera’s Dragonfly tools
มอนติคาร์โลจำลองสำหรับหุ่น
เหตุผลบางประการที่ฉันชอบ Chrome พร้อม DevTools รวม:
ในการทดสอบเค้าโครงและความเข้ากันได้ของการท่องเว็บข้ามเว็บของคุณคุณยังสามารถใช้เครื่องมือออนไลน์ที่มีประโยชน์เช่น BrowserStack . เพียงป้อน URL สำหรับแอปพลิเคชันของคุณเลือกเบราว์เซอร์เวอร์ชันและระบบปฏิบัติการคุณจะได้รับมุมมองจำลอง (และความเร็วในการโหลด) ของไซต์ของคุณในสภาพแวดล้อมนั้น เครื่องมือที่มีประโยชน์อีกอย่างสำหรับวัตถุประสงค์นี้คือ CrossBrowserTesting .
ด้วยการขยายจำนวนอย่างรวดเร็วอย่างต่อเนื่องความหลากหลายและความซับซ้อนของอุปกรณ์พกพาในตลาดและการใช้งานในปัจจุบันความต้องการแอปพลิเคชันมือถือที่มีประสิทธิภาพใช้งานง่ายและมีประสิทธิภาพสูงมีแนวโน้มที่จะเพิ่มขึ้นอย่างมาก ความสามารถในการพัฒนาแอพพลิเคชั่นเหล่านี้อย่างชาญฉลาดและมีประสิทธิภาพจึงยังคงมีความสำคัญยิ่งต่อไป
ต้องพิจารณาหลายปัจจัยเมื่อเลือกระหว่างตัวเลือกเว็บเนทีฟและแอพมือถือแบบไฮบริดสำหรับอุปกรณ์เคลื่อนที่ แต่ละคนมีข้อดีของตัวเอง แต่เว็บแอปบนอุปกรณ์เคลื่อนที่มักจะเป็นตัวแทนของตัวเลือกการพัฒนาที่มีประสิทธิภาพสูงสุดของคุณ (และตามเวลาสู่ตลาด) หากคุณเลือกที่จะไปตามเส้นทางนั้นฉันหวังว่าบทช่วยสอนการพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่นี้จะช่วยให้คุณไปถึงจุดหมายได้โดยตรงและประสบความสำเร็จมากขึ้น
ที่เกี่ยวข้อง: ทำให้แอปของคุณมีกำไร - ใช้ประโยชน์จาก Mobile Analyticsเว็บแอปบนอุปกรณ์เคลื่อนที่คือเว็บแอปที่ปรับแต่งมาเพื่อประสบการณ์ใช้งานโทรศัพท์ที่ดี ไม่ใช่แอปพลิเคชันบนมือถือ แต่เป็นเว็บไซต์ที่เขียนด้วย HTML / CSS และเรียกใช้โดยเบราว์เซอร์ แม้ว่าแอปเหล่านี้อาจได้รับการออกแบบให้คล้ายกับแอปสมาร์ทโฟน แต่ก็ไม่ได้มีอะไรเหมือนกันมากนัก
แอปพลิเคชันแบบเนทีฟคือแอปพลิเคชันที่เขียนขึ้นสำหรับแพลตฟอร์มเฉพาะโดยใช้ API เฉพาะแพลตฟอร์ม
แอปไฮบริดคือแอปพลิเคชันที่เขียนโดยใช้เทคโนโลยีเว็บและห่อหุ้มด้วยเว็บเบราว์เซอร์แบบบาง แอปไฮบริดสามารถย้ายไปยังแพลตฟอร์มต่างๆได้อย่างรวดเร็วโดยที่พวกเขาแชร์โค้ดเบสเดียวกัน
แอปที่มาพร้อมเครื่องเขียนด้วยภาษาเฉพาะของแพลตฟอร์มโดยใช้ API ของแพลตฟอร์มเช่น Java หรือ Kotlin สำหรับ Android และ Objective C หรือ Swift สำหรับ iOS แอปไฮบริดเขียนโดยใช้เทคโนโลยีเว็บเช่น HTML5 / CSS และ Javascript
แอปพลิเคชันเว็บบนมือถือคือเว็บไซต์ที่ปรับให้เหมาะกับการใช้งานบนมือถือ หากทำได้ดีประสบการณ์ก็น่าทึ่งเหมือนแอปพลิเคชันเนทีฟหรือไฮบริด ตัวอย่างเช่นดู https://paperplanes.world/
แอปไฮบริดมักจะมีปัญหาและทำงานช้ากว่าแอปเนทีฟเนื่องจากแอปที่มาพร้อมเครื่องไม่ต้องใช้ห่วงและเลเยอร์ของคอนเทนเนอร์เพื่อให้ทำงานได้ แอปที่มาพร้อมเครื่องมีประสิทธิภาพมากกว่า React Native สามารถเปลี่ยนเกมได้