Static site using Sveltekit adapter-static is not savable (browser save does not work) #9502

tofran · 2023-03-24T13:07:08Z

tofran
Mar 24, 2023

I haven't been able to make a static site using Svaltekit that is savable for offline usage. Savable means that the website can be saved using ctrl + S and be used offline. Chrome and Firefox handle this pretty well in most static apps.

How it normally works

A simple static website is served, with resources from other files, like /script.js, /assets/image.png and even relative paths like ./style.css.
The user hits ctrl + S and the browser prefixes all these resources with the folder name (<PAGE_TITLE>_files).
The website can be opened in the browser and used offline. Usually all the form input values are cleared out, but the DOM is kept as when saved.

I have made a super simple example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanilla demo</title>
    <script src="/script.js"></script>
    <!-- can also be ./script.js -->
</head>
<body>
    <h1>Vanilla demo</h1>

    <label>
        Type something
        <input type="text">
    </label>
    <span>0</span> characters typed.
</body>
</html>

script.js

window.addEventListener('load', () => {
    const inputElement = document.querySelector('input')
    const resultElement = document.querySelector('span')
    
    inputElement.addEventListener('keyup', () => {
        console.log(inputElement.value)
        resultElement.innerText = inputElement.value.length
    })
})

When saved it creates a file Vanilla demo.html and a directory Vanilla demo_files containing script.js. Vanilla demo.html has the script source prefixed with ./Vanilla demo_files/.

Typical working example (uses react): https://tofran.github.io/passphrase-recovery-tool/ (source).

Sveltekit

I'm using @sveltejs/adapter-static as documented, and have tried to set config.kit.paths.relative to true but not all scripts are imported with a relative prefix. Notably the ones that are dynamically added to the DOM during load.

I do not fully understand why, but this might be why both Chrome and Firefox cannot save the page correctly.

Also note that config.kit.paths.base cannot be / nor ./, so I haven't been able to play with this setting.

I have also tried to edit the key base of __sveltekit_<HASH> in the index.html resulting from a build, but without success.

Live static sveltekit examples that are not savable:
https://tofran.github.io/aws-ses-smtp-credentials/ (source)
https://sveltekit-static.onrender.com/ (source)

Vanilla example ported into Sveltekit

npm i -D @sveltejs/adapter-static

echo 'export const prerender = true;' > src/routes/+layout.js

src/routes/page.svelte

<script>
    let inputValue = ''
</script>

<label>
    <h1>Sveltekit static demo</h1>

    Type something
    <input bind:value={inputValue} type="text">
</label>
<span>{inputValue.length}</span> characters typed.

svelte.config.js

import adapter from '@sveltejs/adapter-static';

const config = {
	kit: {
		adapter: adapter()
	}
};

Is this a Sveltekit limitation? If so, why? Is it documented?

Environment

Node: v18.13.0
@sveltejs/adapter-static: 2.0.1
@sveltejs/kit:1.13.0
svelte: 3.57.0
vite: 4.2.1

eltigerchino · 2023-03-26T16:28:25Z

eltigerchino
Mar 26, 2023
Collaborator

Those scripts have a base prefix for their URLs as part of a remote dev environment fix #8651
Kit adds them in this manner when rendering the page.

kit/packages/kit/src/runtime/server/page/render.js

Lines 289 to 301 in 5191e16

    
           const included_modulepreloads = Array.from(modulepreloads, (dep) => prefixed(dep)).filter( 
        
           	(path) => resolve_opts.preload({ type: 'js', path }) 
        
           ); 
        
           for (const path of included_modulepreloads) { 
        
           	// see the kit.output.preloadStrategy option for details on why we have multiple options here 
        
           	link_header_preloads.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`); 
        
           	if (options.preload_strategy !== 'modulepreload') { 
        
           		head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`; 
        
           	} else if (state.prerendering) { 
        
           		head += `\n\t\t<link rel="modulepreload" href="${path}">`; 
        
           	} 
        
           }

@benmccann is there a way to support this base path fix and the offline web archive use case that requires a relative path?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Static site using Sveltekit adapter-static is not savable (browser save does not work) #9502

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Static site using Sveltekit adapter-static is not savable (browser save does not work) #9502

Uh oh!

Uh oh!

tofran Mar 24, 2023

How it normally works

Sveltekit

Environment

Replies: 1 comment

Uh oh!

eltigerchino Mar 26, 2023 Collaborator

tofran
Mar 24, 2023

eltigerchino
Mar 26, 2023
Collaborator