To make your PWA load the cached version while offline and the most up-to-date data from your server when a network connection is available, you can implement a strategy called "Network First, Cache fallback" using the Service Worker.

Here are the general steps to implement this strategy:

1. In your Service Worker, intercept all network requests using the `fetch` event.
2. Check if there is an available network connection.
3. If there is a network connection, make a fetch request to the server and return the response to the browser.
4. If there is no network connection, attempt to retrieve the requested resource from the cache. If the resource is not found in the cache, return a fallback response.
5. If the resource is found in the cache, return the cached response to the browser.

Here's a sample code for implementing the "Network First, Cache fallback" strategy in the Service Worker:

```csharp
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // Clone the response to store it in the cache
        const clonedResponse = response.clone();
        caches.open('my-cache')
          .then(cache => cache.put(event.request, clonedResponse));
        // Return the response to the browser
        return response;
      })
      .catch(() => {
        // If there's no network connection, try to retrieve the resource from the cache
        return caches.match(event.request)
          .then(cachedResponse => {
            if (cachedResponse) {
              // If the resource is found in the cache, return it to the browser
              return cachedResponse;
            } else {
              // If the resource is not found in the cache, return a fallback response
              return new Response('You are offline.');
            }
          });
      })
  );
});
```

In this code, the `fetch` event is intercepted, and a `fetch` request is made to the server. If the `fetch` request succeeds, the response is stored in the cache, and the response is returned to the browser. If the `fetch` request fails (i.e., there is no network connection), the Service Worker attempts to retrieve the resource from the cache. If the resource is found in the cache, it is returned to the browser. If the resource is not found in the cache, a fallback response is returned to the browser.

This way, when the device is offline, the PWA will load the cached version of the content, and when the device is online, the PWA will load the most up-to-date data from the server.
หากต้องการให้ PWA โหลดเวอร์ชันแคชขณะออฟไลน์และข้อมูลล่าสุดจากเซิร์ฟเวอร์ของคุณเมื่อมีการเชื่อมต่อเครือข่าย คุณสามารถใช้กลยุทธ์ที่เรียกว่า "Network First, Cache fallback" โดยใช้ Service Worker ต่อไปนี้เป็นขั้นตอนทั่วไปในการใช้กลยุทธ์นี้: 1. ใน Service Worker ของคุณ ให้สกัดกั้นคำขอเครือข่ายทั้งหมดโดยใช้เหตุการณ์ `ดึงข้อมูล` 2. ตรวจสอบว่ามีการเชื่อมต่อเครือข่ายที่พร้อมใช้งานหรือไม่ 3. หากมีการเชื่อมต่อเครือข่าย ให้ส่งคำขอดึงข้อมูลไปยังเซิร์ฟเวอร์และส่งคืนการตอบกลับไปยังเบราว์เซอร์ 4. หากไม่มีการเชื่อมต่อเครือข่าย ให้พยายามดึงทรัพยากรที่ร้องขอจากแคช หากไม่พบทรัพยากรในแคช ให้ส่งคืนการตอบกลับทางเลือก 5. หากพบทรัพยากรในแคช ให้ส่งคืนการตอบสนองที่แคชไว้ไปยังเบราว์เซอร์ ต่อไปนี้เป็นโค้ดตัวอย่างสำหรับการนำกลยุทธ์ "Network First, Cache fallback" ไปใช้งานใน Service Worker: ```csharp self.addEventListener('fetch', event => { event.respondWith( fetch(event.request) .then(response) => { // โคลนการตอบสนองเพื่อเก็บไว้ในแคช const clonedResponse = response.clone(); caches.open('my-cache') .then(cache => cache.put(event.request, clonedResponse)) ; // ส่งคืนการตอบกลับไปยังการตอบกลับของเบราว์เซอร์ }) .catch(() => { // หากไม่มีการเชื่อมต่อเครือข่าย ให้ลองดึงทรัพยากรจากแคช return caches.match(event.request) .then( cachedResponse => { if (cachedResponse) { // หากพบทรัพยากรในแคช ให้ส่งคืนไปยังเบราว์เซอร์ส่งคืน cachedResponse; } else { // หากไม่พบทรัพยากรในแคช ให้ส่งคืนการตอบกลับทางเลือก คืนการตอบกลับใหม่ ('คุณออฟไลน์อยู่'); } }); }) ); }); ``` ในโค้ดนี้ เหตุการณ์ `ดึงข้อมูล` จะถูกสกัดกั้น และมีการร้องขอ `ดึงข้อมูล` ไปยังเซิร์ฟเวอร์ หากคำขอ "ดึงข้อมูล" สำเร็จ การตอบสนองจะถูกจัดเก็บไว้ในแคช และการตอบสนองจะถูกส่งกลับไปยังเบราว์เซอร์ หากคำขอ 'ดึงข้อมูล' ล้มเหลว (เช่น ไม่มีการเชื่อมต่อเครือข่าย) พนักงานบริการจะพยายามดึงทรัพยากรจากแคช หากพบทรัพยากรในแคช ทรัพยากรนั้นจะถูกส่งกลับไปยังเบราว์เซอร์ หากไม่พบทรัพยากรในแคช การตอบสนองทางเลือกจะถูกส่งกลับไปยังเบราว์เซอร์ ด้วยวิธีนี้ เมื่ออุปกรณ์ออฟไลน์ PWA จะโหลดเนื้อหาเวอร์ชันแคช และเมื่ออุปกรณ์ออนไลน์ PWA จะโหลดข้อมูลล่าสุดจากเซิร์ฟเวอร์
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence