Issues using a default offline fallback about sw-precache-webpack-plugin HOT 12 CLOSED

If you've got a URL (like /, for the top-level URL) whose contents is uniquely defined by one or more non-HTML files on disk, you could use the dynamicUrlToDependencies option to let sw-precache know. (I'm coming at this from the point of view of the underlying sw-precache library, but I'm assuming the concepts translate through to the Webpack wrapper.)

You can see an example of this sort of configuration at https://github.com/GoogleChrome/sw-precache/blob/master/app-shell-demo/gulpfile.babel.js#L129, though again this isn't using the Webpack wrapper, so the syntax is likely to be different. But that's the general idea—you tell sw-precache that a given URL should be invalidated whenever any of the underlying dependencies change, and sw-precache will take care of caching and keeping that URL up to date.

from sw-precache-webpack-plugin.

Nailed it to! The reason I lost all my hair was because I didn't read the manual for service workers... The service worker can only intercept requests for resources from its own path and deeper. So a service worker living att /dist/sw.js can only intercept requests that starts with /dist/... So I moved it to /sw.js, and now everything works. Thanks!

from sw-precache-webpack-plugin.

I am using the Lighthouse chrome plugin, to validate my PWA-status. And I'm stuck on the "URL responds with a 200 when offline", that always fails. I think that its actually what @selaromi is trying to do as well. Is it possible with this plugin? I have no hair left now, after trying all sort of things... :-)

Thanks for an awesome plugin btw!

from sw-precache-webpack-plugin.

Thanks to both of you ! It's working now with the dynamicUrlToDependencies option :)

Here is my very simple config :

new SWPrecacheWebpackPlugin({
        cacheId: 'react-universally-pwa',
        filename: 'react-universally-pwa.sw.js',
        filepath: path.resolve(appRootPath, `./public/react-universally-pwa.sw.js`),
        maximumFileSizeToCacheInBytes: 4194304,
        dynamicUrlToDependencies: {
          '/': [
            ...glob.sync(path.resolve(appRootPath, './build/client/*.js'))
          ]
        },
})

from sw-precache-webpack-plugin.

FWIW, speaking from a sw-precache perspective, what I'd expect is that normally the page would already be precached, in which case the fact that you're offline shouldn't matter; you're always serving it cache first.

If there's a reason why you don't want to precache a given page, and you want to implement some additional logic like this to display an offline page in responsible to a navigation, then it would be best to do that as a standalone JavaScript file that was then passed in to the importScripts option. That standalone code will be added to the service worker global scope when the generated service worker file runs.

But again, you should confirm that you actually do need to display a custom offline page, since configuring this plugin to generate a service worker which makes your actual page available offline could be preferable.

from sw-precache-webpack-plugin.

Re: @PCreations's question, the reason you see the request in the Network tab for the service worker file is explained at http://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours/38854905#38854905

It's an attempt to check for a fresh service worker file, and it's perfectly normal for it to fail when you're offline. The request checking for updates to the service worker file bypasses the service worker itself, so seeing an error doesn't mean that your service worker isn't working.

(You might be having some other problem with your service worker configuration, but I just wanted to clarify why you're seeing errors for react-universally-pwa.sw.js.)

from sw-precache-webpack-plugin.

@selaromi this plugin is not for general service worker usage and does not have any offline error handling currently, it is specialized in the precaching of static assets. That said, I can see how an offline response behavior would be very useful. It would not be hard to write this behavior either, I'm curious what behavior you would expect to happen. Can you explain what you would hope to have happen? e.g, if the app had a network error: what information should be given to the client? What role should this plugin have in that handling?

Maybe the config can accept an errorCallback option that accepted the error as an argument... Just throwing some ideas out there.

from sw-precache-webpack-plugin.

Thanks @jeffposnick was just about to ping you in here 😆

from sw-precache-webpack-plugin.

I have the exact same problem. Files are correctly served from cache when the server is online, but when offline I get the ERR_INTERNET_DISCONNECTED error from Chrome, and errors are printed in the console telling me that the service worker file can't be fetch, why does it try to "fetch itself" ?

GET http://localhost:1337/ net::ERR_INTERNET_DISCONNECTED
react-universally-pwa.sw.js:1 An unknown error occurred when fetching the script.
react-universally-pwa.sw.js:1 GET http://localhost:1337/react-universally-pwa.sw.js net::ERR_INTERNET_DISCONNECTED

from sw-precache-webpack-plugin.

In fact the problem is i'm not using any index.html static file and I'm using cache busting, so my index.js entry became something like index-c54b91dc05fff0fc94d3.js, and so I can't specify this value as the navigateFallback option. So, in the service worker created by swPrecache, I can't specify the url he is expecting to look for a cache key in its urlsToCacheKeys map, since this map as following url key for exemple : "http://localhost:1337/client/index-c54b91dc05fff0fc94d3.js".

from sw-precache-webpack-plugin.

@PCreations what does your plugin configuration look like?

from sw-precache-webpack-plugin.

Hi,
Have the same issue I cant create SW withe cache for Lighthouse !
The code of my PWA app is her :
https://github.com/darkiron/SSR-vue-template

I try to do this since two days ... I need help

from sw-precache-webpack-plugin.