Recently, I stumbled upon Eruda, a mobile bookmarklet that allows mobile users to essentially have a developer console on their site. I wanted to make it usable offline, but this is proving to be a challenge. In this article, we will explore the key concepts and steps required to make Eruda and other similar script-based tools usable offline.
Understanding the Concept
When you access a website, your browser loads the HTML, CSS, and JavaScript files required to display the content. However, when you use a bookmarklet like Eruda, it relies on external scripts that are not part of the website's files. This is where the challenge lies, as these external scripts need to be available offline for the bookmarklet to function.
Making Scripts Available Offline
To make scripts usable offline, you need to store them locally on the user's device. One way to do this is by using a service worker. A service worker is a type of script that runs in the background and can intercept network requests and cache the response. This means that when the user accesses the site offline, the service worker can serve the cached response instead of making a network request.
Setting Up a Service Worker
To set up a service worker, you need to create a new file called "service-worker.js" and register it in the HTML file. Here's an example:
Once the service worker is registered, you can use it to cache the external scripts that the bookmarklet requires. Here's an example of how to cache a script:
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll([
'https://example.com/script.js'
]);
})
);
});
This code caches the script located at "
Storing the Bookmarklet Locally
The next step is to store the bookmarklet itself locally on the user's device. One way to do this is by creating a web app manifest file. A web app manifest file is a JSON file that describes the app's name, icons, and other metadata. It also allows you to install the app as a home screen shortcut on mobile devices.
Here's an example of a web app manifest file:
{
"name": "My App",
"short_name": "My",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Once you've created the web app manifest file, you can register it in the HTML file using the following code:
Now, when the user visits the site, they will be prompted to install the app as a home screen shortcut. Once installed, the bookmarklet will be available offline.
Caching the Bookmarklet
The final step is to cache the bookmarklet itself using the service worker. This can be done by adding the bookmarklet URL to the cache when the service worker is installed. Here's an example:
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll([
'https://example.com/script.js',
'/path/to/bookmarklet.js'
]);
})
);
});
Now, when the user accesses the site offline, the service worker will serve the cached bookmarklet instead of making a network request.
- Understand the concept: External scripts used by bookmarklets need to be available offline for the bookmarklet to function.
- Set up a service worker: Use a service worker to cache the external scripts required by the bookmarklet.
- Store the bookmarklet locally: Use a web app manifest file to install the app as a home screen shortcut and store the bookmarklet locally.
- Cache the bookmarklet: Use the service worker to cache the bookmarklet URL.
References: