Service Workers don't doesn't load pages.html

When I change the pages without loading them in the cache with service workers there are no problems when I go to save the pages in the cache they are no longer found both online and offline. The problem occurs only with pages and not with other elements such as .jpg .png .js .css and some .html elements

When i go to another page after i saved it in the cache

Unable to reach site The web page at link of the page may be temporarily unavailable or has been permanently moved to a new web address. ERR_FAILED

Service Workers

const staticChacheName = 'site-static'
const assets = [
    '/',
    '/index.html',
    '/Html/Elements/footer.html',
    '/Html/Elements/mobile_menu.html',
    '/Html/Elements/navbar.html',
    '/Html/Pages/film.html',          //not working
    '/Html/Pages/anime.html',         //not working
    '/Html/Pages/sitobello.html',     //not working
    '/Html/Pages/song.html',          //not working
    '/Html/Pages/amici_home.html',    //not working
    '/Html/Pages/Amici/tilde.html',   //not working
    '/Html/Pages/Amici/kloe.html',    //not working

    'Css/Index/style.css',
    'Css/Sito Bello/background.css',
    'Css/Sito Bello/section.css',
    'Css/Sito Bello/settings.css',
    'Css/Song/background.css',
    'Css/Song/elementi.css',
    'Css/Film/background.css',
    'Css/Film/elementi.css',
    'Css/Anime/background.css',
    'Css/Anime/elementi.css',
    'Css/Element/footer.css',
    'Css/Element/mobile_menu.css',
    'Css/Element/navbar.css',
    'Css/Element/scrollbar.css',
    'Css/Amici/Home/background.css',
    'Css/Amici/Home/elementi.css',
    'Css/Amici/Kloe/background.css',
    'Css/Amici/Tilde/background.css',

    '/Images/Logo.png',
    '/Images/Index/background.jpg',

    '/Javascript/Element/navbar.js',
    '/Javascript/Film/add.js',
    '/Javascript/Sito Bello/add.js',
    '/Javascript/Sito Bello/settings.js',

    '/manifest.webmanifest',
    '/Javascript/app.js',
]

//install service worker
self.addEventListener('install', evt => {
    // console.log('service worker has been installed')

    evt.waitUntil(
        caches.open(staticChacheName).then(chache => {
            console.log('chaching shell assets')
            chache.addAll(assets)
    }))
})

//activate service worker
self.addEventListener('activate', evt => {
    // console.log('service worker has been activated')
})

self.addEventListener('fetch', evt => {
    //console.log('fetch event', evt)

    evt.respondWith(
        caches.match(evt.request).then(chacheRes => {
            return chacheRes || fetch(evt.request)
        })
    )
})

Example of a page that doesn't work

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
        <link rel="stylesheet" href="/Css/Element/navbar.css">
        <link rel="stylesheet" href="/Css/Element/mobile_menu.css">
        <link rel="stylesheet" href="/Css/Film/background.css">
        <link rel="stylesheet" href="/Css/Film/elementi.css">
        <link rel="stylesheet" href="/Css/Element/footer.css">
        <link rel="stylesheet" href="/Css/Element/scrollbar.css">
        <link rel="manifest" href="/manifest.webmanifest">
        <link rel = "icon" href = "/Images/Logo.png" type = "image/x-icon">
        <title>Aside - Film</title>
    </head>

    <body>

        <nav></nav>
        <div id="mb-menu"></div>

        <h1 id="title">Film</h1>

        <div id="films">
            <!-- aggiunge film -->
        </div>

        <footer></footer>

        <script src="/Javascript/app.js"></script>
        <script src="/Javascript/Film/add.js"></script>
        <script src="/Javascript/Element/navbar.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script>
            $(function(){
            $("nav").load("/Html/Elements/navbar.html"); 
            $("footer").load("/Html/Elements/footer.html");
            $("#mb-menu").load("/Html/Elements/mobile_menu.html"); 
            });
        </script>
    </body>
</html>

Site structure

what am I doing wrong? because I would like my site to work offline too but not being able to load the other pages it works only in the home