มีผู้คน 6.8 พันล้านคนบนโลกนี้ 5.1 พันล้านคนเป็นเจ้าของโทรศัพท์มือถือ และปัจจุบันอุปกรณ์เหล่านี้มีจำนวนมากขึ้นเรื่อย ๆ คือสมาร์ทโฟน ตามล่าสุด Pew Research Center ศึกษา จำนวนผู้ใช้ที่เข้าถึงอินเทอร์เน็ตบนสมาร์ทโฟนเพิ่มขึ้นกว่า 2 เท่าในช่วง 5 ปีที่ผ่านมาเนื่องจากจำนวนผู้ใช้ดาวน์โหลดและใช้งาน แอพมือถือ . ในบรรดาผู้ที่ใช้อินเทอร์เน็ตหรืออีเมลบนโทรศัพท์มากกว่าหนึ่งในสามออนไลน์ผ่านอุปกรณ์พกพาเป็นหลัก

อันที่จริงการประมวลผลบนมือถือแพร่หลายมากขึ้นเรื่อย ๆ …และมันยอดเยี่ยมมาก

ยกเว้นแน่นอนเมื่อไม่เป็นเช่นนั้น

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

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

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

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

Mobile Web App กับ Native App เทียบกับ Hybrid App

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

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

และนอกเหนือจากคำถามเกี่ยวกับเว็บแอปแบบเก่ากับแอปเนทีฟแอปมือถือแบบไฮบริดอาจเป็นคำตอบที่เหมาะสมสำหรับคุณทั้งนี้ขึ้นอยู่กับความต้องการและข้อ จำกัด ด้านทรัพยากรของคุณ แอปไฮบริดเช่นแอปที่มาพร้อมเครื่องทำงานบนอุปกรณ์เอง (ซึ่งต่างจากในเบราว์เซอร์) แต่เขียนด้วยเทคโนโลยีเว็บ (HTML5, CSS และ JavaScript) และโดยทั่วไปแล้วจะได้รับการสนับสนุนโดยเฟรมเวิร์กของแอปไฮบริด โดยเฉพาะอย่างยิ่งแอปไฮบริดทำงานภายในคอนเทนเนอร์เนทีฟและใช้ประโยชน์จากกลไกเบราว์เซอร์ของอุปกรณ์ (แต่ไม่ใช่เบราว์เซอร์) เพื่อแสดงผล HTML และประมวลผล JavaScript ภายในเครื่อง เลเยอร์นามธรรมจากเว็บสู่เนทีฟช่วยให้สามารถเข้าถึงความสามารถของอุปกรณ์ที่ไม่สามารถเข้าถึงได้ในแอปพลิเคชันเว็บบนมือถือเช่นมาตรความเร่งกล้องถ่ายรูปและที่เก็บข้อมูลในเครื่อง

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

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

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

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

การพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่จำเป็นต้องมีการวางแผนโดยละเอียด

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

gotcha ทั่วไปอีกอย่างหนึ่งสำหรับมือใหม่สำหรับนักพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่คือสมมติว่าโค้ดบนเว็บสำหรับเบราว์เซอร์เดสก์ท็อปจะทำงาน“ ตามที่เป็นอยู่” ในเบราว์เซอร์มือถือ ไม่. แน่นอนที่สุด คือ ความแตกต่างและหากคุณไม่รู้ตัวพวกเขาสามารถกัดคุณได้อย่างแน่นอน ตัวอย่างเช่นฟังก์ชันการเล่นอัตโนมัติของ HTML5tag ไม่ทำงานบนเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ในทำนองเดียวกัน CSS transition และ opacity ไม่รองรับคุณสมบัติ (หรืออย่างน้อยก็ไม่ได้รับการสนับสนุนอย่างสม่ำเสมอ) ในเบราว์เซอร์มือถือส่วนใหญ่ในปัจจุบัน นอกจากนี้คุณจะมีปัญหากับวิธี Web API บางอย่างบนแพลตฟอร์มมือถือเช่น SoundCloud music streaming API ที่ต้องใช้ Adobe Flash ซึ่งไม่รองรับบนอุปกรณ์มือถือส่วนใหญ่

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

