Offline-First Experience

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.js

sw.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:

• File Caching Component

***

Part of the usual setup:

• Make Your Web App Installable