PHandre_sentro
Journeyman
Marami siguro ditong web dev na alam na to pero share lang sa iba kasi bago yung technology.
Recently kasi naauso na yung Progressive Web Apps or PWAs. Simple lang yung PWA, characteristic nila is dapat fast loading, runs offline at mobile-first approach (pero di naman mobile-only, magka-iba kasi yun). Isa sa technologies na ginagamit para maging Progressive yung isang web app, gagamit na ng Service Worker. Yung service worker eh kagaya lang din ng ibang javascript na pwede mo ireference sa page tapos gagana siya kaya lang iba yung service workers kasi siya ay ineexecute in parallel dun sa iba pang scripts na ginagamit mo sa page. Powerful din ito kasi kaya nyang iintercept lahat ng requests na ginagawa ng client papunta sa server. Ang kagandahan nito is, pag naregister sa browser yung service worker mo pwede mo nang mahandle yung requests kahit offline ka. So ibig sabihin pwede mo icache lahat ng images or assets mo sa browser at gawin pa rin na accessible yung site kahit mabagal or walang internet.
Bale simple lang naman siya i-set up. Ireregister mo lang yung service worker sa lahat ng page sa site mo.
Halimbawa sa index.html mo ay ganito
So next naman syempre gagawin na natin yung /serviceworker.js
yung mga nasa taas sinet lang natin yung values like version number etc.
Tatlo yung event listeners na nandyan meron kapag ininstall yung service worker, yung isa naman pag nag fetch event(nag request ng page or assets) and yung isa updater kung sakaling iuupdate mo yung service worker mo. Bale kapag pala may additional ka na edits sa sw mo iedit mo lang yung version number tas mauupdate na siya. Browser na bahala magupdate.
Medyo kulang pa yan pero kung may tanong kayo sasagutin ko naman haha. Rush lang lol.
Recently kasi naauso na yung Progressive Web Apps or PWAs. Simple lang yung PWA, characteristic nila is dapat fast loading, runs offline at mobile-first approach (pero di naman mobile-only, magka-iba kasi yun). Isa sa technologies na ginagamit para maging Progressive yung isang web app, gagamit na ng Service Worker. Yung service worker eh kagaya lang din ng ibang javascript na pwede mo ireference sa page tapos gagana siya kaya lang iba yung service workers kasi siya ay ineexecute in parallel dun sa iba pang scripts na ginagamit mo sa page. Powerful din ito kasi kaya nyang iintercept lahat ng requests na ginagawa ng client papunta sa server. Ang kagandahan nito is, pag naregister sa browser yung service worker mo pwede mo nang mahandle yung requests kahit offline ka. So ibig sabihin pwede mo icache lahat ng images or assets mo sa browser at gawin pa rin na accessible yung site kahit mabagal or walang internet.
Bale simple lang naman siya i-set up. Ireregister mo lang yung service worker sa lahat ng page sa site mo.
Halimbawa sa index.html mo ay ganito
HTML:
<!Doctype html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript">
// I-check kung available yung service worker sa browser
if('serviceworker' in navigator){
// I-register na yung service worker file mo
navigator.serviceWorker.register('/serviceworker.js').then(reg=>{
// Kapag naging successful i-log sa console na naging successful yung pag register
console.log('Service Worker Registered Successfully!');
}).catch(err=>{
// Kapag hindi naman ay mag log sa console ng error
console.error(`Service Worker Registration Error: ${err}`);
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>So next naman syempre gagawin na natin yung /serviceworker.js
yung mga nasa taas sinet lang natin yung values like version number etc.
Tatlo yung event listeners na nandyan meron kapag ininstall yung service worker, yung isa naman pag nag fetch event(nag request ng page or assets) and yung isa updater kung sakaling iuupdate mo yung service worker mo. Bale kapag pala may additional ka na edits sa sw mo iedit mo lang yung version number tas mauupdate na siya. Browser na bahala magupdate.
Code:
'use strict';
// Current na version ng cache mo
var cn = 'v1';
// Ilagay yung cache version na iwwhitelist
var cacheWhiteList = ['v1'];
// Listahan ng mga assets na kailangan i-cache
var assetsList = ['/offline.php'];
// Install Event
self.addEventListener('install',(event)=>{
// Open the Cache
event.waitUntil(caches.open(cn)
.then((cache)=>{
// Fetch All Assets
return cache.addAll(assetsList);
})
);
});
// Fetch Event
self.addEventListener('fetch', (event)=>{
event.respondWith(
// Try the cache
caches.match(event.request).then((response)=>{
// Fall back to network
return response || fetch(event.request);
}).catch(()=>{
return caches.match('/offline.php');
})
);
});
// Remove Old Caches
self.addEventListener('activate', (event)=>{
event.waitUntil(
caches.keys().then((keyList)=>{
return Promise.all(keyList.map((key)=>{
if(cacheWhiteList.indexOf(key) === -1){
return caches.delete(key);
}
}));
})
);
});Medyo kulang pa yan pero kung may tanong kayo sasagutin ko naman haha. Rush lang lol.