API de indexación de contenido: páginas disponibles sin conexión. Informe de RamblerFront # 9

Hola, mi nombre es Antonina, trabajo como desarrolladora frontend en Rambler & Co, en el equipo de Lenta.ru.

La API de indexación de contenido es una nueva herramienta de Google que muestra qué páginas están disponibles sin conexión. Cubriré cómo funciona la API de indexación de contenido, cuándo debe usarse y cómo nuestro equipo la implementó.

sobre el proyecto

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.

.