Added CROSSORIGIN and eagerness PRERENDER

[giorgiopellegrino]

Dear @addyosmani @XhmikosR ,

I am submitting this pull request to address issues encountered within our Luxottica e-commerce group, where we observed inconsistent resource prefetching behavior across different browsers.

Currently, three prefetching methods are implemented:

1. viaDom – Prefetches resources without checking the Access-Control-Allow-Origin header, using the attribute crossorigin="anonymous".
2. viaXhr – Fetches resources while always validating the Access-Control-Allow-Credentials response header.
3. viaFetch – Executes a fetch request that defaults to mode: "cors" and checks Access-Control-Allow-Origin, while credentials: "include" ensures Access-Control-Allow-Credentials validation.

Additionally, I have handled resource prioritization for Safari devices, adding the priority: "low|high" property specifically for fetch requests. All parameters are set to false by default but can be adjusted as needed.

The updated method signature for prefetching is as follows:

prefetch(url, isPriority, checkAccessControlAllowOrigin, checkAccessControlAllowCredentials)

I would appreciate your review of these improvements.

Thank you,
Giorgio

c.c. @gilbertococchi

[giorgiopellegrino]

I have updated the declaration for the variable, defining it as a constant using the const keyword.

[giorgiopellegrino]

Hello @addyosmani ,

I noticed that the code in the pull request did not pass the size limit test. Could you consider increass the size limits? The increase in resource size is due to the introduction of new arguments and parameters.

Thank you,
Giorgio

[giorgiopellegrino]

Hello @addyosmani and @XhmikosR,
I have implemented several functionalities necessary for our company in this PR. Below is a summary of the work that has been done.

Prefetch

• Added mode: cors property in fetch requests and crossorigin: 'anonymous' attribute in prefetch links:
  
  

• Added functionality to manage the control of the Access-Control-Allow-Credentials header:
  
  

• Added functionality to prefetch elements corresponding to the URL upon the mouseenter event:
  

• Fixed the priority for fetch requests, which was not considered. The priority property has been added with values "high" or "low":
  

Prerender

• Added the handling of the eagerness attribute of the script in the speculation rules:
  

• The prerender fallback for devices that do not handle speculation rules has been implemented by adding prefetch with priority high and if the eagerness mode is ‘moderate’ or ‘conservative’ then prefetch is only triggered at the mouseenter
  

Listen

All the functions added for prefetch and prerender are available in the options property, and they will only be executed when elements enter the viewport: options.checkAccessControlAllowOrigin, options.checkAccessControlAllowCredentials, options.onlyOnMouseover, options.eagerness.

Usage

window.addEventListener('load', () => {
  quicklink.listen({el, priority, onlyOnMouseover,
                    checkAccessControlAllowOrigin, checkAccessControlAllowCredentials,
                    prerender, eagerness});
});

window.addEventListener('load', () => {
  quicklink.prefetch(url, isPriority, 
                    checkAccessControlAllowOrigin, checkAccessControlAllowCredentials,
                    onlyOnMouseover);
});

quicklink.prerender(url | [urls], eagerness);

To accommodate these functionalities, the size of the compiled modules has increased. Consequently, I have updated the limits in the size-limit.json file as outlined below:

I hope these changes will be appreciated, as they are currently in use across our e-commerce platforms. The code is ready for validation. Could you please proceed with the review?

Thank you very much.

Giorgio Pellegrino.

cc @gilbertococchi

[giorgiopellegrino]

Hello,

I have split the ticket into two separate pull requests to make it easier to review and verify. Below are the links to the pull requests:

• CROSSORIGIN and CREDENTIALS: CROSSORIGIN and CREDENTIALS on prefetch requests #435
• Prerender EAGERNESS: Prerender EAGERNERSS #436

For this reason, I will proceed with closing this ticket to avoid duplication.

cc. @gilbertococchi

Thank you.

Giorgio Pellegrino