Make Crystal an installable web app with an offline shell (#39)
A manifest and icons rendered from icon.svg make the app installable. The native build emits a service worker that precaches exactly the built files and passes everything else to the network, so ROMs never reach its cache. New versions wait for the player's Update, which saves before reloading. Savegames offers installation, iPhone steps and persistent storage, and a full disk gets its own save error. Acceptance on physical iPhone and Android devices remains. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
f289615bd2
commit
ce8129703f
20 files changed
+661
-15
No files matched your search
+42
-2
@@ -69,7 +69,22 @@ label:focus-within {
|
||||
#app {
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
/* Named rows keep the main area flexible whether or not an update
|
||||
banner shows. */
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
grid-template-areas: "header" "banner" "main" "bar";
|
||||
}
|
||||
#app > .site-header {
|
||||
grid-area: header;
|
||||
}
|
||||
#app > .update-banner {
|
||||
grid-area: banner;
|
||||
}
|
||||
#app > .app-shell {
|
||||
grid-area: main;
|
||||
}
|
||||
#app > .global-bar {
|
||||
grid-area: bar;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
@@ -915,9 +930,34 @@ dialog h2 {
|
||||
padding-top: 20px;
|
||||
border-top: 3px double #747269;
|
||||
}
|
||||
.replace-rom h3 {
|
||||
.replace-rom h3,
|
||||
.app-settings h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.app-settings {
|
||||
max-width: 720px;
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 3px double #747269;
|
||||
}
|
||||
.app-settings p {
|
||||
color: #4e5157;
|
||||
}
|
||||
.app-settings .menu-button {
|
||||
width: fit-content;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
/* A waiting update: shown until the player chooses to reload. */
|
||||
.update-banner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px 14px;
|
||||
padding: 6px 12px;
|
||||
color: var(--cream);
|
||||
background: var(--blue);
|
||||
}
|
||||
.replace-rom .menu-button {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user