Closed AlonsoK28 closed 4 years ago
@AlonsoK28 Hi! First. In latest version of workbox createHandlerForURL
renamed to createHandlerBoundToURL
.
Than check this.
Service worker must be a separate file and you need register this file as service worker. (Basically injectManifest
create your service-worker file and you just need correct register him)
Thanks for answering the question, @TheForsakenSpirit!
There is more info on the new method name at https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v4#navigation_route_changes
@AlonsoK28 Hi! First. In latest version of workbox
createHandlerForURL
renamed tocreateHandlerBoundToURL
.Than check this. Service worker must be a separate file and you need register this file as service worker. (Basically
injectManifest
create your service-worker file and you just need correct register him)
Thanks for your answer
Im still triying to configure the SW on my project
Ive added the following
Register the SW
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('service-worker.js');
});
}
service-worker.js changed function name to createHandlerBoundToURL
import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin';
import { CacheFirst } from 'workbox-strategies/CacheFirst';
import { createHandlerBoundToURL } from 'workbox-precaching/createHandlerBoundToURL'; //<--renamed from createHandlerForURL
import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
import { NavigationRoute } from 'workbox-routing/NavigationRoute';
import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
import { registerRoute } from 'workbox-routing/registerRoute';
precacheAndRoute(self.__WB_MANIFEST);
registerRoute(
new NavigationRoute(createHandlerBoundToURL('index')) //<--renamed from createHandlerForURL
);
But I got this error when compile to production
Error in console
**Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost/my-project/') with script ('http://localhost/my-project/service-worker.js'): ServiceWorker script evaluation failed**
and my service-worker.js is this
// Add any other logic here as needed.
import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin';
import { CacheFirst } from 'workbox-strategies/CacheFirst';
import { createHandlerBoundToURL } from 'workbox-precaching/createHandlerBoundToURL';
import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
import { NavigationRoute } from 'workbox-routing/NavigationRoute';
import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
import { registerRoute } from 'workbox-routing/registerRoute';
precacheAndRoute(self.__WB_MANIFEST);
registerRoute(
new NavigationRoute(createHandlerBoundToURL('index'))
);
registerRoute(/^https:\/\/m.media-amazon.com\/images/, new CacheFirst({
cacheName: 'amazon-images',
matchOptions: {
ignoreVary: true,
},
plugins: [new ExpirationPlugin({
maxEntries: 500,
maxAgeSeconds: 63072e3,
purgeOnQuotaError: true,
}), new CacheableResponsePlugin({
statuses: [0, 200]
})]
}));
registerRoute(/^https:\/\/res.cloudinary.com\/my-project\/image/, new CacheFirst({
cacheName: 'product-images',
matchOptions: {
ignoreVary: true,
},
plugins: [new ExpirationPlugin({
maxEntries: 500,
maxAgeSeconds: 63072e3,
purgeOnQuotaError: true,
}), new CacheableResponsePlugin({
statuses: [0, 200]
})]
}));
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
Hmm... I don`t see any problems with your code. @AlonsoK28 Can you try to eval your service worker code to see detailed problem?
I guess there is an problem with compilation and injection point related to different string marks "
or '
.
@AlonsoK28, please make sure you're following the steps in https://developers.google.com/web/tools/workbox/guides/using-bundlers to bundle up the service worker code, as the unbundled JS module imports can't be used natively in a service worker.
Library Affected: workbox-precaching/createHandlerForURL
Browser & Platform: All browsers for me
Issue or Feature Request Description: I´m triying to create cache-first service worker config to save some assets used in my project
Following this example https://gist.github.com/jeffposnick/fc761c06856fa10dbf93e62ce7c4bd57 i´m getting the following error
ERROR in ./service-worker.js Module not found: Error: Can't resolve 'workbox-precaching/createHandlerForURL' in 'C:\xampp\htdocs\my-project'
I´m using mainly using webpack 4 in my project but I see that I have the lastest workbox 5 installed, this is correct? Or I need to use workbox 4 dependencies?
When reporting bugs, please include relevant JavaScript Console logs and links to public URLs at which the issue could be reproduced.
This is my webpack 4 config
webpack.config.prod.js
webpack.comon.js
service-worker.js
package.json
index.js