How to display my XYZ Tiles at a certain extent

I am using OpenLayers to create a map. I am providing my own source using XYZ. I want to be able to display my tiles at a certain extent and not go out of this extent. How can i do this ?

proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');
register(proj4);
var projection = get('EPSG:2326');

var extent = [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002];
var hkorigin = [-4786700.0, 8353100.0];
var resolutions = [
  156543.03392800014 , 78271.51696399994  , 39135.75848200009  , 19567.87924099992   ,
  9783.93962049996   , 4891.96981024998   , 2445.98490512499   , 1222.992452562495   ,
  611.4962262813797  , 305.74811314055756 , 152.87405657041106 , 76.43702828507324   ,
  38.21851414253662  , 19.10925707126831  , 9.554628535634155  , 4.77731426794937    ,
  2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
  0.14929107082380833
];

var tileGrid = new TileGrid({
      extent: extent,
      origin: hkorigin,
      resolutions: resolutions,
      tileSize: [256,256]
    });

    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            projection: projection,
            tileGrid: tileGrid,
            url: 'assets/tile/{z}/{x}/{y}.png'
        })
      }),
      ],
      view: new View({
        center: hk2326center,
        projection: projection,
        zoom: 0
      })
    });