Search code examples
progressive-web-appsworkbox

use workbox without using cdn

Does anybody know how to use workbox without getting it from the CDN? I tried this...

add workbox-cli to my dependencies:

    "workbox-cli": "^3.6.3"

which gets me all of the following dependencies

$ ls node_modules | grep workbox
workbox-background-sync
workbox-broadcast-cache-update
workbox-build
workbox-cacheable-response
workbox-cache-expiration
workbox-cli
workbox-core
workbox-google-analytics
workbox-navigation-preload
workbox-precaching
workbox-range-requests
workbox-routing
workbox-strategies
workbox-streams
workbox-sw

Then I replaced this line in the examples

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');

with this

importScripts('workbox-sw.js');

after copying node_modules/workbox-sw/build/workbox-sw.js to the public folder

But now I realise by looking at the network tab, that that file still gets all the other modules from the cdn

network tab

(I thought it would be build with everything inside it.)

Can anybody tell me if there is an npm package somewhere that already has everything inside it? Or should I copy the modules I need from the npm folder, and somehow tie them all together myself? Or do I have to use the webpack plugin? (which I guess will only bundle the modules that I use)

Solution

  • (Update: Workbox v5 makes the process of using a local copy of the Workbox runtime much simpler, and in most cases, it's the default.)

    There's one more step that's required. The "Using Local Workbox Files Instead of CDN" has the details:

    If you don’t want to use the CDN, it’s easy enough to switch to Workbox files hosted on your own domain.

    The simplest approach is to get the files via workbox-cli's copyLibraries command or from a GitHub Release, and then tell workbox-sw where to find these files via the modulePathPrefix config option.

    If you put the files under /third_party/workbox/, you would use them like so:

    importScripts('/third_party/workbox/workbox-sw.js');

workbox.setConfig({modulePathPrefix: '/third_party/workbox/'});

    With this, you’ll use only the local Workbox files.