CODEWITHSUNDEEP
progressive-web-apps
Jaymoh
Jaymoh

Reputation: 143

How to know if a device is connected to a working internet connection in PWA

When creating a progressive web app how can i know that a mobile device is connected to a working internet connection cause it can be connected but not working.

Upvotes: 0

Views: 261

Answers (2)

user3044394
user3044394

Reputation: 135

Use ‘navigator.connection’. You can get the following information.

  • downlink: current bandwidth at time of checking.
  • downLinkMax: max bandwidth of the device.
  • type: WiFi, cellular and more

There’s more which you can find on MDN. You can use that to tell if there’s a connection and how strong it is.

Edit: sorry, Safari does not support anything in navigator.connection. I guess the old saying “PWA = Problems With Apple” still applies. Maybe in another 20 years Apple will catch up with the rest of the world.

Upvotes: 0

vrtjason
vrtjason

Reputation: 531

The saying, "You never know until you try" is pertinent here. At the moment you want to check whether there is connectivity, simply fetch a remotely hosted resource with a cache-busting technique. It's generally best practice for that resource to be tiny in file size if you need to check regularly and often (such as 1×1 pixel gif). If you receive a network response in the 200 range, you have connectivity. Otherwise, for the moment at least, you probably don't.

Upvotes: 1

Related Questions