Implement Background Data Fetching with Service Worker

src/index.html

@@ -7,7 +7,10 @@
 
     @@favicons
 
-    <meta name="description" content="Replace your browser New Tab page with a Bitcoin price chart" />
+    <meta
+      name="description"
+      content="Replace your browser New Tab page with a Bitcoin price chart"
+    />
     <meta name="image" content="https://i.imgur.com/pHG5fBk.jpg" />
     @@socialMediaTags
 
@@ -40,7 +43,11 @@ <h1 id="clock" class="time mb+ text-center mt">-:-</h1>
           </span>
         </a>
 
-        <a class="install__link" target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/crypto-tab/">
+        <a
+          class="install__link"
+          target="_blank"
+          href="https://addons.mozilla.org/en-US/firefox/addon/crypto-tab/"
+        >
           <span class="install__icon">
             <svg
               width="34"
@@ -60,7 +67,9 @@ <h1 id="clock" class="time mb+ text-center mt">-:-</h1>
                 <path
                   d="m0.064 8.728c-0.027 0.128-0.041 0.25-0.049 0.367 0.02-0.146 0.055-0.392 0.055-0.388-3e-3 7e-3 -5e-3 0.014-6e-3 0.021z"
                 />
-                <path d="m0.015 9.095c0 7e-3 -2e-3 0.013-3e-3 0.02v-2e-3c0-6e-3 2e-3 -0.012 3e-3 -0.018z" />
+                <path
+                  d="m0.015 9.095c0 7e-3 -2e-3 0.013-3e-3 0.02v-2e-3c0-6e-3 2e-3 -0.012 3e-3 -0.018z"
+                />
               </g>
             </svg>
           </span>

src/js/api.js

