From 48ef41cf5e44d7d716b4e8248e8bb2ebc894ca61 Mon Sep 17 00:00:00 2001 From: Mohammad Jafari Date: Wed, 22 Feb 2023 02:27:07 +0330 Subject: [PATCH 1/3] add offline page --- assets/offline/offline.html | 81 ++++++++++++++++++++++++++++++++ assets/offline/service-worker.js | 71 ++++++++++++++++++++++++++++ src/index.jsx | 12 +++++ webpack.config.babel.js | 2 + 4 files changed, 166 insertions(+) create mode 100644 assets/offline/offline.html create mode 100644 assets/offline/service-worker.js diff --git a/assets/offline/offline.html b/assets/offline/offline.html new file mode 100644 index 000000000..b5805ddb4 --- /dev/null +++ b/assets/offline/offline.html @@ -0,0 +1,81 @@ + + + + + + + + Freefeed + + + + + +
+ + + + + + + + +

Connection error

+

Your device may be offline or our servers may be experiencing problems.

+
+ + + + diff --git a/assets/offline/service-worker.js b/assets/offline/service-worker.js new file mode 100644 index 000000000..b2f836535 --- /dev/null +++ b/assets/offline/service-worker.js @@ -0,0 +1,71 @@ +const CACHE_NAME = 'offline'; + +// Customize this with a different URL if needed. +const OFFLINE_URL = `${location.origin}/offline.html`; + +self.addEventListener('install', (event) => { + event.waitUntil( + (async () => { + const cache = await caches.open(CACHE_NAME); + + // Setting {cache: 'reload'} in the new request will ensure that the + // response isn't fulfilled from the HTTP cache; i.e., it will be from + // the network. + await cache.add(new Request(OFFLINE_URL, { cache: 'reload' })); + })(), + ); + + // Force the waiting service worker to become the active service worker. + self.skipWaiting(); +}); + +self.addEventListener('activate', (event) => { + event.waitUntil( + (async () => { + // Enable navigation preload if it's supported. + // See https://developers.google.com/web/updates/2017/02/navigation-preload + if ('navigationPreload' in self.registration) { + await self.registration.navigationPreload.enable(); + } + })(), + ); + + // Tell the active service worker to take control of the page immediately. + self.clients.claim(); +}); + +self.addEventListener('fetch', (event) => { + // We only want to call event.respondWith() if this is a navigation request + // for an HTML page. + if (event.request.mode === 'navigate') { + event.respondWith( + (async () => { + try { + // First, try to use the navigation preload response if it's supported. + const preloadResponse = await event.preloadResponse; + + if (preloadResponse) { + return preloadResponse; + } + + // Always try the network first. + const networkResponse = await fetch(event.request); + + return networkResponse; + } catch (error) { + // catch is only triggered if an exception is thrown, which is likely + // due to a network error. + // If fetch() returns a valid HTTP response with a response code in + // the 4xx or 5xx range, the catch() will NOT be called. + console.log('Fetch failed; returning offline page instead.', error); + + const cache = await caches.open(CACHE_NAME); + const cachedResponse = await cache.match(OFFLINE_URL); + + return cachedResponse; + } + })(), + ); + } + +}); diff --git a/src/index.jsx b/src/index.jsx index 52c0d42a9..dc4580514 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -372,6 +372,18 @@ ReactDOM.render( document.querySelector('#app'), ); +if ('serviceWorker' in navigator) { + navigator.serviceWorker + .register(`${location.origin}/service-worker.js`) + // eslint-disable-next-line promise/always-return + .then((reg) => { + console.log('Service worker registered.', reg); + }) + .catch((err) => { + console.log(err); + }); +} + function checkPath(Component, checker) { return (props) => { return checker(props) ? : ; diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 621777e00..511274455 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -65,6 +65,8 @@ const config = { 'assets/images/favicon.*', 'assets/images/ios/*.png', 'assets/ext-auth/auth-return.html', + 'assets/offline/offline.html', + 'assets/offline/service-worker.js', opts.dev && { from: 'config.json', noErrorOnMissing: true }, ]), }), From cf468cc0ec19acb1964eb79b3b016c874b7bd719 Mon Sep 17 00:00:00 2001 From: Mohammad Jafari Date: Fri, 24 Feb 2023 23:33:30 +0330 Subject: [PATCH 2/3] clear interval after online status detected --- assets/offline/offline.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/offline/offline.html b/assets/offline/offline.html index b5805ddb4..d58e273e7 100644 --- a/assets/offline/offline.html +++ b/assets/offline/offline.html @@ -66,6 +66,7 @@

Your device may be offline or our servers may be experiencing problems.

document.getElementsByTagName('h4')[0].innerHTML='' } function reloadPage(){ + clearInterval(start); location.reload(); } function checkOnline() { @@ -74,7 +75,11 @@

Your device may be offline or our servers may be experiencing problems.

setTimeout(reloadPage,1000); } } - setInterval(checkOnline, 1000) + function start(){ + setInterval(checkOnline, 1000); + } + + start(); From b0725d1a54fcde92ba4d728ed29482b63c8f366b Mon Sep 17 00:00:00 2001 From: Mohammad Jafari Date: Tue, 11 Apr 2023 03:17:18 +0330 Subject: [PATCH 3/3] optimize --- assets/offline/offline.html | 40 ++++++++++++++++++++------------ assets/offline/service-worker.js | 2 ++ 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/assets/offline/offline.html b/assets/offline/offline.html index d58e273e7..b9c3f9cda 100644 --- a/assets/offline/offline.html +++ b/assets/offline/offline.html @@ -61,25 +61,35 @@

Connection error

Your device may be offline or our servers may be experiencing problems.

diff --git a/assets/offline/service-worker.js b/assets/offline/service-worker.js index b2f836535..759b42df5 100644 --- a/assets/offline/service-worker.js +++ b/assets/offline/service-worker.js @@ -6,12 +6,14 @@ const OFFLINE_URL = `${location.origin}/offline.html`; self.addEventListener('install', (event) => { event.waitUntil( (async () => { + const cache = await caches.open(CACHE_NAME); // Setting {cache: 'reload'} in the new request will ensure that the // response isn't fulfilled from the HTTP cache; i.e., it will be from // the network. await cache.add(new Request(OFFLINE_URL, { cache: 'reload' })); + })(), );