API d'indexation de contenu: pages disponibles hors connexion. Rapport de RamblerFront # 9

Bonjour, je m'appelle Antonina, je travaille en tant que développeur frontend chez Rambler & Co, dans l'équipe Lenta.ru.

L'API d'indexation de contenu est un nouvel outil de Google qui montre quelles pages sont disponibles hors connexion. Je vais expliquer comment fonctionne l'API d'indexation de contenu, quand elle doit être utilisée et comment notre équipe l'a mise en œuvre.

à propos du projet

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.

.