Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cannot cache all files in specific cases #104

Open
1 of 3 tasks
maitrungduc1410 opened this issue Sep 8, 2017 · 7 comments
Open
1 of 3 tasks

cannot cache all files in specific cases #104

maitrungduc1410 opened this issue Sep 8, 2017 · 7 comments
Labels

Comments

@maitrungduc1410
Copy link

maitrungduc1410 commented Sep 8, 2017

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
Copy link

mike-engel commented Sep 12, 2017

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
Copy link
Owner

goldhand commented Oct 7, 2017

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

@goldhand goldhand added the bug label Oct 7, 2017
@mike-engel
Copy link

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

@goldhand
Copy link
Owner

goldhand commented Oct 8, 2017

@mike-engel the whole config will help :)

@comonadd
Copy link

comonadd commented Oct 15, 2017

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
Copy link

sergeydt commented Feb 7, 2018

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants