Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Offline support with service worker #978

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open

Offline support with service worker #978

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
85a014b
feat: support offline with service worker
xtuc Nov 15, 2016
1bd6f2d
refactor(offline): use sw-toolbox
xtuc Nov 21, 2016
ef6d78b
fix(sw): removed pre-cached CSS
xtuc Nov 21, 2016
2d6207d
feat(sw): add external cache origins
xtuc Nov 21, 2016
2936fad
feat(sw): add cache version
xtuc Nov 21, 2016
53458ba
feat(sw): offline indicator
xtuc Nov 21, 2016
49ca43f
Merge remote-tracking branch 'upstream/master'
xtuc Nov 23, 2016
39b7233
fix(sw): remove Algolia response cache
xtuc Nov 24, 2016
3e0ba2e
fix(sw): limit cache and cache only doc
xtuc Nov 24, 2016
e8ff8b1
feat(sw): separe content and cdn cache
xtuc Nov 25, 2016
c79524c
fix(sw): update cache strategies
xtuc Nov 26, 2016
1e75370
feat(sw): improved offline indicator
xtuc Nov 26, 2016
ae14615
fix(sw): remove site precaching
xtuc Nov 27, 2016
5ce2a31
Merge remote-tracking branch 'upstream/master'
xtuc Nov 27, 2016
ac3f4dc
lint: use single quotes
xtuc Nov 29, 2016
25e916d
Update service-worker.js
xtuc Dec 3, 2016
c8f206f
Resolved conflicts
thenamankumar Nov 4, 2017
d32e376
Imported sw-toolbox from unpkg
thenamankumar Nov 5, 2017
687842e
Added Offline.md page
thenamankumar Nov 6, 2017
7c90808
Made Cache Pattern Network First
thenamankumar Nov 11, 2017
6d557eb
Made multiple var declarations
thenamankumar Nov 13, 2017
18d2580
Removed sw-toolbox.js
thenamankumar Nov 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<input type="checkbox" id="babel-toggle-search" class="babel-toggle-search-checkbox" />
<header class="navbar navbar-default navbar-fixed-top babel-nav" id="top" role="banner">

<div id="offline-indicator" class="hidden">
You are offline
</div>

<div class="container">
<a href="/" class="navbar-brand logo">Babel</a>
<div class="babel-navbar-toggles">
Expand Down
1 change: 1 addition & 0 deletions _sass/_main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ body {
@import "components/_tick-list.scss";
@import "components/_type.scss";
@import "components/_user.scss";
@import "components/_offline-indicator.scss";

@import "pages/_404.scss";
@import "pages/_blog.scss";
Expand Down
4 changes: 4 additions & 0 deletions _sass/components/_offline-indicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#offline-indicator {
text-align: center;
padding: 5px;
}
15 changes: 14 additions & 1 deletion scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,20 @@ $(document).ready(function() {
if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/service-worker.js').then(function() {
console.log('CLIENT: service worker registration complete.');
var offlineIndicator = $("#offline-indicator");

window.addEventListener('online', function() {
offlineIndicator.addClass("hidden");
});

window.addEventListener('offline', function() {
offlineIndicator.removeClass("hidden");
});

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly leaving here as a note in case helpful later :)

The navigator.{online/offline} events may not accurately indicate that you can or can't access the network. There are well documented gotchas where you might need additional means to check that you're really online. One is checking connection loss by making failed XHR requests (retry a request a few times, if it doesn't go through, you're definitely offline).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@addyosmani flipkart is awesome !

if (!navigator.onLine) {
offlineIndicator.removeClass("hidden");
}

}, function() {
console.log('CLIENT: service worker registration failure.');
});
Expand Down