I'm building a progressive web app using the Workbox library. There's an example on the Workbox doc which shows that the import statements can be omitted by using a constant.
Code with import statements:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst()
);
Code without import statements:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies; // same as const CacheFirst = workbox.strategies.CacheFirst
const {CacheableResponse} = workbox.cacheableResponse;
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst()
);
How is it possible to instantiate a CacheFirst object (new CacheFirst()) by using a constant instead of an import? Is this a ES6 feature or something Workbox specific? Couldn't find an answer on Google or SO. How does the CacheFirst object relate to the constant?
As I'm coming from PHP this construct is new to me.
Let's focus on one of the three lines.
import {CacheFirst} from 'workbox-strategies';
this looks for the module workbox-strategies and imports an exported member of it, so it has to look a little like this:
// in node_modules/workbox-strategies/index.js:
function CacheFirst(){
// implementation... - could also be a class with constructor before transpilation etc.
}
export CacheFirst;
importScriptsNow for the second example. Here the magic actually happens in
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
which has to do something like
// in https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js
// define global var workbox
var workbox = {};
// isolate rest of the declarations so they don't pollute the global namespace
(()=>{
function CacheFirst(){
// implementation... - could also be a class with constructor before transpilation etc.
}
workbox.strategies = {
CacheFirst: CacheFirst, //create a member named CacheFirst and assign the function CacheFirst to it - could use AutoProperties
}
})();
So after the importScripts() call you have a global workbox object. Now you just alias some members of it for easier access.
Using destructuring this looks like
const {CacheFirst} = workbox.strategies;
// create actual instance
const myCacheFirstStrat = new CacheFirst();
But you could also just use the global webpack object directly
const myCacheFirstStrat = new workbox.strategies.CacheFirst();
Does that answer your question?