A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. One of its key uses is to cache static assets, allowing your website to function offline or in poor network conditions.
Here's a step-by-step guide to creating an offline page:
1. Register a Service Worker:
- Create a Service Worker File:
- Create a new JavaScript file, e.g.,
sw.js
, and place it in your project's root directory.
- Create a new JavaScript file, e.g.,
- Register the Service Worker:
- Add the following JavaScript code to your main HTML file, typically in the
<head>
section:
if ('serviceWorker' in navigator) { window.addEventListener('load'
, () => { navigator.serviceWorker. register('sw.js') .then(registration => { console.log('Service Worker registered:', registration); }) .catch(error => { console.error('Service Worker registration failed:', error); }); }); } - Add the following JavaScript code to your main HTML file, typically in the
2. Cache Static Assets:
- Update
sw.js
:- Inside
sw.js
, use thecache
API to store static assets:
self.addEventListener('
install', event => { event.waitUntil( caches.open('my-cache-name') .then(cache => { return cache.addAll([ '/', '/index.html', '/style.css', '/script.js', // Add more files as needed ]); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request); }) ); }); - Inside
3. Create a Manifest File:
- Create a Manifest File:
- Create a new file named
manifest.json
in your project's root directory.
- Create a new file named
- Configure the Manifest File:
- Add the following JSON content to the manifest file:
{ "name": "My Offline App", "short_name": "My App", "description": "This app works offline!", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#3367D6", "icons": [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, // Add more icons as needed ] }
4. Add the Manifest Link:
- Link to the Manifest:
- Add a
<link>
tag to your HTML file's<head>
section:
<link rel="manifest" href="manifest.json">
- Add a
How It Works:
- Service Worker Registration: The browser registers the service worker, allowing it to intercept network requests.
- Caching Static Assets: The service worker caches static assets like HTML, CSS, and JavaScript files.
- Offline Access: When the user is offline, the browser serves the cached assets, allowing the website to function as expected.
- Manifest File: The manifest file provides metadata about your app, including icons and theme colors, enabling it to be installed as a standalone app on mobile devices.
By following these steps, you can create a robust offline experience for your users, ensuring that your website remains accessible even when they're not connected to the internet.
- https://www.fastly.com/blog/
google-chromes-alex-russell- on-service-workers-pwas-and- whats-next-mobile - https://tpiros.dev/blog/
adaptive-image-loading-based- on-network-speed/ - https://www.tutorialspoint.
com/building-progressive-web- applications-pwa-with-offline- support-in-javascript - https://github.com/BillKates/
react-memo - https://github.com/
FintanSammon/PWA
Fredag, november 15, 2024