@@ -8,14 +8,11 @@ class API {
     get(_endpoint) {
         App.Loader.init();
 
-        return axios.get(this.apiAdapter.baseURL + _endpoint)
-            .then( r => r.data )
-            .then (r => {
-                App.Message.clear();
-                App.Loader.destroy();
-
-                return r;
-            });
+        return this.apiAdapter.getBitcoinRatesForPeriod(_endpoint).then((r) => {
+            App.Message.clear();
+            App.Loader.destroy();
+            return r;
+        });
     }
 
     mapData(_r, _period) {
@@ -49,7 +46,7 @@ class API {
     getBitcoinRatesNow() {
         return this.apiAdapter.getBitcoinRatesNow();
     }
-};
+}
 
 // window.App.API = new API(App.apiFakeAdapter);
 //window.App.API = new API(App.apiGoranAdapter);

src/js/apiCecoAdapter.js

@@ -1,12 +1,6 @@
 window.App = window.App || {};
 
 window.App.apiCecoAdapter = {
-    baseURL: 'https://api.crypto-tab.com/v1/',
-
-    get: function (_endpoint) {
-        return App.API.get(_endpoint);
-    },
-
     mapData: function (response, dateLabelFormat) {
         return response
             .map((_rec) => ({
@@ -19,44 +13,43 @@ window.App.apiCecoAdapter = {
             .reverse();
     },
 
-    _createDateAsUTC: function (date) {
-        return new Date(
-            Date.UTC(
-                date.getFullYear(),
-                date.getMonth(),
-                date.getDate(),
-                date.getHours(),
-                date.getMinutes(),
-                date.getSeconds()
-            )
-        );
+    getBitcoinRatesForPeriod: function (period) {
+        return new Promise((resolve, reject) => {
+            chrome.runtime.sendMessage({ type: 'getBitcoinPrice', period: period }, (response) => {
+                if (response && !response.error) {
+                    resolve(response.data);
+                } else {
+                    reject(response.error || 'Failed to retrieve Bitcoin price data');
+                }
+            });
+        });
     },
 
     getBitcoinRatesForAll: function () {
-        return this.get('bitcoin/all');
+        return this.getBitcoinRatesForPeriod('ALL');
     },
 
     getBitcoinRatesForOneYear: function () {
-        return this.get('bitcoin/year');
+        return this.getBitcoinRatesForPeriod('ONE_YEAR');
     },
 
     getBitcoinRatesForOneMonth: function () {
-        return this.get('bitcoin/month');
+        return this.getBitcoinRatesForPeriod('ONE_MONTH');
     },
 
     getBitcoinRatesForOneWeek: function () {
-        return this.get('bitcoin/week');
+        return this.getBitcoinRatesForPeriod('ONE_WEEK');
     },
 
     getBitcoinRatesForOneDay: function () {
-        return this.get('bitcoin/day');
+        return this.getBitcoinRatesForPeriod('ONE_DAY');
     },
 
     getBitcoinRatesForOneHour: function () {
-        return this.get('bitcoin/hour');
+        return this.getBitcoinRatesForPeriod('ONE_HOUR');
     },
 
     getBitcoinRatesNow: function () {
-        return this.get('bitcoin/now');
+        return this.getBitcoinRatesForPeriod('NOW');
     },
 };

src/js/background.js

@@ -0,0 +1,31 @@
+let bitcoinPriceData = {};
+
+async function fetchBitcoinPrice(period) {
+    const endpoints = {
+        ALL: 'bitcoin/all',
+        ONE_YEAR: 'bitcoin/year',
+        ONE_MONTH: 'bitcoin/month',
+        ONE_WEEK: 'bitcoin/week',
+        ONE_DAY: 'bitcoin/day',
+        ONE_HOUR: 'bitcoin/hour',
+        NOW: 'bitcoin/now',
+    };
+
+    try {
+        const response = await fetch(`https://api.crypto-tab.com/v1/${endpoints[period]}`);
+        const data = await response.json();
+        bitcoinPriceData[period] = data;
+    } catch (error) {
+        console.error(`Error fetching Bitcoin price for ${period}:`, error);
+    }
+}
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.type === 'getBitcoinPrice') {
+        const period = request.period;
+        fetchBitcoinPrice(period).then(() => {
+            sendResponse({ data: bitcoinPriceData[period], cached: false });
+        });
+        return true; // Indicates that the response will be sent asynchronously
+    }
+});

src/js/bitcoin.js

@@ -30,8 +30,7 @@ window.App.Bitcoin = {
                 this.classList.add('active');
 
                 const period = this.dataset.period;
-                self.repositories[period]
-                    .getData()
+                self.getBitcoinData(period)
                     .then((_data) => self.chart.init(_data))
                     .catch((error) => {
                         self.handleChartRejection(period, error);
@@ -45,26 +44,21 @@ window.App.Bitcoin = {
 
         App.Settings.get().then(({ period }) => {
             const selectedTab = period ? Object.keys(this.PERIODS).indexOf(period) : 1;
-
             self.$dataPeriods[selectedTab].click();
         });
     },
 
     getBitcoinData(period) {
-        switch (period) {
-            case 'ALL':
-                return App.API.getBitcoinRatesForAll();
-            case 'ONE_YEAR':
-                return App.API.getBitcoinRatesForOneYear();
-            case 'ONE_MONTH':
-                return App.API.getBitcoinRatesForOneMonth();
-            case 'ONE_WEEK':
-                return App.API.getBitcoinRatesForOneWeek();
-            case 'ONE_DAY':
-                return App.API.getBitcoinRatesForOneDay();
-            case 'ONE_HOUR':
-                return App.API.getBitcoinRatesForOneHour();
-        }
+        return new Promise((resolve, reject) => {
+            this.repositories[period]
+                .getData()
+                .then((response) => {
+                    resolve(response);
+                })
+                .catch((error) => {
+                    reject(error || 'Failed to retrieve Bitcoin price data');
+                });
+        });
     },
 
     getLabelFormat(period) {
@@ -74,7 +68,7 @@ window.App.Bitcoin = {
             case 'ONE_YEAR':
                 return 'MMM YYYY';
             case 'ONE_MONTH':
-                return 'Do MMM';
+                return 'D MMM';
             case 'ONE_WEEK':
                 return 'dddd';
             case 'ONE_DAY':
@@ -95,15 +89,13 @@ window.App.Bitcoin = {
                 this.chart.destroy();
             } else if (_res.localData.length) {
                 App.Message.clear();
-
                 this.chart.init(_res.localData);
                 this.setLastUpdated(true);
             }
         });
     },
     handleNowRejection() {
         this.isLocalNowDataOld = true;
-
         App.Loader.destroy();
     },
 
@@ -112,29 +104,28 @@ window.App.Bitcoin = {
         const storageSetting =
             App.ENV.platform === 'EXTENSION' ? 'BROWSER_STORAGE' : 'LOCAL_STORAGE';
 
-        Object.keys(this.PERIODS).forEach(
-            (period) =>
-                (this.repositories[period] = new SuperRepo({
-                    storage: storageSetting,
-                    name: 'bitcoin-' + period,
-                    outOfDateAfter: 15 * 60 * 1000,
-                    mapData: (r) => App.API.mapData(r, this.getLabelFormat(period)),
-                    request: () =>
-                        this.getBitcoinData(period)
-                            .then((res) => {
-                                this.isLocalChartDataOld = false;
-                                return res;
-                            })
-                            .catch((jqXHR, textStatus, errorThrown) => {
-                                this.handleChartRejection(period, jqXHR);
-                            }),
-                }))
-        );
+        Object.keys(this.PERIODS).forEach((period) => {
+            this.repositories[period] = new SuperRepo({
+                storage: storageSetting,
+                name: 'bitcoin-' + period,
+                outOfDateAfter: 15 * 60 * 1000, // 15 minutes
+                mapData: (r) => App.API.mapData(r, this.getLabelFormat(period)),
+                request: () =>
+                    this.getBitcoinDataFromBackground(period)
+                        .then((res) => {
+                            this.isLocalChartDataOld = false;
+                            return res;
+                        })
+                        .catch((jqXHR, textStatus, errorThrown) => {
+                            this.handleChartRejection(period, jqXHR);
+                        }),
+            });
+        });
 
         this.repositories['NOW'] = new SuperRepo({
             storage: storageSetting,
             name: 'bitcoin-NOW',
-            outOfDateAfter: 3 * 60 * 1000,
+            outOfDateAfter: 3 * 60 * 1000, // 3 minutes
             mapData: (data) => {
                 const { value, changePercent } = data[0];
                 const { dayAgo, weekAgo, monthAgo } = changePercent;
@@ -145,7 +136,7 @@ window.App.Bitcoin = {
                 };
             },
             request: () =>
-                App.API.getBitcoinRatesNow()
+                this.getBitcoinDataFromBackground('NOW')
                     .then((res) => {
                         this.isLocalNowDataOld = false;
                         return res;
@@ -156,6 +147,18 @@ window.App.Bitcoin = {
         });
     },
 
+    getBitcoinDataFromBackground(period) {
+        return new Promise((resolve, reject) => {
+            chrome.runtime.sendMessage({ type: 'getBitcoinPrice', period: period }, (response) => {
+                if (response && !response.error) {
+                    resolve(response.data);
+                } else {
+                    reject(response.error || 'Failed to retrieve Bitcoin price data');
+                }
+            });
+        });
+    },
+
     $priceNow: document.querySelector('#price-now'),
     setPriceNow(_price) {
         this.$priceNow.textContent = App.Utils.formatPrice(Math.round(_price));

src/manifest.json

@@ -19,5 +19,8 @@
   "host_permissions": [
     "https://bitcoin-price-api.devlabs-projects.info/**/*",
     "https://api.crypto-tab.com/**/*"
-  ]
+  ],
+  "background": {
+    "service_worker": "js/background.js"
+  }
 }