コンテンツインデックスAPI：オフラインで利用できるページ。RamblerFront＃9からのレポート

こんにちは、私の名前はアントニーナです。Lenta.ruチームのRambler＆Coでフロントエンド開発者として働いています。

Content Indexing APIは、オフラインで利用できるページを表示するGoogleの新しいツールです。Content Indexing APIがどのように機能するか、いつ使用する必要があるか、そして私たちのチームがどのように実装したかについて説明します。

プロジェクトについて

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.

.