const URL = "https://8014-35-223-70-178.ngrok-free.app/"; // 1
const taskChannel = new BroadcastChannel('task-channel'); // 2
taskChannel.onmessage = occasion => { // 3
persistTask(occasion.knowledge.knowledge); // 4
registration.sync.register('task-sync'); // 5
};
let db = null; // 6
let request = indexedDB.open("TaskDB", 1); // 7
request.onupgradeneeded = perform(occasion) { // 8
db = occasion.goal.end result; // 9
if (!db.objectStoreNames.incorporates("duties")) { // 10
let tasksObjectStore = db.createObjectStore("duties", { autoIncrement: true }); // 11
}
};
request.onsuccess = perform(occasion) { db = occasion.goal.end result; }; // 12
request.onerror = perform(occasion) { console.log("Error in db: " + occasion); }; // 13
persistTask = perform(process){ // 14
let transaction = db.transaction("duties", "readwrite");
let tasksObjectStore = transaction.objectStore("duties");
let addRequest = tasksObjectStore.add(process);
addRequest.onsuccess = perform(occasion){ console.log("Job added to DB"); };
addRequest.onerror = perform(occasion) { console.log(“Error: “ + occasion); };
}
self.addEventListener('sync', async perform(occasion) { // 15
if (occasion.tag == 'task-sync') {
occasion.waitUntil(new Promise((res, rej) => { // 16
let transaction = db.transaction("duties", "readwrite");
let tasksObjectStore = transaction.objectStore("duties");
let cursorRequest = tasksObjectStore.openCursor();
cursorRequest.onsuccess = perform(occasion) { // 17
let cursor = occasion.goal.end result;
if (cursor) {
let process = cursor.worth; // 18
fetch(URL + 'todos/add', // a
{ methodology: 'POST',
headers: { 'Content material-Sort': 'software/json' },
physique: JSON.stringify({ "process" : process })
}).then((serverResponse) => {
console.log("Job saved to backend.");
deleteTasks(); // b
res(); // b
}).catch((err) => {
console.log("ERROR: " + err);
rej(); //c
})
}
}
}))
}
})
async perform deleteTasks() { // 19
const transaction = db.transaction("duties", "readwrite");
const tasksObjectStore = transaction.objectStore("duties");
tasksObjectStore.clear();
await transaction.full;
}
Now let’s speak about what is occurring on this code.
- We have to route our requests by the identical safe tunnel we created with
ngrok
, so we save the URL right here. - Create the published channel with the identical title so we are able to pay attention for messages.
- Right here, we’re looking ahead to
task-channel
message occasions. In responding to those occasions, we do two issues: - Name
persistTask()
to save lots of the brand new process toIndexedDB
. - Register a brand new
sync
occasion. That is what invokes the particular functionality for retrying requests intelligently. The sync handler permits us to specify a promise that it’s going to retry when the community is on the market, and implements a again off technique and give-up circumstances. - With that achieved, we create a reference for our database object.
- Receive a “request” for the deal with on our database. All the pieces on
IndexedDB
is dealt with asynchronously. (For a superb overview ofIndexedDB
, I like to recommend this sequence.) - The
onupgradeneeded
occasion fires if we’re accessing a brand new or up-versioned database. - Inside
onupgradeneeded
, we get a deal with on the database itself, with our worlddb
object. - If the duties assortment just isn’t current, we create the duties assortment.
- If the database was efficiently created, we put it aside to our
db
object. - Log the error if the database creation failed.
- The
persistTask()
perform referred to as by the add-task broadcast occasion (4). This merely places the brand new process worth within the duties assortment. - Our sync occasion. That is referred to as by the published occasion (5). We test for the
occasion.tag
discipline beingtask-sync
so we all know it’s our task-syncing occasion. occasion.waitUntil()
permits us to inform theserviceWorker
that we’re not achieved till thePromise
inside it completes. As a result of we’re in a sync occasion, this has particular that means. Particularly, if ourPromise
fails, the syncing algorithm will hold making an attempt. Additionally, keep in mind that if the community is unavailable, it’s going to wait till it turns into out there.- We outline a brand new
Promise
, and inside it we start by opening a connection to the database.
- We outline a brand new
- Inside the database
onsuccess
callback, we receive a cursor and use it to seize the duty we saved. (We’re leveraging our wrappingPromise
to cope with nested asynchronous calls.) - Now now we have a variable with the worth of our broadcast process in it. With that in hand:
- We challenge a brand new
fetch
request to ourexpressJS /todos/add
endpoint. - Discover that if the request succeeds, we delete the duty from the database and name
res()
to resolve our outer promise. - If the request fails, we name
rej()
. It will reject the containing promise, letting the Sync API know the request should be retried.
- We challenge a brand new
- The
deleteTasks()
helper methodology deletes all of the duties within the database. (It is a simplified instance that assumes oneduties
creation at a time.)
Clearly, there’s a lot to this, however the reward is with the ability to effortlessly retry requests within the background each time our community is spotty. Bear in mind, we’re getting this within the browser, throughout all types of gadgets, cell and in any other case.
- Advertisement -
For those who run the PWA now and create a to-do, it’ll be despatched to the again finish and saved. The fascinating check is to open devtools (F12) and disable the community. You’ll find the “Offline” possibility within the “throttling” menu of the community tab like so: