การจัดทำดัชนีหน้าที่สามารถใช้งานแบบออฟไลน์ด้วย Content Indexing API

ช่วยให้ Service Worker แจ้งเบราว์เซอร์ว่าหน้าเว็บใดทำงานแบบออฟไลน์ได้

Jeff Posnick

Contentการจัดทำดัชนี API คืออะไร

การใช้ Progressive Web App หมายถึงการมีสิทธิ์เข้าถึงข้อมูลที่ผู้คนสนใจ เช่น รูปภาพ วิดีโอ บทความ และอื่นๆ โดยไม่คำนึงถึงสถานะปัจจุบันของการเชื่อมต่อเครือข่าย เทคโนโลยีอย่าง Service Worker, Cache Storage API และ IndexedDB ช่วยให้คุณมีองค์ประกอบพื้นฐานสำหรับการจัดเก็บและแสดงข้อมูลเมื่อผู้ใช้มีปฏิสัมพันธ์กับ PWA โดยตรง แต่การสร้าง PWA คุณภาพสูงที่เน้นช่องทางออฟไลน์เป็นเพียงแค่ส่วนหนึ่งเท่านั้น หากลูกค้าไม่ทราบว่าเนื้อหาของเว็บแอปใช้งานได้ในขณะออฟไลน์ ก็จะไม่ได้รับประโยชน์อย่างเต็มที่จากงานที่คุณทำไว้ใช้งานฟังก์ชันดังกล่าว

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

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

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

นอกจากนี้ Chrome ยังแนะนำเนื้อหาเชิงรุกเมื่อตรวจพบว่าผู้ใช้ออฟไลน์อยู่ได้ด้วย

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

ดูของจริง

วิธีที่ดีที่สุดในการทำความเข้าใจ Contentการจัดทำดัชนี API คือการทดลองใช้แอปพลิเคชันตัวอย่าง

  1. ตรวจสอบว่าคุณใช้เบราว์เซอร์และแพลตฟอร์มที่รองรับ ปัจจุบันจำกัดไว้สำหรับ Chrome 84 ขึ้นไปใน Android ไปที่ about://version เพื่อดูว่า คุณใช้ Chrome เวอร์ชันใดอยู่
  2. ไปที่ https://contentindex.dev
  3. คลิกปุ่ม + ถัดจากตัวเลือกอย่างน้อย 1 รายการ
  4. (ไม่บังคับ) ปิดการเชื่อมต่อ Wi-Fi และอินเทอร์เน็ตมือถือของอุปกรณ์ หรือเปิดใช้โหมดบนเครื่องบินเพื่อจำลองการใช้งานแบบออฟไลน์
  5. เลือกการดาวน์โหลดจากเมนูของ Chrome และสลับไปที่แท็บบทความสำหรับคุณ
  6. เรียกดูเนื้อหาที่คุณบันทึกไว้ก่อนหน้านี้

คุณดูแหล่งที่มาของแอปพลิเคชันตัวอย่างได้ใน GitHub

แอปพลิเคชันตัวอย่างอีกรายการคือ Scrapbook PWA แสดงให้เห็นถึงการใช้งาน API การจัดทำดัชนีเนื้อหากับ Web Share Target API โค้ดแสดงเทคนิคในการทำให้ Contentการจัดทำดัชนี API ซิงค์กับรายการที่เว็บแอปจัดเก็บไว้โดยใช้ Cache Storage API

การใช้ API

หากต้องการใช้ API แอปของคุณต้องมี Service Worker และ URL ที่ไปยังส่วนต่างๆ ได้แบบออฟไลน์ หากเว็บแอปของคุณยังไม่มี Service Worker ไลบรารี Workbox จะช่วยให้การสร้างไลบรารีดังกล่าวง่ายขึ้น

URL ประเภทใดที่สามารถจัดทำดัชนีว่าสามารถใช้งานแบบออฟไลน์ได้

API รองรับการจัดทำดัชนี URL ที่สอดคล้องกับเอกสาร HTML เช่น URL สำหรับไฟล์สื่อที่แคชไว้จะจัดทำดัชนีโดยตรงไม่ได้ แต่คุณต้องระบุ URL สำหรับหน้าที่แสดงสื่อซึ่งทำงานได้แบบออฟไลน์

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

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

ภาพรวม

Contentการจัดทำดัชนี API รองรับการดำเนินการ 3 อย่าง ได้แก่ การเพิ่ม การแสดง และการนำข้อมูลเมตาออก วิธีการเหล่านี้จะแสดงจากพร็อพเพอร์ตี้ใหม่ index ซึ่งเพิ่มไปยังอินเทอร์เฟซ ServiceWorkerRegistration

ขั้นตอนแรกในการจัดทำดัชนีเนื้อหาคือการรับการอ้างอิงไปยัง ServiceWorkerRegistration ปัจจุบัน การใช้ navigator.serviceWorker.ready เป็นวิธีที่ดีที่สุด

const registration = await navigator.serviceWorker.ready;

// Remember to feature-detect before using the API:
if ('index' in registration) {
  // Your Content Indexing API code goes here!
}

หากคุณเรียกใช้ Contentการจัดทำดัชนี API จากภายใน Service Worker แทนที่จะดูในหน้าเว็บ คุณจะอ้างอิง ServiceWorkerRegistration ได้โดยตรงผ่านทาง registration การดำเนินการนี้จะมีการกำหนดไว้แล้ว เป็นส่วนหนึ่งของ ServiceWorkerGlobalScope.

กำลังเพิ่มลงในดัชนี

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

await registration.index.add({
  // Required; set to something unique within your web app.
  id: 'article-123',

  // Required; url needs to be an offline-capable HTML page.
  url: '/articles/123',

  // Required; used in user-visible lists of content.
  title: 'Article title',

  // Required; used in user-visible lists of content.
  description: 'Amazing article about things!',

  // Required; used in user-visible lists of content.
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],

  // Optional; valid categories are currently:
  // 'homepage', 'article', 'video', 'audio', or '' (default).
  category: 'article',
});

การเพิ่มรายการจะส่งผลต่อดัชนีเนื้อหาเท่านั้น โดยไม่ได้เพิ่มสิ่งใดลงในแคช

กรณีขอบ: เรียกใช้ add() จากบริบท window หากไอคอนต้องใช้เครื่องจัดการ fetch

เมื่อคุณเรียกใช้ add() Chrome จะขอ URL ของแต่ละไอคอนเพื่อดูแลให้มีสำเนาของไอคอนสำหรับใช้เมื่อแสดงรายการเนื้อหาที่จัดทำดัชนี

  • หากคุณเรียกใช้ add() จากบริบท window (กล่าวคือ จากหน้าเว็บ) คำขอนี้จะทริกเกอร์เหตุการณ์ fetch ในโปรแกรมทำงานของบริการ

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

แสดงรายการเนื้อหาของดัชนี

เมธอด getAll() จะแสดงคำสัญญาสำหรับรายการรายการที่จัดทำดัชนีและข้อมูลเมตาที่ทำซ้ำได้ รายการที่แสดงผลจะมีข้อมูลทั้งหมดที่บันทึกไว้ด้วย add()

const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

การนำรายการออกจากดัชนี

หากต้องการนำรายการออกจากดัชนี ให้เรียก delete() พร้อม id ของรายการที่จะนำออก ดังนี้

await registration.index.delete('article-123');

การเรียกใช้ delete() จะมีผลต่อดัชนีเท่านั้น แต่จะไม่ลบข้อมูลใดๆ จากแคช

การจัดการกับการลบกิจกรรมของผู้ใช้

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

รายการในเมนู "ลบ"

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

คุณไม่จำเป็นต้องเรียกใช้ registration.index.delete() ภายในตัวแฮนเดิล contentdelete หากเหตุการณ์เริ่มทำงานแล้ว แสดงว่าเบราว์เซอร์ได้ดำเนินการลบดัชนีที่เกี่ยวข้องแล้ว

self.addEventListener('contentdelete', (event) => {
  // event.id will correspond to the id value used
  // when the indexed content was added.
  // Use that value to determine what content, if any,
  // to delete from wherever your app stores it—usually
  // the Cache Storage API or perhaps IndexedDB.
});

ความคิดเห็นเกี่ยวกับการออกแบบ API

มีบางอย่างเกี่ยวกับ API ที่ผิดปกติหรือไม่ทำงานตามที่คาดไว้ไหม หรือขาดส่วนใดที่คุณจำเป็นต้องมีเพื่อนำความคิดไปปฏิบัติ

โปรดแจ้งปัญหาในที่เก็บ GitHub สำหรับอธิบายเนื้อหา หรือแสดงความคิดเห็นเกี่ยวกับปัญหาที่มีอยู่

พบปัญหาในการติดตั้งใช้งานใช่ไหม

คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่

รายงานข้อบกพร่องที่ https://new.crbug.com โดยระบุรายละเอียดให้มากที่สุดเท่าที่จะทำได้ วิธีการง่ายๆ ในการทำซ้ำ และตั้งค่าคอมโพเนนต์เป็น Blink>ContentIndexing

หากวางแผนจะใช้ API

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

  • ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก #ContentIndexingAPI รวมถึงรายละเอียดเกี่ยวกับตำแหน่งและวิธีการใช้งานของคุณ

การจัดทำดัชนีเนื้อหามีนัยด้านความปลอดภัยและความเป็นส่วนตัวอะไรบ้าง

ดูคำตอบสำหรับแบบสอบถามด้านความปลอดภัยและความเป็นส่วนตัวของ W3C หากมีข้อสงสัยเพิ่มเติม โปรดเริ่มการสนทนาผ่านที่เก็บ GitHub ของโปรเจ็กต์

รูปภาพหลักโดย Maksym Kaharlytskyi ใน Unsplash