Content Indexing API: Pages available offline. Report from RamblerFront # 9

Hello, my name is Antonina, I work as a frontend developer at Rambler & Co, in the Lenta.ru team.

The Content Indexing API is a new tool from Google that shows which pages are available offline. I'll cover how the Content Indexing API works, when it should be used, and how our team implemented it.

about the project

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.

.