fbpx

Web Application ช่วยประหยัดหน่วยความจำด้วยหรือ

Web Application ช่วยประหยัดหน่วยความจำด้วยหรือ

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

Web Application คืออะไร

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

ตัวอย่าง Web App ที่มีชื่อเสียงที่ไม่ว่าใครจะต้องรู้จัก

ตัวอย่าง Web Application
  • เว็บแอปฯ สำรองข้อมูล
    • Google Drive
    • OneDrive
  • เว็บแอปฯ สร้างเอกสารออนไลน์
    • Google Docs
    • Google Sheet
    • Google Slides
ตัวอย่าง Web Application
ตัวอย่าง Web Application
  • เว็บแอปฯ ปรับแต่งภาพ
    • Canva
    • Squoosh
  • เว็บแอปฯ ที่ใช้ดู VDO Streaming
    • Youtube
    • Netflix
ตัวอย่าง Web Application
ตัวอย่าง Web Application
  • เว็บแอปฯ ที่ใช้ติดต่อสื่อสารกัน
    • Discord
    • Facebook
    • Instagram
  • เว็บแอปฯ แปลภาษา
    • Translate.Google.com
ตัวอย่าง Web Application
ตัวอย่าง Web Application
  • เว็บแอปฯ เล่นเกม
    • เกมบนเว็บเบราว์เซอร์ เช่น Counter-Strike, Slither.io และอีกหลายๆเกมซึ่งสามารถเล่นผ่านได้บน browser

ความแตกต่างระหว่าง Website กับ Web App

ด้านการใช้งาน

  • Website: คือหน้าเพจที่ถูกจัดทำขึ้นเพื่อนำเสนอข้อมูล สารสนเทศ และมีการเชื่อมโยงข้อมูลไปยังเว็บเพจย่อยๆ ต่างๆ ตามแต่รูปแบบของเว็บไซต์นั้นได้กำหนดและตั้งค่าไว้ โดยเน้นให้ผู้คนเข้ามาดูเป็นหลัก
  • Web App: ทำหน้าที่คล้ายกับเว็บไซต์ แต่จะสามารถเป็นแอปพลิเคชั่นได้ด้วย คือเน้นให้ผู้คนเข้ามา “ใช้งาน” มากกว่าดู เช่นเว็บแอปฯสำหรับคิดเลข เว็บแอปฯสำหรับจับเวลา เว็บแอปฯสำหรับแปลภาษา โดยส่วนมากแล้วจะมีความสะอาด รวดเร็ว และสบายตากว่าเว็บไซต์ปกติ เนื่องจากเน้นใช้งานในเรื่องใดเรื่องหนึ่งเป็นหลัก 

หน้าตาภายนอก

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

การทำงานเบื้องหลัง

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

ลักษณะการทำงาน Web App

การทำงานของเว็บแอปฯ นั้นโปรแกรมส่วนหนึ่งจะวางตัวอยู่บน Rendering Engine หรือ ตัววาดหน้าเว็บ  ซึ่งตัว Rendering Engine จะทำหน้าที่หลักๆ คือนำเอาชุดคำสั่งหรือรูปแบบโครงสร้างข้อมูลที่ใช้ในการแสดงผล  นำมาแสดงผลบนพื้นที่ส่วนหนึ่งในจอภาพ

โปรแกรมส่วนที่วางตัวอยู่บน Rendering Engine จะทำหน้าที่หลักๆ คือการเปลี่ยนแปลงแก้ไขสิ่งที่แสดงผล จัดการตรวจสอบข้อมูลที่รับเข้ามาเบื้องต้นและการประมวลบางส่วนแต่ส่วนการทำงานหลักๆ

โดยฝั่งเซิร์ฟเวอร์จะประกอบไปด้วยเว็บเซิร์ฟเวอร์ซึ่งทำหน้าที่เชื่อมต่อกับ Client ตาม Protocols  HTTP/HTTPS  โดยนอกจาก Web Server จะทำหน้าที่ส่งไฟล์ที่เกี่ยวเนื่องกับการแสดงผลตามมาตรฐาน HTTP ตามปกติทั่วไปแล้ว Web Server จะมีส่วนประมวลผลซึ่งอาจจะเป็นตัวแปลภาษา เช่น Script Engine ของภาษา PHP  หรืออาจจะมีการติดตั้ง .NET Framework ซึ่งมีส่วนแปลภาษา CLR (Common Language Runtime) ที่ใช้แปลภาษา Intermediate จากโค้ดที่เขียนด้วย VB.NET หรือ C#.NET  หรืออาจจะเป็น J2EE  ที่มีส่วนแปลไบต์โค้ดของคลาสที่ได้จากโปรแกรมภาษา JAVA เป็นต้น

อธิบายสั้นๆก็คือ

ผู้ใช้งานจะใช้งาน Web Browser เพื่อทำการใช้งาน Web App ซึ่งตัวเว็บแอปฯ จะทำการดึงข้อมูลที่จำเป็นต้องใช้งานผ่าน Web Server และทาง Web server ก็อาจมีการดึงข้อมูลที่จำเป็น เช่นข้อมูลผู้ใช้ข้อมูลลูกค้าผ่าน Database อีกทีหนึ่ง

Progressive Web Application (PWA)

Progressive web application (PWA) คือการทำเว็บไซต์ธรรมดา ให้ใกล้เคียงกับแอปพลิเคชั่นที่ดาวน์โหลดลงเครื่องมากที่สุด ทั้งในแง่รูปลักษณ์ ความเร็ว ไปจนถึงการใช้งาน สมกับคำเรียกที่ว่า Progressive (ก้าวหน้า) นั่นเอง

โดย PWA จะมีการปรับการแสดงผลให้เหมาะกับอุปกรณ์ที่ใช้โดยเฉพาะ ไม่ว่าจะเป็น Desktop Mobile หรือ Tablet 

Google Developer ได้ระบุว่า PWA ที่แท้จริงควรมีคุณสมบัติ 3 อย่างคือ

  1. Reliable: มีความน่าเชื่อถือ สามารถใช้งานได้ตลอดแม้ว่าการทำงานของเครือข่ายจะไม่เสถียร
  2. Fast: ต้องเร็ว ไม่ว่าจะมีอนิเมชั่นสวยหรือสิ่งใดก็แล้วแต่ การตอบสนองต่อผู้ใช้สำคัญที่สุด
  3. Engaging: ผู้ใช้สามารถใช้งานมันไม่ต่างกับแอปพลิเคชั่นปกติ 

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

กลับกัน ผู้คนยังคงนิยมท่องเที่ยวในเว็บไซต์ต่างๆ ไม่ว่าจะเว็บประจำอย่าง Google หรือ Facebook และยังสรรหาเว็บไซต์ใหม่ๆ ที่น่าสนใจอยู่เรื่อยๆ Progressive Web App จึงกลายเป็นสิ่งสำคัญอย่างยิ่งในปัจจุบัน

Learn more

ความแตกต่างระหว่าง Progressive Web Application กับ Web Application ทั่วไป

คงไม่แปลกเท่าไหร่หากจะบอกว่ามองผ่านๆ แล้ว Progressive Web Application จะคล้ายคลึงกับ Web Application ทั่วไปจริงๆ แต่หากลงลึกในรายละเอียดจะพบว่ามันมีความต่างกันพอสมควรครับ ซึ่งรายละเอียดหลักๆ คือ

  • เปิดได้แม้ไม่มีอินเทอร์เน็ต PWA จะทำการเก็บข้อมูลบางส่วนของผู้ใช้เอาไว้ในเครื่อง เมื่อมีการเปิดแอปในที่ๆ ไม่มีอินเทอร์เน็ตมันก็จะโหลดขึ้นมา ทำให้สามารถทำงานที่ไหนก็ได้ แต่อาจจะมีข้อจำกัด
  • มีความรวดเร็ว เพราะมีการโหลดข้อมูลมาใช้ จึงทำให้มีการทำงานรวดเร็วกว่า เว็บแอปฯ ปกติ จนแทบสังเกตไม่ได้ว่ามีการโหลดเกิดขึ้น
  • สามารถแสดงผลได้แบบเต็มจอ ไม่มีหน้าจอส่วนควบคุมของเบราเซอร์มาครอบไว้ให้ดูขัดตา การทำงานจะเหมือนการใช้แอพเต็มจริงๆ
  • มีการทำงานภายนอกเหมือนแอป เช่น สามารถสร้างทางลัดไว้ด้านนอกเพื่อเปิดเข้าได้ทันที ส่ง Notification ได้แม้ว่าจะไม่ได้เปิดแอปพลิเคชั่น มีการอัพเดทตลอดเวลาเพื่อลดความผิดพลาด

ตัวอย่าง Progressive Web App “Learn more”

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

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