DEV Community

How to make Your Website work offline 🌐

Sh Raj on April 05, 2024

Know More :- https://codexdindia.blogspot.com/2024/04/how-to-make-your-website-work-offline.html Sample Website :- https://sh20raj.github.io/offl...

Read full post

Sebastian Christopher • Apr 6

Awesome post. We really need to spread the word about this stuff. Might I suggest adding to the post - "what you’re actually building" - a PWA. (Progressive Web App)🙂. Another thing to consider, offline only works if the user initially had WiFi while visiting your website, for it to download the service worker. 😉

Sh Raj • Apr 6

Obviously 😊

Anita Olsen • Apr 5

Thank you so much for sharing this! This is AWESOME stuff! ✨

If I may? I believe your title would be in better English if you wrote "work" instead of "used"? and the sentence would sound much better if you wrote the following instead: "How to Make Your Website Work Without Internet" or "How to Make Your Website Work Offline" 🙂

Keep up the good work! ✨

Sh Raj • Apr 6

Thanks for the Work 😊

Anita Olsen • Apr 6

You are very welcome! 😀

Sh Raj • Apr 6

Updated the title to yours and
Glad to know that it helped you ♥️

Best Codes • Apr 6

Nice article! I recently wrote an article about the same thing here:
dev.to/best_codes/what-is-a-servic...

What is a Service Worker? ✨🦸

Best Codes ・ Mar 26

#webdev #javascript #programming #tutorial

Raziel Rodrigues • Apr 7

Perfect

Sh Raj • Apr 7

Thanks for the appreciation 😇

King Tony • Apr 7

Damn buddy 😊
I so much love this article.

Sh Raj • Apr 7

Thanks for the compliment brother 😇

Nicholasbalette • Apr 11

So many to learn , there is always a way to go.

Mayank Thakur • Apr 9

Awesome content

Testy Bryan • Apr 9

Wow, I've learned a lot... Thanks so much

Trieu.iv • Apr 12 • Edited

// app.js

if ("serviceWorker" in navigator && window.location.protocol === "https:") {
        navigator.serviceWorker
            .register("/ServiceWorker.js")
            .then((registration) => {
                if (registration.waiting) {
                    registration.waiting.postMessage("skipWaiting");
                }
            })
            .catch((error) => {
                console.error('Service Worker registration failed:', error);
            });
    }

// ServiceWorker.js

// I use workbox for more options
import { clientsClaim, cacheNames } from 'workbox-core';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies';
import { precacheAndRoute, getCacheKeyForURL } from 'workbox-precaching';
import { ExpirationPlugin } from 'workbox-expiration';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
// import * as googleAnalytics from 'workbox-google-analytics';
// import * as navigationPreload from 'workbox-navigation-preload';

clientsClaim();
self.skipWaiting();

self.addEventListener('activate', event => {
    event.waitUntil(async function () {
        const userCacheNames = await caches.keys();
        await Promise.all(userCacheNames.map(async cacheName => {
            if (!Object.values(cacheNames).includes(cacheName)) {
                return await caches.delete(cacheName);
            }
            return await Promise.resolve();
        }));
        // Enable navigation preload.
        // https://developer.chrome.com/docs/workbox/modules/workbox-navigation-preload/
        // https://web.dev/navigation-preload/
        // Feature-detect
        if (self.registration.navigationPreload) {
            // Enable navigation preloads!
            await self.registration.navigationPreload.enable();
        }
    }());
});

// if (typeof Workbox !== 'undefined') {
const revision = Date.now().toString();

precacheAndRoute([
    { url: '/favicon.ico', revision: revision },
    { url: '/favicon.svg', revision: revision }
]);

registerRoute(
    ({ url }) =>
url.origin === 'https://live-tv-channels.org' &&
        url.pathname.startsWith('/assets/') &&
        url.pathname.match(/\.(png|jpg|jpeg|svg|gif|webp|css|js|ico|woff2|ttf)$/),
    new StaleWhileRevalidate({
        cacheName: 'assets',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [0, 200],
            }),
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60, // Cache for 7 days
            }),
        ],
        // fallbackTo: 'network', // Fallback to network if no update found
    })
);```

Jill Johnson • Apr 9

A very good idea indeed! I was going through some Windows 2000 cd's and found the html for those animated sites, flash, and pdf cookbooks made into exe's without too much coding, although flash was a beast to get through...and the cd's are still in good condition. I wonder if they have any value beyond becoming melted-down faux mosaic tiles and jewelry, but that is another question altogether. Auto-play cd's made a nice little portfolio business card on the road and at events. I miss w2k and cds.