Skip to content

Commit e9aa322

Browse files
elangosundarelangosundar
committed
add pwa
1 parent 4c50ac0 commit e9aa322

File tree

6 files changed

+150
-2
lines changed

6 files changed

+150
-2
lines changed

‎public/android-chrome-512x512.png‎

51.5 KB
Loading

‎public/favicon.ico‎

24.3 KB
Binary file not shown.

‎public/manifest.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"short_name": "10secondsofcode",
3+
"name": "10secondsofcode",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "android-chrome-512x512.png",
12+
"sizes": "512x512",
13+
"type": "image/png"
14+
}
15+
],
16+
"start_url": "./index.html",
17+
"display": "standalone",
18+
"theme_color": "#000000",
19+
"background_color": "#ffffff"
20+
}

‎src/index.html‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,28 @@
99
<meta name="msapplication-TileColor" content="#3ab78c">
1010
<meta property="og:title" content="10secondsofcode - The Modern Reactjs Tutorial ">
1111
<meta name="description" content="10secondsofcode - Modern ReactJs Tutorial: Reactjs online tutorials, examples and advanced concepts">
12-
<link rel="canonical" href="#">
12+
<link rel="canonical" href="#">
13+
<meta name="theme-color" content="#000000">
14+
<link rel="manifest" href="./public/manifest.json">
15+
<link rel="shortcut icon" href="./public/favicon.ico">
1316
</head>
1417
<body>
1518
<div id="app">
1619
</div>
20+
<script>
21+
if ('serviceWorker' in navigator) {
22+
window.addEventListener('load', function() {
23+
navigator.serviceWorker.register('serviceWorker.js').then(function(registration) {
24+
console.log('Worker registration successful', registration.scope);
25+
}, function(err) {
26+
console.log('Worker registration failed', err);
27+
}).catch(function(err) {
28+
console.log(err);
29+
});
30+
});
31+
} else {
32+
console.log('Service Worker is not supported by browser.');
33+
}
34+
</script>
1735
</body>
1836
</html>

‎src/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,7 @@ import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
66
import './style.css';
77
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
88
import 'jquery';
9+
import registerServiceWorker from './serviceWorker';
910

10-
ReactDOM.render(<App />, document.getElementById("app"));
11+
ReactDOM.render(<App />, document.getElementById("app"));
12+
registerServiceWorker();

‎src/serviceWorker.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
// In production, we register a service worker to serve assets from local cache.
2+
3+
// This lets the app load faster on subsequent visits in production, and gives
4+
// it offline capabilities. However, it also means that developers (and users)
5+
// will only see deployed updates on the "N+1" visit to a page, since previously
6+
// cached resources are updated in the background.
7+
8+
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9+
// This link also includes instructions on opting out of this behavior.
10+
11+
const isLocalhost = Boolean(
12+
window.location.hostname === 'localhost' ||
13+
// [::1] is the IPv6 localhost address.
14+
window.location.hostname === '[::1]' ||
15+
// 127.0.0.1/8 is considered localhost for IPv4.
16+
window.location.hostname.match(
17+
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18+
)
19+
);
20+
21+
export default function register() {
22+
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23+
// The URL constructor is available in all browsers that support SW.
24+
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25+
if (publicUrl.origin !== window.location.origin) {
26+
// Our service worker won't work if PUBLIC_URL is on a different origin
27+
// from what our page is served on. This might happen if a CDN is used to
28+
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29+
return;
30+
}
31+
32+
window.addEventListener('load', () => {
33+
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34+
35+
if (!isLocalhost) {
36+
// Is not local host. Just register service worker
37+
registerValidSW(swUrl);
38+
} else {
39+
// This is running on localhost. Lets check if a service worker still exists or not.
40+
checkValidServiceWorker(swUrl);
41+
}
42+
});
43+
}
44+
}
45+
46+
function registerValidSW(swUrl) {
47+
navigator.serviceWorker
48+
.register(swUrl)
49+
.then(registration => {
50+
registration.onupdatefound = () => {
51+
const installingWorker = registration.installing;
52+
installingWorker.onstatechange = () => {
53+
if (installingWorker.state === 'installed') {
54+
if (navigator.serviceWorker.controller) {
55+
// At this point, the old content will have been purged and
56+
// the fresh content will have been added to the cache.
57+
// It's the perfect time to display a "New content is
58+
// available; please refresh." message in your web app.
59+
console.log('New content is available; please refresh.');
60+
} else {
61+
// At this point, everything has been precached.
62+
// It's the perfect time to display a
63+
// "Content is cached for offline use." message.
64+
console.log('Content is cached for offline use.');
65+
}
66+
}
67+
};
68+
};
69+
})
70+
.catch(error => {
71+
console.error('Error during service worker registration:', error);
72+
});
73+
}
74+
75+
function checkValidServiceWorker(swUrl) {
76+
// Check if the service worker can be found. If it can't reload the page.
77+
fetch(swUrl)
78+
.then(response => {
79+
// Ensure service worker exists, and that we really are getting a JS file.
80+
if (
81+
response.status === 404 ||
82+
response.headers.get('content-type').indexOf('javascript') === -1
83+
) {
84+
// No service worker found. Probably a different app. Reload the page.
85+
navigator.serviceWorker.ready.then(registration => {
86+
registration.unregister().then(() => {
87+
window.location.reload();
88+
});
89+
});
90+
} else {
91+
// Service worker found. Proceed as normal.
92+
registerValidSW(swUrl);
93+
}
94+
})
95+
.catch(() => {
96+
console.log(
97+
'No internet connection found. App is running in offline mode.'
98+
);
99+
});
100+
}
101+
102+
export function unregister() {
103+
if ('serviceWorker' in navigator) {
104+
navigator.serviceWorker.ready.then(registration => {
105+
registration.unregister();
106+
});
107+
}
108+
}

0 commit comments

Comments
 (0)