HTML and CSS Reference
In-Depth Information
The simple check for an
online
or
onload
event below resets disabled links when
switching from offline to online. For a more sophisticated app, you could also insert
logic that would resume fetching content or handle the UX for intermittent connections.
function
processOnline
(
eventType
)
{
setupApp
();
checkAppCache
();
// reset our once disabled offline links
if
(
eventType
)
{
for
(
var
i
=
0
;
i
<
disabledLinks
.
length
;
i
++
)
{
disabledLinks
[
i
].
onclick
=
null
;
}
}
}
For the
processOffline()
function, you could manipulate your app for offline mode
and try to recover any transactions that were going on behind the scenes. The code
below crawls the DOM for all of the external links and disables them, trapping users in
our offline app—
forever
!
function
processOffline
()
{
setupApp
();
// disable external links until we come back
// setting the bounds of app
disabledLinks
=
getUnconvertedLinks
(
document
);
// helper for onlcick below
var
onclickHelper
=
function
(
e
)
{
return
function
(
f
)
{
alert
(
'This app is currently offline and cannot access the hotness'
);
return
false
;
}
};
for
(
var
i
=
0
;
i
<
disabledLinks
.
length
;
i
++
)
{
if
(
disabledLinks
[
i
].
onclick
==
null
)
{
//alert user we're not online
disabledLinks
[
i
].
onclick
=
onclickHelper
(
disabledLinks
[
i
].
href
);
}
}
}
Okay, suppress your evil genius laugh, and let's get on to the good stuff. Now that the
app knows what connected state it's in, we can also check the type of connection when
it's online and adjust accordingly with the code below. In the comments, I listed typical
North American providers' download and latencies for each connection.
