Skip to main content
0

สารจากนักเขียน

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

ที่มา : https://1stcraft.com/what-is-progressive-web-application/

รู้จัก Progressive Web Application

Progressive Web Application (PWA) คือการทำเว็บไซต์ธรรมดาให้ใกล้เคียงกับแอปพลิเคชันที่ดาวน์โหลดลงเครื่องมากที่สุด ทั้งในแง่รูปลักษณ์ ความเร็ว ไปจนถึงการใช้งาน สมกับคำเรียกที่ว่า “Progressive” (ก้าวหน้า) นั่นเอง
โดย Progressive Web Application จะมีการปรับการแสดงผลให้เหมาะกับอุปกรณ์ที่ใช้โดยเฉพาะ ไม่ว่าจะเป็น desktop, mobile หรือ tablet

คุณสมบัติของ Progressive Web Application

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

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

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

Progressive Web Application มีความแตกต่างที่สำคัญจาก Web Application ทั่วไปตรงที่:

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

ข้อดีของ Progressive Web Application

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

บทความนี้จะสอนให้คุณเข้าใจถึงการใช้ Service Worker เพื่อสร้าง Progressive Web App (PWA) และมีการนำเสนอตัวอย่างโค้ดเพื่อให้เข้าใจได้ง่ายขึ้น

1. Service Worker เป็นอะไร?

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

2. การลงทะเบียน Service Worker

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


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then((registration) => {
      console.log('Service Worker registered:', registration);
    })
    .catch((error) => {
      console.log('Error registering Service Worker:', error);
    });
}

3. การจัดเก็บแคช

Service Worker มีความสามารถในการจัดเก็บข้อมูลไว้ในหน่วยความจำของเครื่องผู้ใช้ เราสามารถทำการจัดเก็บแคชได้ดังนี้:

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/images/logo.png'
      ]);
    })
  );
});

Service Worker มีความสามารถในการจัดเก็บข้อมูลไว้ในหน่วยความจำของเครื่องผู้ใช้ เราสามารถทำการจัดเก็บแคชได้ดังนี้:

4. การรองรับการร้องขอ Fetch

เมื่อมีการร้องขอข้อมูลจากแอปพลิเคชัน เราสามารถให้ Service Worker จัดการการร้องขอนั้นๆ ได้ โดยการใช้เหตุการณ์ fetch:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

5. การทดสอบและติดตั้งแอป

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

สรุป

การใช้ Service Worker เพื่อสร้าง Progressive Web App (PWA) มีความสำคัญมากในการพัฒนาแอปพลิเคชันที่มีประสิทธิภาพและสามารถทำงานแบบออฟไลน์ได้ การทำงานกับ Service Worker นี้ช่วยให้ผู้พัฒนาสามารถจัดการและปรับปรุงประสิทธิภาพของแอป PWA ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น ถึงแม้ว่าการใช้ Service Worker นั้นจะมีความซับซ้อนบ้าง แต่ผลลัพธ์ที่ได้จะเป็นที่น่าพึงพอใจและมีประสิทธิภาพอย่างแท้จริง

รติกร ศรอำพล

Author รติกร ศรอำพล

More posts by รติกร ศรอำพล
Close Menu

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า