cannot cache all files in specific cases

[maitrungduc1410]

BEFORE YOU SUBMIT please read the following:

• I'm submitting a bug report
• I'm submitting a feature request
• I'm submitting a support request

webpack version:
3.5.6

sw-precache-webpack-plugin version:
0.11.4

Please tell us about your environment:
OSX 10.12.5

Browser: [Chrome 61.0.3163.79]

Current behavior:
I'm currently using Vuejs with Laravel, and I want to use this sw-precache-webpack-plugin to cache my site, but there is a problem:

• I import some of my own .js file (which I write by myself) into main.js (this is main file of Vue including everything of site), when I build my project, there is no main.js in cacheConfig of service-worker.js file
• But if I remove all those things and rebuild, main.js will be in service-worker.js

Could anyone help me? many thanks!

[mike-engel]

I've been seeing this as well. I have a basic react + webpack project.

Details

Development precache tuples

[
  [
    "/account-settings.js",
    "8c8ad38974cd2ef4f26ab978889fdc8e"
  ],
  [
    "/assets/android-icon.png",
    "e0bed5d273cfe7503fb8e7a92bdd149c"
  ],
  [
    "/assets/apple-touch.png",
    "80420cb40a6a09b476493ccead6f1e67"
  ],
  [
    "/assets/favicon-16x16.png",
    "7dd31e5ac56bd0caa58e43e1cbe130b6"
  ],
  [
    "/assets/favicon-32x32.png",
    "57e1ec3cab1af2a0767c4d332485274b"
  ],
  [
    "/assets/favicon-96x96.png",
    "f594d12a05974977b7aa9505182e3b7e"
  ],
  [
    "/assets/manifest.json",
    "a0b5f3d2e1ca116b59071239c0cc7cc2"
  ],
  [
    "/assets/recent-icon.svg",
    "964ce2071aa26e5b078f1fd904d81fa3"
  ],
  [
    "/assets/search-icon.png",
    "43716eb84a00089c04b46eae19212066"
  ],
  [
    "/assets/service_resume_bot.svg",
    "600f25c6240d677862a957303a79d79e"
  ],
  [
    "/core-js.js",
    "3fec4f50d261da1e5507233821563c85"
  ],
  [
    "/index.html",
    "ebd6068e75e76f80762507b5e0e0dff6"
  ],
  [
    "/onboarding.js",
    "cd4b15d1320d056e7170977840152a44"
  ],
  [
    "/organization-admin.js",
    "4bbbe6b33c14f6b7ed641ac98e54e343"
  ],
  [
    "/volunteer.js",
    "0f24fd991945942276fb695680dbc14f"
  ],
  [
    "/whatwg-fetch.js",
    "6ca6d2da3d8d941341622c69e33b4e0c"
  ]
]

Production precache tuples

[
  [
    "/account-settings.ec04a0e2521f1c2d3dd6.js",
    "3dbe05cee06f281b9664194eb376a905"
  ],
  [
    "/assets/android-icon.png",
    "e0bed5d273cfe7503fb8e7a92bdd149c"
  ],
  [
    "/assets/apple-touch.png",
    "80420cb40a6a09b476493ccead6f1e67"
  ],
  [
    "/assets/favicon-16x16.png",
    "7dd31e5ac56bd0caa58e43e1cbe130b6"
  ],
  [
    "/assets/favicon-32x32.png",
    "57e1ec3cab1af2a0767c4d332485274b"
  ],
  [
    "/assets/favicon-96x96.png",
    "f594d12a05974977b7aa9505182e3b7e"
  ],
  [
    "/assets/manifest.json",
    "a0b5f3d2e1ca116b59071239c0cc7cc2"
  ],
  [
    "/assets/recent-icon.svg",
    "964ce2071aa26e5b078f1fd904d81fa3"
  ],
  [
    "/assets/search-icon.png",
    "43716eb84a00089c04b46eae19212066"
  ],
  [
    "/assets/service_resume_bot.svg",
    "600f25c6240d677862a957303a79d79e"
  ],
  [
    "/core-js.4df97506fcd7826e70a2.js",
    "51b6eb8140066af80c564a792c4a52ee"
  ],
  [
    "/css/base.0789f5c8232733a45fac.css",
    "19d2dbfb2e051022919d24f6f90c77f8"
  ],
  [
    "/index.html",
    "38282612e2f0b5f3b05752cb0f496c6b"
  ],
  [
    "/main.0789f5c8232733a45fac.js",
    "e33f48898b6c1795cdcb5085e84edef5"
  ],
  [
    "/onboarding.989b87f31c3c3f3da81d.js",
    "63def923bb18730e471b4c14d00ad60c"
  ],
  [
    "/organization-admin.588e4af4cf1d6f73ae1a.js",
    "aeaba8c2c438f2f584b18942e2f9f2f8"
  ],
  [
    "/vendor.813f94fe79abb78cfd6b.js",
    "b0acbc1412b93f385e051251227c9e37"
  ],
  [
    "/volunteer.d4e42a76d0174b084b18.js",
    "588695f24858dae3b9d22048949bc6d2"
  ],
  [
    "/whatwg-fetch.9f032fe556e0379c3038.js",
    "a87bfc09bb4c5a15bce1ae285c1e67af"
  ]
]

Summary

It's a lot to look through, but here's a summary:

• Development has 16 tuples, while production has 19
• Development doesn't include main.js, base.css, or vendor.js
  • vendor is prod-only via common chunks plugin
  • base.css is also probably ok, since that's extracted to a file in prod with the extract text plugin
• This plugin is included in both the dev and prod webpack configs via a shared config (so no difference)

I'm guessing this is something to do with the way webpack emits the bundle names, but I haven't had time to dig into it yet.

[goldhand]

Can either @mike-engel or @maitrungduc1410 paste your webpack configs?

[mike-engel]

@goldhand do you want the entire webpack config, or just the part with the sw plugin?

[goldhand]

@mike-engel the whole config will help :)

[comonadd]

I agree. The same thing happens to me.

I have the following Webpack entry configuration:

entry: {
  appLoader: path.resolve(srcDirPath, 'appLoader.ts'),
  main: path.resolve(srcDirPath, 'index.tsx'),
  serviceWorker: path.resolve(srcDirPath, 'serviceWorker.ts'),
},

Every entry is getting added to the cache list except the main entry.

I've also tried to rename the main entry to the index entry. The same thing happens also.

[sergeydt]

The problem might be in case when main.js file has more than 2 MB size.

https://github.com/GoogleChromeLabs/sw-precache/blob/2ee24a96bb4812e83f47f6859361ba5e1bd535f5/README.md#maximumfilesizetocacheinbytes-number

You can pass this option to SWPrecacheWebpackPlugin

[maitrungduc1410]

Dear all,
After a long time now I'm back to this problem and luckily the solution of @sergeydt is perfect,
my file too big 4MB. I increase the maximumFileSizeToCacheInBytes, then it works.
Thank you all!