การสร้างโหมด Standalone

การสร้างโหมด Standalone

โหมด Standalone

   ตอนนี้เราปรับรูปแบบแอปพลิเคชั่นเล็กน้อย ให้ดูคล้าย Native ด้วยการสร้างโหมด Standalone ข้อมูลที่จะตามมาเกือบทั้งหมด เป็นเฉพาะของ Mobile Safari (iOS) ถึงแม้ว่าบางส่วนจะใช้กับดีฟอลต์เบราเซอร์ Android ได้เช่นกัน งานแรกของเราคือ ทำให้สามารถดูได้เต็มจอภาพ ทำได้โดยการใช้ meta tag ใน head ของหน้าแว็บแบบเดียวกับที่เรากำหนดใน Viewport

ด้วยการกำหนด apple-prefix meta tag เป็น yes ทำให้แอปพลิเคชั่นสามารถทำงานใน Mobile Safari โดยไม่ใช้เบราเซอร์ Chrome เมื่อผู้ใช้เก็บมันไว้ที่หน้าหลัก (Home Screen) สิ่งสำคัญที่ควรจำคือ เมื่อเราทำงานในโหมดนี้ แอปพลิเคชั่นของเราจะทำงานคล้ายกับแอปพลิเคชั่น Standalone อันหนึ่งอย่างเต็มที่ โดยลิงก์ที่จะไปยังหน้าอื่นๆ จะถูกเปิดในแอปพลิเคชั่น Mobile Safari ซึ่งจะมี meta tag อีกอันที่ทำงานร่วมกับโค้ดเหล่านี้

นี่คือพร็อปเพอร์ตี้เฉพาะของ Apple/iOS ที่ให้เราสามารถกำหนดสไตล์ของสเตตัสบาร์ (Status Bar) ที่ต้องการได้ ในโค้ดเล็กๆ ข้างบนนี้ เรากำหนดสเตตัสบาร์ให้มีสีดำ และมีเนื้อความใต้สเตตัสบาร์ถ้า content มีค่าเป็น default แล้ว สเตตัสบาร์จะเป็นสีเทาจากดีฟอลต์ที่เรามักพบใน Mobile Safari แต่ถ้ากำหนดเป็น black-translucent แล้ว สเตตัสบาร์จะเป็นสีดำที่ค่อนข้างโปร่งใส โดยมีเนื้อหาปรากฏในจอภาพทั้งหมด แต่จะดูไม่ค่อยชัดเจนนักนั่นเพราะสเตตัสบาร์

เราได้เพิ่มโค้ดที่ทำให้แอปพลิเคชั่นทำงานได้คล้ายกับแอปพลิเคชั่น Standalone เราสามารถเพิ่มข้อกำหนดในสไตล์ชีตที่ใช้เฉพาะแอปพลิเคชั่นเวอร์ชั่นนี้ อย่างแรก คือ เราต้องการที่จะเชื่อมไปยัง CSS ของเรา แต่ไม่ดีนักที่ Modernizr ไม่ได้ตรวจจับการใช้งานแบบ Standalone โดย navigator ที่เป็นออบเจ็กต์ JavaScript จะมีพร็อปเพอร์ตี้ standalone ที่มีค่าเป็น true เมื่อเบราเซอร์อยู่ในโหมด Standalone

นี่คือชิ้นแรกของปริศนา ชิ้นที่สองก็คือ Modernizr ที่จะทำให้เราสามารถเพิ่มเติมการทดสอบใหม่ๆ ได้ ทำได้โดยใช้เมธอด addTest () ในออบเจ็กต์ Modernizr ใน addTest () มีการใช้สองค่า คือค่า string ที่เป็นชื่อของการทดสอบ (ซึ่งจะเป็น class ที่ใส่ในอิลิเมนต์ html เมื่อทำการทดสอบ) และฟังก์ชั่นที่คืนค่า Boolean (true หรือ false) เพื่อบอกถึงการทดสอบว่าผ่านหรือไม่ผ่าน ในกรณีนี้เราคืนค่าของ navigator.standalone:

แน่นอนถึงแม้ว่าเราไม่ได้ใช้ Modernizr เราก็ยังคงใช้ค่าของ navigator.standalone เพื่อให้ได้ค่าเดียวกัน

การกำหนดแอตทริบิวต์ class ของอิลิเมนต์ html เหมือนเช่นเคย เพิ่มเติมช่องว่างและคำ standalone สำหรับทั้งสองอย่างนั้นเมื่อการทดสอบจบลงเราจะมี standalone เป็นตัวเชื่อม เพื่อให้สามารถเปลี่ยนโครงร่างของแอปพลิเคชั่นได้ จากการออกแบบที่เราทำไว้ในบทที่แล้ว เราจะย้ายแท็บบาร์จากด้านบนของอินเตอร์เฟซไปยังด้านล่าง จากที่กล่าวมาก่อนหน้านี้ว่าเราไม่สามารถใช้ position: fixed เพื่อตรึงแท็บบาร์ให้ติดอยู่ในอินเตอร์เฟซได้ แต่เรากำลังจะใช้ JavaScript แก้ปัญหาเหล่านี้ และจะกลับมาดูในเรื่องนี้ในภายหลัง ในขณะนี้เราทำเพื่อใช้ในการทดสอบ โดยจะใช้ position: absolute และ bottom: 0 เพื่อแก้ปัญหาชั่วคราวในการวางโครงส่วนที่เหลือนั้นเป็นไปอย่างถูกต้อง

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

ไม่จำเป็นต้องเปลี่ยน gradient หลักในแท็บบาร์ แสงยังคงมาจากส่วนบนแม้แท็บบาร์จะอยู่ที่ส่วนล่างอย่างไรก็ตาม สำหรับสองรายการใจ Navigation คือ สถานที่พบดารา (Spots) และดารา (Star) เรากำลังจะกลับด้านของ gradient กับสถานะที่ถูกเลือก ดังนั้นมันจะเกลี่ยสีจากการมีสีจางๆ ไปสู่การทึบแสง

เราเพิ่งเปลี่ยนค่า alpha ของ gradient ดังนั้นมันจะมีสีจางลงแทนที่จะหายไป จากนั้นก็ปรับแสงเงาที่ใส่ไว้ในรายการที่ถูกเลือก เราจะข้ามเรื่องการเปลี่ยนแปลงทุกอย่างที่ต้องทำเพื่อให้เกิด Transition กับแอปพลิเคชั่น Standalone สำหรับหลักการต่างๆ เป็นไปตามที่เราทำไว้ข้างบนก็คือ การใช้ .standalone CSS selector เพื่อยกเลิกกฎเกณฑ์ทั่วไป


Copyright © อุปกรณ์โมบายแอพพลิเคชั่น All rights reserved.