Правильный выбор кэшированных ответов от рабочего сервиса - PullRequest
Новая
       5

Правильный выбор кэшированных ответов от рабочего сервиса

0 голосов
/ 31 августа 2018

Я экспериментировал с рабочими и сервисными работниками в целом. Я попытался использовать стратегию NetworkFirst для моих вызовов API. Консоль, кажется, работает должным образом, но я не смог отобразить кэшированный ответ от работника сервиса. То же самое происходит при использовании CacheFirst, мой сценарий рендеринга не получает ответа. Я что-то упустил? 

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');`
if (workbox) {
  console.log(`Yay! Workbox is loaded ?`);

  workbox.precaching.precacheAndRoute([]);

  const cacheName = 'collection';
  workbox.routing.registerRoute(
    new RegExp('http://13.232.112.165/api/'),
    workbox.strategies.networkFirst()
  );


/*
  const bgSyncPlugin = new workbox.backgroundSync.Plugin('post-req-queue', {
    maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
  });

  workbox.routing.registerRoute(
    new RegExp("http://13.232.112.165/api/"),
    workbox.strategies.networkOnly({
      plugins: [bgSyncPlugin]
    }),
    'POST'
  );

  workbox.routing.registerRoute(
    new RegExp("http://13.232.112.165/api/"),
    workbox.strategies.networkOnly({
      plugins: [bgSyncPlugin]
    }),
    'PUT'
  );

  workbox.routing.registerRoute(
    new RegExp("http://13.232.112.165/api/"),
    workbox.strategies.networkOnly({
      plugins: [bgSyncPlugin]
    }),
    'DELETE'
  );
*/
} else {
  console.log(`Boo! Workbox didn't load ?`);
}`

This is when there is normal network This is when there is no internet Мой вызов Api выглядит следующим образом: 

   async function getAccounts() {
    url = backend_uri+"accounts";
    try{
        var jsonResponse = await fetch(url, {headers: {
            'Authorization' : "Token "+localStorage.getItem('user-token')
        }});
        const json = await jsonResponse.json();
        const accounts = await json;

        let renderString = "";
        await accounts.forEach(element => {
            renderString = renderString + `<div class='card'><div class='card-body'><strong>${element.name}</strong></div></div>`        
        });
        containerElement.innerHTML += renderString;
    }catch(e) {
        console.log(e);
    }
}

Должны ли API-вызовы в PWA совершаться по-другому?

1 Ответ

0 голосов
/ 06 сентября 2018

(я не думаю, что ваш вопрос связан с Workbox или PWA; похоже, это больше об использовании Fetch API.)

Есть некоторые дополнительные await s и несколько других проблем, которые я вижу с вашим кодом; Вы можете попробовать следующее? 

async function getAccounts() {
  const url = `${backend_uri}accounts`;

  const response = await fetch(url, {
    headers: {
      'Authorization' : "Token "+localStorage.getItem('user-token')
    },
  });

  const accounts = await response.json();

  const divs = accounts.map(account => `<div class='card'>
  <div class='card-body'>
    <strong>${account.name}</strong>
  </div>
</div>`);

  containerElement.innerHTML += divs.join('');
}
...