feat: add PWA offline support for recipe pages
- Add service worker with caching for build assets, static files, images, and pages - Add IndexedDB storage for recipes (brief and full data) - Add offline-db API endpoint for bulk recipe download - Add offline sync button component in header - Add offline-shell page for direct navigation fallback - Pre-cache __data.json for client-side navigation - Add +page.ts universal load functions with IndexedDB fallback - Add PWA manifest and icons for installability - Update recipe page to handle missing data gracefully
This commit is contained in:
@@ -1,26 +1,35 @@
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { stripHtmlTags } from '$lib/js/stripHtmlTags';
|
||||
|
||||
export async function load({ params, fetch }) {
|
||||
export const load: PageServerLoad = async ({ fetch, params, locals }) => {
|
||||
const isEnglish = params.recipeLang === 'recipes';
|
||||
const apiBase = isEnglish ? '/api/recipes' : '/api/rezepte';
|
||||
|
||||
const res = await fetch(`${apiBase}/items/${params.name}`);
|
||||
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json().catch(() => ({ message: 'Recipe not found' }));
|
||||
throw error(res.status, errorData.message);
|
||||
throw error(res.status, 'Recipe not found');
|
||||
}
|
||||
|
||||
const item = await res.json();
|
||||
|
||||
// Strip HTML for meta tags (server-side only for SEO)
|
||||
const strippedName = stripHtmlTags(item.name);
|
||||
const strippedDescription = stripHtmlTags(item.description);
|
||||
|
||||
// Get session for user info
|
||||
const session = await locals.auth();
|
||||
|
||||
return {
|
||||
item,
|
||||
strippedName,
|
||||
strippedDescription,
|
||||
lang: isEnglish ? 'en' : 'de',
|
||||
recipeLang: params.recipeLang,
|
||||
session
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
toggleFavorite: async ({ request, locals, url, fetch }) => {
|
||||
|
||||
@@ -51,6 +51,11 @@
|
||||
: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
|
||||
|
||||
function season_intervals() {
|
||||
// Guard against missing season data (can happen in offline mode)
|
||||
if (!data.season || !Array.isArray(data.season) || data.season.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let interval_arr = []
|
||||
|
||||
let start_i = 0
|
||||
@@ -299,8 +304,12 @@ h2{
|
||||
|
||||
<TitleImgParallax src={hero_img_src} {placeholder_src} alt={img_alt}>
|
||||
<div class=title>
|
||||
<a class="category g-pill g-btn-dark" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
|
||||
<a class="icon g-icon-badge" href='/{data.recipeLang}/icon/{data.icon}'>{data.icon}</a>
|
||||
{#if data.category}
|
||||
<a class="category g-pill g-btn-dark" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
|
||||
{/if}
|
||||
{#if data.icon}
|
||||
<a class="icon g-icon-badge" href='/{data.recipeLang}/icon/{data.icon}'>{data.icon}</a>
|
||||
{/if}
|
||||
<h1>{@html data.name}</h1>
|
||||
{#if data.description && ! data.preamble}
|
||||
<p class=description>{data.description}</p>
|
||||
@@ -308,25 +317,29 @@ h2{
|
||||
{#if data.preamble}
|
||||
<p>{@html data.preamble}</p>
|
||||
{/if}
|
||||
<div class=tags>
|
||||
<h2>{labels.season}</h2>
|
||||
{#each season_iv as season}
|
||||
<a class="g-tag" href="/{data.recipeLang}/season/{season[0]}">
|
||||
{#if season[0]}
|
||||
{months[season[0] - 1]}
|
||||
{/if}
|
||||
{#if season[1]}
|
||||
- {months[season[1] - 1]}
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<h2 class="section-label">{labels.keywords}</h2>
|
||||
<div class="tags center">
|
||||
{#each data.tags as tag}
|
||||
<a class="g-tag" href="/{data.recipeLang}/tag/{tag}">{tag}</a>
|
||||
{/each}
|
||||
</div>
|
||||
{#if season_iv.length > 0}
|
||||
<div class=tags>
|
||||
<h2>{labels.season}</h2>
|
||||
{#each season_iv as season}
|
||||
<a class="g-tag" href="/{data.recipeLang}/season/{season[0]}">
|
||||
{#if season[0]}
|
||||
{months[season[0] - 1]}
|
||||
{/if}
|
||||
{#if season[1]}
|
||||
- {months[season[1] - 1]}
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.tags && data.tags.length > 0}
|
||||
<h2 class="section-label">{labels.keywords}</h2>
|
||||
<div class="tags center">
|
||||
{#each data.tags as tag}
|
||||
<a class="g-tag" href="/{data.recipeLang}/tag/{tag}">{tag}</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<FavoriteButton
|
||||
recipeId={data.germanShortName}
|
||||
|
||||
@@ -1,10 +1,77 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { generateRecipeJsonLd } from '$lib/js/recipeJsonLd';
|
||||
import { isOffline, canUseOfflineData } from '$lib/offline/helpers';
|
||||
import { getFullRecipe, isOfflineDataAvailable } from '$lib/offline/db';
|
||||
import { stripHtmlTags } from '$lib/js/stripHtmlTags';
|
||||
|
||||
export async function load({ fetch, params, url, data }) {
|
||||
const isEnglish = params.recipeLang === 'recipes';
|
||||
|
||||
// Use item from server load - no duplicate fetch needed
|
||||
let item = { ...data.item };
|
||||
// Check if we need to load from IndexedDB (offline mode)
|
||||
// Only check on the client side
|
||||
let item: any;
|
||||
let isOfflineMode = false;
|
||||
|
||||
// On the client, check if we need to load from IndexedDB
|
||||
const shouldUseOfflineData = browser && (isOffline() || data?.isOffline || !data?.item) && canUseOfflineData();
|
||||
|
||||
if (shouldUseOfflineData) {
|
||||
try {
|
||||
const hasOfflineData = await isOfflineDataAvailable();
|
||||
if (hasOfflineData) {
|
||||
// For English routes, the name param is the English short_name
|
||||
// We need to find the recipe by its translations.en.short_name or short_name
|
||||
let recipe = await getFullRecipe(params.name);
|
||||
|
||||
if (recipe) {
|
||||
// Apply English translation if needed
|
||||
if (isEnglish && recipe.translations?.en) {
|
||||
const enTrans = recipe.translations.en;
|
||||
// Use type assertion to avoid tuple/array type mismatch
|
||||
const recipeAny = recipe as any;
|
||||
item = {
|
||||
...recipeAny,
|
||||
name: enTrans.name || recipe.name,
|
||||
description: enTrans.description || recipe.description,
|
||||
preamble: enTrans.preamble || recipe.preamble,
|
||||
addendum: enTrans.addendum || recipe.addendum,
|
||||
note: enTrans.note,
|
||||
category: enTrans.category || recipe.category,
|
||||
tags: enTrans.tags || recipe.tags,
|
||||
portions: enTrans.portions || recipe.portions,
|
||||
preparation: enTrans.preparation || recipe.preparation,
|
||||
cooking: enTrans.cooking || recipe.cooking,
|
||||
total_time: enTrans.total_time || recipe.total_time,
|
||||
baking: enTrans.baking || recipe.baking,
|
||||
fermentation: enTrans.fermentation || recipe.fermentation,
|
||||
ingredients: enTrans.ingredients || recipe.ingredients,
|
||||
instructions: enTrans.instructions || recipe.instructions,
|
||||
germanShortName: recipe.short_name
|
||||
};
|
||||
} else {
|
||||
item = recipe;
|
||||
}
|
||||
isOfflineMode = true;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load offline recipe:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Use server data if not offline or offline load failed
|
||||
if (!item && data?.item) {
|
||||
item = { ...data.item };
|
||||
}
|
||||
|
||||
// If still no item, we're offline without cached data - return error state
|
||||
if (!item) {
|
||||
return {
|
||||
...data,
|
||||
isOffline: true,
|
||||
error: 'Recipe not available offline'
|
||||
};
|
||||
}
|
||||
|
||||
// Check if this recipe is favorited by the user
|
||||
let isFavorite = false;
|
||||
@@ -114,7 +181,11 @@ export async function load({ fetch, params, url, data }) {
|
||||
const germanShortName = isEnglish ? (item.germanShortName || '') : item.short_name;
|
||||
|
||||
// Destructure to exclude item (already spread below)
|
||||
const { item: _, ...serverData } = data;
|
||||
const { item: _, ...serverData } = data || {};
|
||||
|
||||
// For offline mode, generate stripped versions locally
|
||||
const strippedName = isOfflineMode ? stripHtmlTags(item.name) : (serverData as any)?.strippedName;
|
||||
const strippedDescription = isOfflineMode ? stripHtmlTags(item.description) : (serverData as any)?.strippedDescription;
|
||||
|
||||
return {
|
||||
...serverData, // Include server load data (strippedName, strippedDescription)
|
||||
@@ -125,5 +196,8 @@ export async function load({ fetch, params, url, data }) {
|
||||
hasEnglishTranslation,
|
||||
englishShortName,
|
||||
germanShortName,
|
||||
strippedName,
|
||||
strippedDescription,
|
||||
isOffline: isOfflineMode,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user