ปัจจัยที่ซับซ้อนโดยเฉพาะอย่างยิ่งในการพัฒนาเว็บแอปพลิเคชันบนมือถือคืออายุการใช้งานของอุปกรณ์พกพามีแนวโน้มที่จะสั้นกว่าหน้าจอเดสก์ท็อปมาก (อายุการใช้งานโดยเฉลี่ยของโทรศัพท์มือถือในสหรัฐอเมริกาอยู่ที่ประมาณ 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 วินาทีหรือน้อยกว่านั้น

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

• การปรับภาพให้เหมาะสม เวลาในการโหลดรูปภาพเป็นที่ทราบกันดีว่าเป็นหนึ่งในปัญหาด้านประสิทธิภาพที่ใหญ่ที่สุดที่ส่งผลต่อการโหลดหน้าเว็บบนอุปกรณ์เคลื่อนที่ การใช้เครื่องมือเพิ่มประสิทธิภาพรูปภาพออนไลน์เช่น smushit.com จะเป็นประโยชน์ในการแก้ไขปัญหานี้
• การบีบอัดรหัส การบีบอัดไฟล์ JavaScript และ CSS ของคุณขึ้นอยู่กับจำนวนโค้ดที่คุณมีอาจส่งผลกระทบอย่างมากต่อประสิทธิภาพ
• แบบสอบถามฐานข้อมูล
  • เบราว์เซอร์บนอุปกรณ์เคลื่อนที่บางประเภทไม่ยอมรับคุกกี้มากเท่ากับเบราว์เซอร์บนเดสก์ท็อปซึ่งอาจส่งผลให้ต้องดำเนินการค้นหามากกว่าปกติ การแคชฝั่งเซิร์ฟเวอร์จึงมีความสำคัญอย่างยิ่งเมื่อรองรับไคลเอนต์เว็บแอปบนอุปกรณ์เคลื่อนที่
  • อย่าลืมใช้ตัวกรองที่เหมาะสมเพื่อป้องกันการแทรกคิวรี SQL ที่อาจทำลายความปลอดภัยของไซต์และเซิร์ฟเวอร์ของคุณ
• เครือข่ายการจัดส่งเนื้อหา (CDN) หากคุณกำลังวางแผนที่จะให้บริการวิดีโอรูปภาพไฟล์เสียงหรือสื่อประเภทอื่น ๆ จำนวนมากขอแนะนำให้ใช้ CDN CDN เชิงพาณิชย์ทั่วไปบางส่วน ได้แก่ Amazon S3 , Microsoft Windows Azure และ MaxCDN . ข้อดีของการใช้ CDN มีมากมายและรวมถึง:
  • ปรับปรุงประสิทธิภาพการดาวน์โหลด การใช้ประโยชน์จากทรัพยากรของ CDN ช่วยให้คุณสามารถกระจายโหลดประหยัดแบนด์วิธและเพิ่มประสิทธิภาพได้ CDN ที่ดีกว่าให้ความพร้อมใช้งานที่สูงขึ้นเวลาในการตอบสนองของเครือข่ายที่ต่ำลงและการสูญเสียแพ็กเก็ตลดลง นอกจากนี้ CDN จำนวนมากยังมีศูนย์ข้อมูลที่กระจายอยู่ทั่วโลกทำให้การดาวน์โหลดเกิดขึ้นจากเซิร์ฟเวอร์ที่อยู่ใกล้กับตำแหน่งของผู้ใช้มากขึ้น (ส่งผลให้เครือข่ายมีจำนวนน้อยลงและดาวน์โหลดได้เร็วขึ้น)
  • ดาวน์โหลดพร้อมกันมากขึ้น โดยทั่วไปเบราว์เซอร์จะ จำกัด จำนวนการเชื่อมต่อพร้อมกันไว้ที่โดเมนเดียวหลังจากนั้นการดาวน์โหลดเพิ่มเติมจะถูกบล็อกจนกว่าการดาวน์โหลดก่อนหน้านี้จะเสร็จสิ้น คุณมักจะเห็นขีด จำกัด นี้ในการดำเนินการเมื่อดาวน์โหลดไฟล์ขนาดใหญ่จำนวนมากจากไซต์เดียวกัน CDN เพิ่มเติมแต่ละรายการ (บนโดเมนอื่น) อนุญาตให้ดาวน์โหลดพร้อมกันเพิ่มเติมได้
  • การวิเคราะห์ขั้นสูง CDN เชิงพาณิชย์จำนวนมากมีรายงานการใช้งานที่สามารถเสริมการวิเคราะห์เว็บไซต์ของคุณเองและอาจให้จำนวนการดูและดาวน์โหลดวิดีโอที่ดีขึ้น GTmetrix ตัวอย่างเช่นมีเครื่องมือรายงานเว็บไซต์ที่ยอดเยี่ยมสำหรับการตรวจสอบและเพิ่มประสิทธิภาพแหล่งที่มาที่โหลดบนไซต์ของคุณ

เครื่องมือพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่

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

การเลือก JavaScript Mobile Web App Framework ที่เหมาะสม

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

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

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

ความแตกต่างที่สำคัญบางประการที่ควรพิจารณาเมื่อเปรียบเทียบ jQuery Mobile กับ Sencha Touch:

• มองและรู้สึก. โดยทั่วไปแล้วรูปลักษณ์ของแอพ Sencha Touch นั้นคมชัดและเหนือกว่าแอพมือถือ jQuery แต่สิ่งสำคัญคือต้องจำไว้ว่าปฏิกิริยาดังกล่าวมักจะมีความเป็นส่วนตัวสูง
• ความสามารถในการขยาย jQuery Mobile มีส่วนขยายของบุคคลที่สามจำนวนมากและได้รับการออกแบบมาโดยเนื้อแท้เพื่อให้สามารถขยายได้สูงในขณะที่ Sencha Touch เป็นเฟรมเวิร์ก 'ปิด' มากกว่า
• การสนับสนุนอุปกรณ์ ปัจจุบัน jQuery Mobile กำหนดเป้าหมายอุปกรณ์ที่มีขนาดใหญ่กว่า Sencha Touch
• HTML“ เทียบกับ” JavaScript jQuery ส่วนใหญ่เป็น HTML เป็นศูนย์กลาง (เช่นการขยายและจัดการ HTML ที่มีอยู่ใน JavaScript) ในขณะที่การเข้ารหัส Sencha Touch ใช้ JavaScript ทั้งหมด (นี่คือตัวอย่างโดยบังเอิญของชุดทักษะของทีมพัฒนาของคุณซึ่งเป็นสิ่งสำคัญที่ต้องพิจารณาเมื่อทำการเลือกเทคโนโลยีของคุณ)
• การอ้างอิงภายนอก jQuery mobile ต้องการ jQuery และ jQuery UI สำหรับการจัดการ DOM ในขณะที่ Sencha Touch ไม่มีการอ้างอิงภายนอก
• เส้นโค้งการเรียนรู้ นักพัฒนาส่วนใหญ่พบว่า jQuery ใช้เวลาในการเพิ่มความเร็วน้อยกว่า Sencha Touch ซึ่งอาจได้รับแรงหนุนจากนักพัฒนาเว็บจำนวนมากที่คุ้นเคยกับไลบรารี jQuery มาตรฐานอยู่แล้ว

กรอบงานที่ตอบสนองและแอปพลิเคชันเว็บบนมือถือ

เฟรมเวิร์กที่ตอบสนองได้เพิ่มขึ้นจำนวนมากขึ้นในช่วงไม่กี่ปีที่ผ่านมาโดยสองเฟรมที่ได้รับความนิยมมากที่สุดในปัจจุบัน Bootstrap และ รากฐาน . ในระยะสั้นกรอบตอบสนองช่วยลดความซับซ้อนและปรับปรุง การออกแบบ UI ที่ตอบสนองบนเว็บ และการนำไปใช้งานโดยสรุปเค้าโครงและกระบวนทัศน์ UI ที่พบบ่อยที่สุดไว้ในกรอบงานที่นำกลับมาใช้ใหม่ได้และได้รับการเพิ่มประสิทธิภาพ ส่วนใหญ่ใช้ CSS และ JavaScript เฟรมเวิร์กเหล่านี้ส่วนใหญ่เป็นโอเพ่นซอร์สดาวน์โหลดฟรีและปรับแต่งได้ง่าย หากคุณไม่มีข้อกำหนดที่แปลกประหลาดเป็นอย่างมากมีแนวโน้มว่าการใช้กรอบงานเหล่านี้จะช่วยลดระดับความพยายามในการออกแบบและใช้งานเว็บแอปพลิเคชันบนอุปกรณ์เคลื่อนที่ของคุณ

การตรวจสอบสองตัวเลือกชั้นนำ Bootstrap และ Foundation ข้อแตกต่างที่สำคัญบางประการที่ควรพิจารณา ได้แก่ :

• แพลตฟอร์มเป้าหมาย แม้ว่า Bootstrap จะรองรับอุปกรณ์มือถือแท็บเล็ตและเดสก์ท็อป แต่ก็มุ่งเน้นไปที่การใช้งานเดสก์ท็อปเป็นหลัก ในทางกลับกันมูลนิธิได้รับการออกแบบมาสำหรับขนาดหน้าจอและทุกประเภทเป็นหลัก
• ความเข้ากันได้ของเบราว์เซอร์ Bootstrap เข้ากันได้กับ IE7 หรือสูงกว่าในขณะที่ Foundation เข้ากันได้กับ IE9 หรือสูงกว่าเท่านั้น
• ความหลากหลายของเลย์เอาต์และส่วนประกอบ Bootstrap มีชุดองค์ประกอบ UI ที่ใหญ่กว่าที่ Foundation นำเสนอ
• ปรับขนาดอัตโนมัติ ด้วย Foundation กริดจะหดและยืดตามความสูงและความกว้างของเบราว์เซอร์ในปัจจุบันในขณะที่ Bootstrap รองรับเฉพาะชุดขนาดกริดที่กำหนดไว้ล่วงหน้าตามชุดขนาดหน้าจอมาตรฐาน

การแก้จุดบกพร่องและการทดสอบแอปเว็บบนอุปกรณ์เคลื่อนที่

การดีบักแอปพลิเคชันเว็บบนอุปกรณ์เคลื่อนที่อาจเป็นเรื่องยุ่งยากและค่อนข้างน่าหงุดหงิดโดยเฉพาะอย่างยิ่งหากคุณต้องการตรวจสอบอุปกรณ์ต่างๆเพื่อทดสอบหรือติดตั้ง SDK สำหรับการจำลองแพลตฟอร์มไคลเอนต์เป้าหมาย (โดยทั่วไปไม่สมบูรณ์)

ในบริบทนี้ข้อได้เปรียบที่ชัดเจนอย่างหนึ่งของการพัฒนาเว็บบนอุปกรณ์เคลื่อนที่ (เมื่อเทียบกับการพัฒนาแอปเนทีฟ) คือคุณสามารถใช้เครื่องมือสำหรับนักพัฒนาที่ใช้เบราว์เซอร์มาตรฐานเพื่อแก้ไขข้อบกพร่องของแอปพลิเคชันของคุณ จากความชอบส่วนตัวของฉันสำหรับการดีบักระยะไกลสิ่งที่ฉันแนะนำในบทช่วยสอนการพัฒนาแอปนี้คือ Chrome พร้อม DevTools ตัวเลือกมาตรฐานอื่น ๆ ได้แก่ Firefox พร้อม Firebug หรือ Opera’s Dragonfly tools

มอนติคาร์โลจำลองสำหรับหุ่น

เหตุผลบางประการที่ฉันชอบ Chrome พร้อม DevTools รวม:

• โปรแกรมจำลองอุปกรณ์เคลื่อนที่ใน DevTools ของ Chrome นี่อาจเป็นเหตุผลเดียวที่เพียงพอในการเลือก Chrome สำหรับการแก้ไขข้อบกพร่องของเว็บแอปบนอุปกรณ์เคลื่อนที่ คุณสมบัติหลัก ได้แก่ การจำลองเหตุการณ์การสัมผัสการปลอมแปลงตัวแทนผู้ใช้การควบคุมแบนด์วิดท์เครือข่ายการแทนที่ตำแหน่งทางภูมิศาสตร์การแทนที่การวางแนวอุปกรณ์และการจำลองประเภทสื่อ CSS
• ตัวแก้ไขแบบโต้ตอบ ความสามารถในการแก้ไข JavaScript หรือ CSS ได้ทันที
• ดีบักเกอร์ JavaScript ที่เหนือกว่า อนุญาตให้ใช้เบรกพอยต์ DOM และให้ความสามารถในการกำหนดโปรไฟล์เวลาเรียกใช้โค้ด JavaScript ของคุณ
• ผู้ดู JSON และ XML ในตัว หลีกเลี่ยงความจำเป็นในการใช้ปลั๊กอินเพื่อตรวจสอบการตอบสนองของเซิร์ฟเวอร์
• รองรับโปรโตคอล Android Debug Bridge (ADB) โดยตรงผ่าน USB อำนวยความสะดวกในการสร้างอินสแตนซ์ของเซสชันการดีบักระยะไกลได้ง่าย ( ที่นี่ เป็นบทช่วยสอนที่ดีโดย Google เกี่ยวกับวิธีเริ่มการดีบักจากระยะไกลใน Chrome)
• การตรวจสอบทรัพยากรแบบไดนามิก ช่วยให้คุณตรวจสอบแหล่งข้อมูลในเครื่องของแอปรวมถึงฐานข้อมูล IndexedDB หรือ Web SQL พื้นที่เก็บข้อมูลในเครื่องและเซสชันคุกกี้และทรัพยากร Application Cache คุณยังสามารถตรวจสอบทรัพยากรภาพของแอปพลิเคชันของคุณได้อย่างรวดเร็วรวมถึงรูปภาพแบบอักษรและสไตล์ชีต

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

สรุป

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

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

ที่เกี่ยวข้อง: ทำให้แอปของคุณมีกำไร - ใช้ประโยชน์จาก Mobile Analytics

ทำความเข้าใจพื้นฐาน

เว็บแอปบนอุปกรณ์เคลื่อนที่คืออะไร

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

แอพเนทีฟคืออะไร?

แอปพลิเคชันแบบเนทีฟคือแอปพลิเคชันที่เขียนขึ้นสำหรับแพลตฟอร์มเฉพาะโดยใช้ API เฉพาะแพลตฟอร์ม

แอปไฮบริดคืออะไร?

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

ความแตกต่างทางเทคนิคระหว่างแอปเนทีฟและแอปไฮบริดคืออะไร

แอปที่มาพร้อมเครื่องเขียนด้วยภาษาเฉพาะของแพลตฟอร์มโดยใช้ API ของแพลตฟอร์มเช่น Java หรือ Kotlin สำหรับ Android และ Objective C หรือ Swift สำหรับ iOS แอปไฮบริดเขียนโดยใช้เทคโนโลยีเว็บเช่น HTML5 / CSS และ Javascript

แอปเนทีฟกับเว็บแอป: อะไรคือผลกระทบต่อประสบการณ์ของผู้ใช้?

แอปพลิเคชันเว็บบนมือถือคือเว็บไซต์ที่ปรับให้เหมาะกับการใช้งานบนมือถือ หากทำได้ดีประสบการณ์ก็น่าทึ่งเหมือนแอปพลิเคชันเนทีฟหรือไฮบริด ตัวอย่างเช่นดู https://paperplanes.world/

เหตุใดแอปที่มาพร้อมเครื่องจึงให้ประสิทธิภาพที่เหนือกว่า

แอปไฮบริดมักจะมีปัญหาและทำงานช้ากว่าแอปเนทีฟเนื่องจากแอปที่มาพร้อมเครื่องไม่ต้องใช้ห่วงและเลเยอร์ของคอนเทนเนอร์เพื่อให้ทำงานได้ แอปที่มาพร้อมเครื่องมีประสิทธิภาพมากกว่า React Native สามารถเปลี่ยนเกมได้