Force caching script in HTML-CodePudding

Is it possible to force caching script file in HTML?

e.g given a script balise <script src="https://example-server.com/external/widget.js" type="text/javascript" async></script> that will be in the head of every pages of the website.

Is it possible to fetch it only once from the server but execute it at every pages anyway?

My goal is to be able to do it handle it with what's inside the script of https://example-server.com/external/widget.js and not the rest of the HTML. I would like to provide the scripts to client without exploding my servers' capacity.

Disclamer: https://example-sever.com doesn't exist and is here for the sake of a valid URI.

As @KooiInc pointed out, browsers handle automatically caching of files.

But my problem remains, the URI https://example-server.com/external/widget.js redirects to https://cdn.net/assets/widget-{fingerprints}.js that is cached. But the first URI is not cached.

To answer @Tejas Sarade question:

headers of https://example-server.com/external/widget.js

General >
    Request URL: https://example-server.com/external/widget.js
    Request Method: GET
    Status Code: 302 Found
    Referrer Policy: strict-origin-when-cross-origin
Responses Headers >
    Cache-Control: no-cache
    Connection: keep-alive
    Content-Type: text/javascript; charset=utf-8
    Location: https://cdn.net/assets/widget-{fingerprints}.js
    Referrer-Policy: strict-origin-when-cross-origin
    ...

headers of https://cdn.net/assets/widget-{fingerprints}.js

General >
    Request URL: https://cdn.net/assets/widget-{fingerprints}.js
    Request Method: GET
    Status Code: 200  (from disk cache)
    Referrer Policy: strict-origin-when-cross-origin
Response Headers >
    Cache-Control: no-cache
    Connection: keep-alive
    Content-Type: text/javascript; charset=utf-8
    ...
    x-cache: Hit from cloudfront
    ...

EDIT:

A bit of context. Because I think the problem might be related to rails assets pipeline and/or my CDN configuration.

I am using ruby on rails, and rather than serving my assets directly with assets route I decided to redirected to redirect to assets_url in my controller to have perfect control over my routing. (my controller is far more complex, I am just writing the relevant parts)

class WidgetsController < ApplicationController

  WIDGET_FILE_NAME = 'widget'

  def index
    respond_to do |format|
      format.js { redirect_to asset_url(WIDGET_FILE_NAME) }
    end
  end
end

And in my routes.rb files

  scope :external do
    resources :widget, only: [:index], controller: :widgets
  end

Therefore I could use endpoint GET https://example-server.com/external/widget.js rather than GET https://example-server.com/assets/widget.js

CodePudding user response：

That makes sense.
As per the HTTP protocol, 302 responses are not cached by default unless indicated by response headers. cache-control: max-age=in_seconds or Expires: specific_date

https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

OR you can just use 301 redirects, which are cached by default by browsers unless indicated by response headers not to cache.

How to set response headers or change the type or redirect depends on the type of server that you are using.

CodePudding user response：

you can create dynamic url with query string

<script>document.write('<script src="/myJavascript.js?dev='   Math.floor(Math.random() * 100)   '"\><\/script>');</script>

this way the browser will load the script as new file