0

I want to generate a custom error page when there's No internet available in a website just like https://m.apkpure.com and page will load again on refresh when internet is available. I know we can use the following code to check "ONLINE" or "OFFLINE"

window.addEventListener("online", function() {
 alert("You're ONLINE!");
     });
window.addEventListener("offline", function() {
 alert("You're OFFLINE!");
     });

// OR

if (navigator.onLine) {
  console.log("You are online");
} else {
  console.log("You are offline");
}

But I dont think that the https://m.apkpure.com use the above kind of code to detect ONLINE or OFFLINE. If there's any other way to do so please let me know.

  • https://stackoverflow.com/a/189443/8181001 – peekolo Nov 17 '19 at 19:36
  • 1
    There are numerous way to check connectivity but the above mentioned ones are the standard. Ultimately every other way involves making some sort of network call to establish connection. If it doesn't work, it means internet is off. – Easwar Nov 17 '19 at 19:37
  • "*But I dont think that m.apkpure.com use the above kind of code*" - why not? – Bergi Nov 17 '19 at 19:43
  • 1
    Because I look on their source code and found nothing like the above code. –  Nov 17 '19 at 19:45
  • @Elizabeth Did you find the part where they show their offline message at all? – Bergi Nov 17 '19 at 19:51
  • Why doing it the same these guys didi it? If there is a pratical one-liner, there's no need to search forever. Wouldn't hooking into `fetch` require a request being made from your JS? What's the issue with your code? I'd say that's the correct way around how you did it – Julian F. Weinert Nov 17 '19 at 20:09

1 Answers1

0

After a little digging through the source code...
In sw.js on the website you were talking about(https://m.apkpure.com):

self.addEventListener('fetch', (event) => {
    if (!self.navigator.onLine) {
        event.respondWith(
            caches.match(event.request).then((response) => {
                return caches.match('/offline.html')
            })
        )
    }
})

So yeah, they do use navigator.onLine.

Sarah
  • 460
  • 4
  • 9
  • 1
    Can you provide the page link where this code actually found??? –  Nov 17 '19 at 19:48
  • 1
    https://m.apkpure.com/sw.js. But you could just look in the source code in Developer Tools > Sources > sw.js > sw.js. – Sarah Nov 17 '19 at 19:52
  • You can you go through https://link.medium.com/xu2cVcvV6xb – Sandeep Mar 17 '23 at 14:20
  • what i notice is, i think google mostly give that no internet game and only sometimes we can see our no internet page. any idea how to over come that? – lodey May 04 '23 at 09:50