Service worker cache.match options #28443

vitaliy-patsay · 2019-01-30T09:48:24Z

🚀 feature request

Relevant Package

@angular/service-worker
@angular/pwa

Description

At the moment there is no support for cache.match options in listed above package. I have a scenario with images which have some dynamic hashes as url parameters.

Desired behaviour

The same image

to be cached as

https://cdn.example.com/image1.png

Describe the solution you'd like

It's good to have possibility to specify some properties in ngsw-config.json assetGroup like

interface AssetGroup {
  name: string;
  installMode?: 'prefetch' | 'lazy';
  ...  
  cacheOptions?: {
    ignoreSearch?: boolean;
    ignoreMethod?: boolean;
    ignoreVary?: boolean;
  };
  ...
}

The text was updated successfully, but these errors were encountered:

tpiros · 2019-05-09T06:44:42Z

I have a similar scenario which warrants for adding especially ignoreVary to the AssetGroup interface. I am using images coming from Cloudinary who have a special flag called f_auto to dynamagically return the right image format to the browser - i.e. WebP for Chrome, JPG or JPEG 2000 to IE so on and so forth. When requesting an image asset with the f_auto flag it is adding the Vary: User-Agent header to the response which means that even though I have an item cached it will not return anything and instead - in offline mode - will try to access the image, resulting in a 504 Gateway error.

I have verified that having the ignoreVary option set to true does not cause this issue:

self.addEventListener('fetch', event => {
  // with this option everything works like a charm
  const options = {
    ignoreVary: true
  };
  event.respondWith(
    caches.match(event.request, options)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

At the moment I can't get my PWA to work using @angular/pwa purely because of this.

spike-rabbit · 2020-01-03T15:33:39Z

As were are facing a similiar issue in my project I would like to provide a pull request.
Suggested API:

interface AssetGroup {
  name: string;
  installMode?: 'prefetch' | 'lazy';
  ...  
  cacheMatchOptions?: ClientMatchOptions;
  ...
}

export interface DataGroup {
  name: string;
  ...
  cacheMatchOptions?: ClientMatchOptions,
  cacheConfig: {
    ...
  };
}

// from DOM lib...
export interface ClientMatchOptions {
  ignoreMethod?: boolean;
  ignoreSearch?: boolean;
  ignoreVary?: boolean;
}

Since the ngsw always creates new requests for fetching resources without copying the original headers I would also suggest to provide default ClientMatchOptions = {ignoreVary: true}. Otherwise requests will never match any cached resources if a header which is listed in Vary is present.

gkalpak · 2020-01-07T12:54:24Z

@spike-rabbit, your recommendation sounds reasonable (from a super quick look). Feel free to create a PR and we can discuss the details there.
(Ping me if you need any help getting set up and submitting the PR.)

Previously it was impossible to provide options for Cache#match. As it is sometimes necessary to override the default behavior the Cache#match options can now be configured for assets and data groups. closes angular#28443

…s from cache The Angular ServiceWorker always uses a copy of the request without headers for caching assets (in order to avoid issues with opaque responses). Therefore, it was previously not possible to retrieve resources from the cache if the response contained [Vary](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary) headers. In addition to that, `Vary` headers do not work in all browsers (or work differently) and may not work as intended with ServiceWorker caches. See [this article](https://www.smashingmagazine.com/2017/11/understanding-vary-header) and the linked resources for more info. This commit avoids the aforementioned issues by making sure the Angular ServiceWorker always sets the `ignoreVary` option passed to [Cache#match()](https://developer.mozilla.org/en-US/docs/Web/API/Cache/match) to `true`. This allows the ServiceWorker to correctly retrieve cached responses with `Vary` headers, which was previosuly not possible. BREAKING CHANGE: Previously, [Vary](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary) headers would be taken into account when retrieving resources from the cache, completely preventing the retrieval of cached assets (due to ServiceWorker implementation details) and leading to unpredictable behavior due to inconsistent/buggy implementations in different browsers. Now, `Vary` headers are ignored when retrieving resources from the ServiceWorker caches, which can result in resources being retrieved even when their headers are different. If your application needs to differentiate its responses based on request headers, please make sure the Angular ServiceWorker is [configured](https://angular.io/guide/service-worker-config) to avoid caching the affected resources. Closes angular#28443 Fixes angular#36638

Previously it was not possible to provide `CacheQueryOptions` ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Cache)) for querying the Cache. This commit introduces a new parameter called `cacheQueryOptions` for `DataGroup` and `AssetGroup`. Currently only `ignoreSearch` is supported as `ignoreVary` and `ignoreMethod` would require using the complete Request object for matching which is not possible with the current implementation. Although it is not documented and will not work it is technical possible provide values for `ignoreVary` and `ignoreMethod` as well. Closes angular#28443

Previously it was not possible to provide `CacheQueryOptions` ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Cache)) for querying the Cache. This commit introduces a new parameter called `cacheQueryOptions` for `DataGroup` and `AssetGroup`. Currently only `ignoreSearch` is supported as `ignoreVary` and `ignoreMethod` would require using the complete Request object for matching which is not possible with the current implementation. Closes angular#28443

angular-automatic-lock-bot · 2020-06-01T16:09:57Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

…fig (angular#34663) Previously it was not possible to provide `CacheQueryOptions` ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Cache)) for querying the Cache. This commit introduces a new parameter called `cacheQueryOptions` for `DataGroup` and `AssetGroup`. Currently only `ignoreSearch` is supported as `ignoreVary` and `ignoreMethod` would require using the complete Request object for matching which is not possible with the current implementation. Closes angular#28443 PR Close angular#34663

gkalpak added feature Issue that requests a new feature effort2: days freq1: low severity2: inconvenient area: service-worker Issues related to the @angular/service-worker package labels Jan 30, 2019

ngbot bot added this to the Backlog milestone Jan 30, 2019

gkalpak mentioned this issue Dec 22, 2019

feat(service-worker): add support for specifying cache.match() options for asset-/data-groups #32276

Closed

spike-rabbit mentioned this issue Jan 7, 2020

feat(service-worker): support cache match options in ngsw config #34663

Closed

14 tasks

alxhub closed this as completed in dc9f4b9 May 1, 2020

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 1, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Service worker cache.match options #28443

Service worker cache.match options #28443

vitaliy-patsay commented Jan 30, 2019

tpiros commented May 9, 2019 •

edited

spike-rabbit commented Jan 3, 2020

gkalpak commented Jan 7, 2020

angular-automatic-lock-bot bot commented Jun 1, 2020

Service worker cache.match options #28443

Service worker cache.match options #28443

Comments

vitaliy-patsay commented Jan 30, 2019

🚀 feature request

Relevant Package

Description

Desired behaviour

Describe the solution you'd like

tpiros commented May 9, 2019 • edited

spike-rabbit commented Jan 3, 2020

gkalpak commented Jan 7, 2020

angular-automatic-lock-bot bot commented Jun 1, 2020

tpiros commented May 9, 2019 •

edited