There is a way to download an assets folder when the user "install" a PWA on his device? I have about 300MB of images (map tiles) that I need to pre-cache for a user, my user ll be in an area without connection. And I would like to know if this "installation" creates some local folder that I can download my images to, or unfortunately, I need to go native...
I already tried some libs that work with my map solution (leaflet), but those libs only cache PNGs in IndexedDB in blob format, I don't think that ll be a good solution for this massive data.
You can use a pre-fecth strategy in order to ensure all the static assets are downloaded and available in the cache when the service worker is installed:
const mapTilesToCache = [
'/mapFolder/',
];
const staticCacheName = 'tiles-cache';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(mapTilesToCache);
})
);
});
However keep in mind that this kind of strategy is typically used for the app shell files (much less than 300MB). If the service worker cannot download the resources you defined for the "install" phase, it will abort its installation.
Once your files are in the cache, you can serve them to the user:
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
// return the file from the cache
return response;
}
}).catch(error => {
// Respond with custom offline page
})
);
});
Related
I am trying to add a serviceworker to an existing React app with this filesystem layout:
Filesystem
Basically a bit of initialization code is stored in the public folder, and all code of importance is in the src folder. In the serviceWorker.js file, I made an array of filenames to cache and call that array in the 'install' event listener, and if I check DevTools I can see that the filenames are present in the cache: when I preview the data in Chrome DevTools however, I see that the code inside the cached files is all from index.html. In fact, I can add anything I want to the filename array and I will find it in cached storage only to find that it is storing the index.html code. It seems like no matter what file I try to add to the cache, only index.html gets loaded.
ServiceWorker.js:
let CACHE_NAME = "MG-cache-v2";
const urlsToCache = [
'/',
'/index.html',
'/src/App.js',
'/monkey'
];
self.addEventListener('install', function (event) {
//perform install steps
event.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
console.log('Opened MG_Cache');
return cache.addAll(urlsToCache);
}).catch(function (error) {
console.error("Error loading cache files: ", error);
})
);
self.skipWaiting();
});
self.addEventListener('fetch', function (event) {
event.respondWith(caches.match(event.request).then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(async function () {
const cacheNames = await caches.keys();
await Promise.all(
cacheNames.filter((cacheName) => {
//Return true if you want to remove this cache,
//but remember that caches are shared across the whole origin
return;
}).map(cacheName => caches.delete(cacheName))
);
})
})
Portion of index.html:
<script>
if ('serviceWorker' in navigator)
{
window.addEventListener('load', function () {
navigator.serviceWorker.register('serviceWorker.js').then(function (registration) {
// Registration was successful
console.log("ServiceWorker registration successful with scope: ", registration.scope);
}, function (err) {
// registration failed :
(console.log('ServiceWorker registration failed: ', err));
});
});
}
</script>
Google Devtools Preview:
All files are the same
I have tried a variety of naming strategies in the filename array but all have ended with the same result. At this point I'm at a complete loss.
EDIT: While this does not solve my problem, I found an answer to another problem that gives a little guidance. It seems like the server never finds the file I request and thus returns index.html. I tried placing the serviceWorker.js file in the src folder and moving the service worker registration to App.js and got an error:
`DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/src/') with script ('http://localhost:3000/src/serviceWorker.js'): The script has an unsupported MIME type ('text/html'). `
This suggests that the server somehow doesn't have access to the src folder, only public. Any idea why that may be?
An important piece of information I left out it that I'm using Create-React-App. Because of the enforced layout of the filesystem, the serviceWorker must be placed in the public folder: at the same time, the scope of service workers by default is the folder that they are placed in. According to this answer, changing the scope of the service worker to be a level above the folder that it is in requires adding to the HTTP header response of the service worker (not entirely sure what that means), and doing something like that assumes you have some form of a local server set up. Alas, thus far I have just been using npm start to test my app and pushing onto nsmp to make the site live, thus have negleted to do any form of server implementation myself (I know, not very smart of me).
My hotfix was to create a new temporary app with the npx create-react-app my-app --template cra-template-pwa command, copy all files pertaining to service workers from that app (serviceWorkerRegistration.js, service-worker.js, index.js, potentially setupTests.js), and paste them into my app. Then I could simply follow this tutorial. Now my site works offline.
I have a PWA made with HTML, CSS and JS with Node.js, everytime I change the styles.css of the app, I have to upload it again, I.e. change the port. For example in localhost:3000 it would have the old styling, but if I upload it to localhost:3100, the styling changed to the new one, how can I make it so that cached css files will be deleted and uploaded with the new ones?
This is my service worker:
var CACHE_NAME = 'version-1'; // bump this version when you make changes.
// Put all your urls that you want to cache in this array
var urlsToCache = [
'index.html',
'assets/logo-192.png',
'images/airplane.png',
'images/backspace.png',
'images/calcToggle.png',
'images/diamond.png',
'images/favicon.png',
'images/hamburger.png',
'images/history.png',
'images/like.png',
'images/love.png',
'images/menu2.png',
'images/menu3.png',
'images/menu4.png',
'images/menu5.png',
'images/menu6.png',
'images/menu7.png',
'images/menu8.png',
'images/plane.png',
'images/science.png',
'images/settings.png',
'images/trash.png',
'styles.css'
];
// Install the service worker and open the cache and add files mentioned in array to cache
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// keep fetching the requests from the user
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) return response;
return fetch(event.request);
})
);
});
self.addEventListener('activate', function(event) {
var cacheWhitelist = []; // add cache names which you do not want to delete
cacheWhitelist.push(CACHE_NAME);
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
If you are doing this for development just open your dev tools. Select the application tab, then the service worker panel.
Click the 'Bypass for Network' option.
I wrote an article on service worker dev best practices that might help:
https://love2dev.com/serviceworker/development-best-practices/
If you need to update in production that is different. I generally do a periodic HEAD request on the network asset (CSS file in your example). If the resource is newer than the cached version I update to the latest version as needed.
I have other techniques I use from time to time as well. It varies by application and the requirements, etc.
I transformed my React application into a PWA and it is working partially fine.
I followed this tutorial: https://medium.com/#toricpope/transform-a-react-app-into-a-progressive-web-app-pwa-dea336bd96e6
However this article only shows how to cache static data and I also need to store data stemming from the server, I could do this following the instruction of the first answer of this post: How can I cache data from API to Cache Storage in React PWA? and inserting the firebase adresses where the data is stored into the array urlsToCache, populated by the files that should be stored into the cache.
So far so good, however after the data be stored into the cache, the application stops fetching data from the server and loads the page only with data from the cache, even if the server is updated. This is what I need to fix.
In short, I need to fetch the data from the server, store it into the cache in order to use it when the application is offline and update the cache every time the server is reached.
I am trying to follow this guide, but without success: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#serving-suggestions
This is my worker.js file:
var CACHE_NAME = 'pwa-task-manager';
var urlsToCache = [
'/',
'/completed',
'/index.html',
'/static/js/main.chunk.js',
'/static/js/0.chunk.js',
'/static/js/1.chunk.js',
'/static/js/bundle.js',
'/calculadora',
'https://calc-marmo.firebaseio.com/clientes.json',
'https://calc-marmo.firebaseio.com/adm.json',
];
// Install a service worker
self.addEventListener('install', event => {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// Cache and return requests
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
// Update a service worker
self.addEventListener('activate', event => {
var cacheWhitelist = ['pwa-task-manager'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
Any help would be much appreciated.
This sound like you need a Network First strategy which is not mention in the cookbook. This strategy is similar to Network falling back to cache but additionally stores the response always in the cache.
Explanation: https://developers.google.com/web/tools/workbox/modules/workbox-strategies#network_first_network_falling_back_to_cache
Code sample (if you don't use workbox): https://gist.github.com/JMPerez/8ca8d5ffcc0cc45a8b4e1c279efd8a94
I've got static site (generated with Pelican) with a multilingual structure, e.g.
www.example.com/
www.example.com/index.html
www.example.com/page1.html
www.example.com/es/
www.example.com/es/index.html
www.example.com/es/page1.html
I've cached the JS and CSS and the index files with a service worker install event:
const staticCacheName = 'static-cache-v5';
const filesToCache = [
'/',
'/index.html',
'/es/index.html',
'/offline.html',
'static/js/main..js',
'static/css/styles.css',
]
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(staticCacheName).then((cache) => {
return cache.addAll(filesToCache);
})
);
self.skipWaiting();
});
and I'm using a cache, falling back to network strategy:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
The issue I have is when the www.example.com/es/index.html or es/offline.html is accessed offline and loading the CSS and JS files. The problem is that since the es/index.html files references the CSS and JS as ../static/css/styles.css and ../static/js/main.js, they can't find the files in the cache. I've tried to find a way to alter the request and response but so far I've failed. Any help?
Well, you can write some logic in your code where the caches.match(event.request) is changed to something like caches.match(event.request) || caches.match(*canonical-url*) (in pseudo-code). You have possibly had a bug in your code if you tried this already. Another option would be to cache the files twice – with their root-relative paths and their canonical "../" paths. This of course isn't optimal since cache is used twice.
I think the best option would be to generate your site so that it always uses root-relative static asset paths. Replace all "../static/bla" with "/static/bla" and everything should work out of the box very neatly :)
I'm having some problems on setting up a service worker for my website.
I only want to cache css/js/fonts and some images/svg, I don't want to cache the HTML since all of it is updated every minute.
It kinda works, but trying on my smartphone I keep getting the notification "Add to homescreen" even when I've already added it. And on the Chrome Dev app I don't get the Add button.
Also with the Lighthouse I get the following errors:
"Does not respond with a 200 when offline"
"User will not be prompted to Install the Web App, Failures: Manifest start_url is not cached by a Service Worker."
Right now my sw.js is like this. As you can see I commented the fetch part because it was caching the HTML and also the Cookies weren't working.
Is there around a simple Service Worker "template" to use?
const PRECACHE = 'app-name';
const RUNTIME = 'runtime';
// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
'/css/file.css',
'/js/file.js',
'/images/logo.png',
'/fonts/roboto/Roboto-Regular.woff2'
]
// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
event.waitUntil(
caches.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
);
});
// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches.keys().then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
}).then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
}));
}).then(() => self.clients.claim())
);
});
// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
// Skip cross-origin requests, like those for Google Analytics.
// if (event.request.url.startsWith(self.location.origin)) {
// event.respondWith(
// caches.match(event.request).then(cachedResponse => {
// if (cachedResponse) {
// return cachedResponse;
// }
// return caches.open(RUNTIME).then(cache => {
// return fetch(event.request).then(response => {
// // Put a copy of the response in the runtime cache.
// return cache.put(event.request, response.clone()).then(() => {
// return response;
// });
// });
// });
// })
// );
// }
});
I'm not sure why the install banner appears but the two errors given by lighthouse are related to the missing caching of the very start_url, propably index.html. So Lighthouse will always be telling you about those if you follow the caching strategy you described here.
I suggest you could try Workbox and their runtime caching. Runtime caching, in a nutshell, works like so: you specify urls like *.svg, *.css etc. and the SW caches them once the client first asks them. In the future, when the files are already cached, the SW serves them from the cache to the client. Basically you tell the SW to cache this and that kind of urls when it encounters them and not in advance.
Runtime caching could very well be accompanied by precaching (that may also be found from Workbox!) to cache a bunch of files.
Check it out here: https://workboxjs.org
They have a couple of examples and plugins for build tooling.