Content Indexing API: Halaman tersedia secara offline. Laporan dari RamblerFront # 9

Halo, nama saya Antonina, saya bekerja sebagai pengembang frontend di Rambler & Co, di tim Lenta.ru.

Content Indexing API adalah alat baru dari Google yang menunjukkan halaman mana yang tersedia secara offline. Saya akan membahas cara kerja Content Indexing API, kapan harus digunakan, dan bagaimana tim kami menerapkannya.

tentang proyek tersebut

Lenta.ru — -. — ~7 ., 12 . 20% , 80% — , offline-. .

, :

Offline- Lenta.ru 

, offline-.

Lenta.ru? , . , offline- , - , .

offline- :

1. : , , JavaScript ;

   
   
   
   
   

2. : , , , .

   
   
   
   
   

CacheStorage, IndexedDB. m.lenta.ru :

• ,

  
  
  
  
  

• ( ) Service Worker,

  
  
  
  
  

• CacheStorage,

  
  
  
  
  

• IndexedDB.

  
  
  
  
  

Service Worker ( fetch), , , index.html SPA.

, , , . , ( ) – offline-.

, -. , offline-, — online.

, Content Indexing API

. offline-. , ? 

- . , , :

: , ?

, Content Indexing API. , , offline:

Content Indexing API

Content Indexing API — API, . — - , .

, offline. , - , .

Content Indexing API , . -, API.

( )

: - , , . .

, offline :

1. .

   
   
   
   
   

2. Downloads ( ).

   
   
   
   
   

3. “Explore offline” (“-”).

   
   
   
   
   

. , offline Content Indexing API. — . — offline- .

( )

, API?

1. - offline-.

   
   
   
   
   

2. offline- .

   
   
   
   
   

offline- -. Content Indexing API — , , . 

:

. Content Indexing API :

navigator.serviceWorker.ready
  .then((registration) => {
    if (!registration.index) {
      return;
    }
    
    // (1)
  }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

( (1) ):

registration.index.add({
	url: page.url, // required
  id: page.id, // required
  title: page.title, // required
  description: page.description, //required
  icons: [{ // required
    src: page.image_url,
    sizes: 64x64,
    type: 'image/png',
  }],
  // : 'homepage', 'article', 'video', 'audio', ''
  category: 'article', // optional
});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

add



API. url



, id



, title



, description



, icons



category



. category



. category



— , : ‘homepage’



, ‘article’



, ‘video’



, ‘audio’



. , id



.

, . : , , .

offline-. , “-”, , , . .

Lenta.ru — , , offline- . .

:

, :

registration.index.getAll() // (1)
	.then((entries) => {
    entries.forEach((entry) => {
      registration.index.delete(entry.id); // (2)
    });
  });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

(1) API getAll



. (2), id



, API delete



id



, ( , ).

, “-” . offline-.

3 — , Content Indexing API. offline-, . 

Content Indexing API Lenta.ru

— , . Offline- 3- . , Lenta.ru ?

: Lenta.ru, , offline-. API : , - “-” .

, . offline- , — 100 . — -10, .

API , ~100 , -10. :

1. .

   
   
   
   
   

2. , Content Indexing API . .

   
   
   
   
   

3. , .

   
   
   
   
   

4. , ( , — ).

   
   
   
   
   

5. , .

   
   
   
   
   

C 10 . .

offline- , Content Indexing API. :

registration.index.add({
  url: `${page.url}?utm_source=offline`,
  id: page.id,
  title: page.title,
  description: page.description,
  icons: [{
    src: page.image_url,
    sizes: 64x64,
    type: 'image/png',
  }],
  category: 'article',
});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

API url utm-, , Content Indexing API. . ( ) .

Content Indexing API , production. API MDN, , API Edge, Chrome Android WebView Android v.84 Opera Android v.60.

chromestatus Chrome Android Android WebView, «No signal». Opera v.62 Android, Edge v.84. - — , .

, , Content Indexing API. Lenta.ru. 

Lenta.ru Chrome Android 60% . 64%  Chrome Android v.84 . 39% Content Indexing API. 3 .

4 , Content Indexing API :

1. SEO .

   
   
   
   
   

   , , Content Indexing API, SEO.

   
   
   
   
   

2. , .

   
   
   
   
   

   , : , offline , ( ) .

   
   
   
   
   

3. Content Indexing API .

   
   
   
   
   

   , . API , . , , - offline-.

   
   
   
   
   

4. .

   
   
   
   
   

   API , : , . , . , Lenta.ru . offline-: , , PWA.

   
   
   
   
   

:

1. , production.


   
   
   
   
   

2. +1 
 .

   
   
   
   
   

3. 
( Content Indexing API).


   
   
   
   
   

4. .

   
   
   
   
   

:

1. .


   
   
   
   
   

2. .


   
   
   
   
   

3. offline-, .


   
   
   
   
   

4. ().

   
   
   
   
   

, Content Indexing API:

1. - — .

   
   
   
   
   

2. - offline-, .

   
   
   
   
   

Content Indexing API , offline. , production. API , — offline-. , offline- Content Indexing API — , .

, , , .

, . , , , , AMP offline.

.