Convert "Import" to "Const" when using WorkBox from Local

Library Affected: workbox-navigation-preload

Browser & Platform: “all browsers”

Issue or Feature Request Description: Hello, im trying to use workbox from my localhost instead of CDN, i understand that in this case i have to use and convert “Import” to “Const” as it’s been mentioned here: LINK. when i convert this line of code : import {CacheableResponse} from 'workbox-cacheable-response'; to this : const {CacheableResponse} = workbox.cacheableResponse; at it seems to be correct with no error.

but i have some trouble converting this line to Const: import * as navigationPreload from 'workbox-navigation-preload'; as it been mentioned here : LINK (creating an offline page fallback). i’ve tried : const {navigationPreload} = workbox.navigationPreload; but it’s not working and it drops an Error in Console : Uncaught TypeError: Cannot read property 'enable' of undefined

can any of you guys give me a hint on how can i convert the codes like that (mentioned in WorkBox Documentation) when i’m using workbox locally ?

i appreciate it 😉

[jeffposnick]

I don’t think that’s the right approach for what you describe. Using workbox-precaching implies that you have a build process set up to generate the list of assets to precache, and that doesn’t appear to be the case based on your example.

The easiest approach would probably be to follow the examples from workbox-recipes, along the lines of:

const {NetworkOnly, CacheOnly} = workbox.strategies;
const {registerRoute} = workbox.routing;
const {offlineFallback, warmStrategyCache} = workbox.recipes;
const {enable} = workbox.navigationPreload;

enable();

offlineFallback({
  pageFallback: '/offline/index.html',
});

// This route will make use of the navigation preload if online.
// If offline, the offlineFallback logic will kick in.
registerRoute(
  ({request}) => request.mode === 'navigate',
  new NetworkOnly(),
);

const offlineResourcesStrategy = new CacheFirst({
  cacheName: 'offline-resources',
});
// This will populate the cache of offline resources.
warmStrategyCache({
  strategy: offlineResourcesStrategy,
  urls: [
    '/offline/style.css',
    '/offline/logo.png',
    // Add any other URLs that are referenced in /offline/index.html
  ],
})

// This route will match all of the resource requests that start with /offline/
// and fulfill them from the cache.
registerRoute(
  ({url}) => url.pathname.startsWith('/offline/'),
  offlineResourcesStrategy
);

[jeffposnick]

The equivalent statement would be

const {enable} = workbox.navigationPreload;

// The call enable() to turn on navigation preload.