Блог

Я хочу, чтобы мои сообщения хранились в хранилище indexeddb, откуда сотрудники службы позже могли бы отправить их тому, кто был отключен во время получения сообщения. Но при текущей реализации он не создает ни БД, ни хранилища.

store.js

 import { openDB } from "idb";

let store = {
db: null,

init: async function () {
if (store.db) {
  return Promise.resolve(store.db);
}
return await openDB("messages", 1, {
  upgrade(upgradeDb) {
    upgradeDb.createObjectStore("outbox", {
      autoIncrement: true,
      keyPath: "id",
    });
  },
 }).then(function (db) {
  return (store.db = db);
 });
},

outbox: async function (mode) {
return await store.init().then(function (db) {
  return db.transaction("outbox", mode).objectStore("outbox");
 });
},
};

export default store;
 

service-worker.js

 self.addEventListener("sync", function (event) {
event.waitUntil(
store
  .outbox("readonly")
  .then(function (outbox) {
    return outbox.getAll();
  })
  .then(function (messages) {
    return Promise.all(
      messages.map(function (message) {
        return fetch("/messages", {
          method: "POST",
          body: JSON.stringify(message),
          headers: {
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
          },
        })
          .then(function (response) {
            return response.json();
          })
          .then(function (data) {
            if (data.result === "success") {
              return store.outbox("readwrite").then(function (outbox) {
                return outbox.delete(message.id);
              });
            }
          });
      })
    );
  })
  .catch(function (err) {
    console.error(err);
   })
  );
});
 

serviceWorkerRegistration.js

 function registerValidSW(swUrl, config) {
...
  //listening for the sync event
  if ("sync" in registration) {
    const form = document.querySelector("#chatInput");
    const messageBody = form.querySelector("#messageBody");

    form.addEventListener("submit", function (event) {
      event.preventDefault();
      const message = {
        body: messageBody.value,
      };
      store
        .outbox("readwrite")
        .then(function (outbox) {
          return outbox.put(message);
        })
        .then(function () {
          messageBody.value = "";
          return registration.sync.register("outbox");
        })
        .catch(function (err) {
          console.error(err);
        
        });
    });
  }
})
.catch((error) => {
  console.error("Error during service worker registration:", error);
});
 

}

Я использую шаблон CRA service-worker по умолчанию. Это статья, которой я следую. Заранее благодарю вас за помощь.