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

ng service-worker does not cache data #34203

Closed
postnikovpasha opened this issue Dec 3, 2019 · 13 comments
Closed

ng service-worker does not cache data #34203

postnikovpasha opened this issue Dec 3, 2019 · 13 comments

Comments

@postnikovpasha
Copy link

@postnikovpasha postnikovpasha commented Dec 3, 2019

ng service-worker caches data only for the time specified in the Cache-Control response header: public, max-age = 60, s-maxage = 60. After 60 seconds in offline mode, the response 504 Gateway Timeout (from ServiceWorker) comes to the request.

 {
      "$schema": "./node_modules/@angular/service-worker/config/schema.json",
      "index": "/index.html",
      "assetGroups": [
        {
          "name": "app",
          "installMode": "prefetch",
          "resources": {
            "files": [
              "/favicon.ico",
              "/index.html",
              "/manifest.webmanifest",
              "/*.css",
              "/*.js"
            ]
          }
        },
         {
          "name": "assets",
          "installMode": "lazy",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/assets/**",
              "/app/app.component.ts",
              "/*.(pdf|odt|eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
          }
        }
      ],
      "dataGroups": [
      {
          "name": "github-api",
          "urls": ["**//api.github.com/**"],
          "cacheConfig": {
          "strategy": "performance",
          "maxSize": "100",
          "maxAge": "7d"

        }
      }
    ]
    }

What could be the problem?

P.S. I installed the worker for my application using this command:
ng add @angular/pwa --project project-name –

@gkalpak

This comment has been minimized.

Copy link
Member

@gkalpak gkalpak commented Dec 3, 2019

That should work as expected. Can you point us to a reproduction (either publicly accessible deployed app that suffers from the problem or a minimal project along with instructions on how to build and run it in order to see the problem).

@postnikovpasha

This comment has been minimized.

Copy link
Author

@postnikovpasha postnikovpasha commented Dec 4, 2019

Снимок экрана от 2019-12-04 11-04-32
Here is a project in which the cache is only stored for 60 seconds. Then in offline mode Status Code: 504 Gateway Timeout (from ServiceWorker).
https://github.com/postnikovpasha/testCacheNgSw

@gkalpak

This comment has been minimized.

Copy link
Member

@gkalpak gkalpak commented Dec 4, 2019

It works correctly for me. I am going to close this issue, but feel free to continue the discussion below.

How so you serve the app?
What does http://127.0.0.1:8080/ngsw/state show?

@gkalpak gkalpak closed this Dec 4, 2019
@postnikovpasha

This comment has been minimized.

Copy link
Author

@postnikovpasha postnikovpasha commented Dec 6, 2019

Many thanks! At http://127.0.0.1:8080 everything really worked. The error was in the configuration of the real server.

Another question arose. Is it possible to cache outgoing requests?
For example, a user creates a message offline and clicks the "Send" button, and the application as soon as connected to the Internet sends this message to the server.

@gkalpak

This comment has been minimized.

Copy link
Member

@gkalpak gkalpak commented Dec 6, 2019

Glad you sorted it out 🎉

There are features such as Background Sync and Background Fetch, but they are not standardized yet (so only some browsers support them) and the Angular SW does not support them atm.

@postnikovpasha

This comment has been minimized.

Copy link
Author

@postnikovpasha postnikovpasha commented Dec 7, 2019

That is, for these functions you need to write a separate SW? Is it possible to distinguish POST and Get requests in the description of the SW configuration if the URLs of these requests are the same?

@postnikovpasha

This comment has been minimized.

Copy link
Author

@postnikovpasha postnikovpasha commented Dec 9, 2019

I had an idea how to bypass caching of outgoing requests. I can save the contents of outgoing requests in local storage, and when an Internet connection appears, send requests to the server with the contents of the local storage. Is such a solution possible or is it a bad practice?

@gkalpak

This comment has been minimized.

Copy link
Member

@gkalpak gkalpak commented Dec 9, 2019

Every page can only be controlled by one SW. So, you need your own SW implementation (e.g. based on WorkBox if you need to support features that are not built-in in the Angular SW. (It is theoretically possible to combine Angular's SW with your own, where your own handles some requests and passes the rest through to the Angular SW, but it is not official supported (so kind of a hack) and might be a little brittle. I don't recommend this approach, unless it is for something trivial and you really know what yo are doing.)

Regarding saving pending requests in LocalStorage:
If it works for your usecase, then fine. But in general, this kind of functionality has several requirements that are not covered by this approach.

@postnikovpasha

This comment has been minimized.

Copy link
Author

@postnikovpasha postnikovpasha commented Dec 9, 2019

Is it possible to distinguish POST and GET requests in the description of the SW configuration if the URLs of these requests are the same?

@gkalpak

This comment has been minimized.

Copy link
Member

@gkalpak gkalpak commented Dec 9, 2019

I am not sure what you mean by "distinguish". The SW only caches handles non-mutating requests (i.e. GET, HEAD, OPTIONS), but (unless bypassed) the SW will handle all requests (even if just to forward them to the network).

@postnikovpasha

This comment has been minimized.

Copy link
Author

@postnikovpasha postnikovpasha commented Dec 9, 2019

How to describe the configuration so that SW does not handle outgoing requests?

@gkalpak

This comment has been minimized.

Copy link
Member

@gkalpak gkalpak commented Dec 9, 2019

I am confused. All requests are outgoing 😕
If you mean PUT/POST requests, then it is not possible to configure the SW to ignore them. You can do it on a per-request basis (as described here), but at this point you might be better off implementing your own SW.

@postnikovpasha

This comment has been minimized.

Copy link
Author

@postnikovpasha postnikovpasha commented Dec 10, 2019

Thanks so much for the consultation!
('ngsw-bypass', 'true') is exactly what I need!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.