Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
https://vanillawebdev.blogspot.com/2025/02/ripple-effect-css-js.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/02/offline-first-experience-setup.html
Offline-First Experience
February 16, 2025
2025
February
17
05:07 AM
Initial setup of offline-first experience for vanilla JS web app.
Registering A Service Worker
Service worker is reponsible for handling web requests when the user is offline. Service worker can only be registered within the same domain.
Files:
.
├── index.html
└── sw.jssw.js
self.addEventListener('message', function (e) {
if (e.data.action == 'skipWaiting') {
self.skipWaiting();
}
});
self.addEventListener('fetch', function (e) {
e.respondWith(
caches.match(e.request).then(function (resp) {
if (resp) return resp;
return fetch(e.request)
.then(function (r) {
return r;
})
.catch(function () {
console.error('Check connection.');
});
})
);
});index.html
<script>
// regiter service worker
if (typeof (navigator) !== 'undefined' && 'serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').catch(function (e) {
console.error(e);
});
}
</script>
</body>
</html>Files Caching Component
Next, you'll need a file caching component. Visit the following post for an example on how to build one:
***
Part of the usual setup:
https://www.blogger.com/comment/fullpage/post/8166404610182826392/201482050595954214 true
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
https://vanillawebdev.blogspot.com/2025/02/ripple-effect-css-js.html
https://vanillawebdev.blogspot.com/