Offline and mobile

How Trailkeep works without a connection, what syncs automatically when you're back online, and mobile-specific UI and device notes.

Trailkeep is built to keep working even when your signal drops. Most of what you need on trail is available offline, and any changes you make while disconnected sync automatically when you reconnect.

How offline works

Trailkeep has two independent offline systems working together:

Data cache (active now) — All trips and gear data is cached locally for up to 7 days. Write operations (creates, edits, deletes) are queued while offline and replayed automatically when the connection returns.

App shell cache (enabled in stable release) — A service worker precaches the app's interface so it loads instantly on return visits, even offline. This layer is disabled during the current beta to avoid stale cache issues during rapid updates.

What you can do offline

These all work from cache — no network needed:

View all previously loaded trips, days, waypoints, and trail notes
View all gear lists, categories, and items
Browse the trip and gear dashboards
See the safety timer countdown (calculated client-side)

What queues and syncs later

These operations queue in the background when offline and execute automatically in order when connectivity returns:

Creating and editing trips, days, and waypoints
Creating and editing gear lists, categories, and items
Adding and editing trail notes
Renaming items, reordering, toggling flags (worn, consumable, stars)

What requires a live connection

Some operations check connectivity before proceeding and show a prompt if offline — they cannot queue because they depend on live data:

Operation	Why it can't queue
GPS capture (day completion)	Location must be saved at capture time — stale coordinates would mislead SAR
Cloning a trip or gear list	Requires a fresh count from the database to enforce limits
Copying items from shared views	Requires auth session validation
Sign in	Always live
Real-time collaborative editing	WebSocket connection required

Cache is stored in your browser's localStorage. In private/incognito mode, localStorage may be blocked — the app continues to work but data is only cached in memory and is lost when the tab closes.

Sync status indicator

The user avatar in the header has a small coloured dot in the bottom-right corner — always visible:

Dot colour	Meaning
Green	Connected, all changes saved
Amber (pulsing)	Syncing — back online, replaying queued changes
Red	Offline — changes are queued locally

When offline with pending changes, a number badge appears on the avatar (e.g. "3") showing how many operations are queued. Hovering shows: "Offline — 3 pending" or "Syncing 3 changes...".

App updates

When a new version is available, a toast appears once: "Update available — New version ready. Reload when convenient to update." There is no forced reload — finish what you are doing before refreshing.

Installing as a PWA

Trailkeep can be installed as a Progressive Web App — it runs like a native app, with its own icon and no browser chrome.

iOS (Safari only): Open Trailkeep in Safari → tap the Share button → "Add to Home Screen." This does not work in Chrome, Firefox, or Edge on iOS — they are all WebKit wrappers without PWA install support.

Android (Chrome recommended): Chrome shows an "Add to Home Screen" or "Install app" prompt in the three-dot menu. Firefox and other Android browsers have inconsistent PWA support.

Mobile dashboard layout

Gear Vault and Trail Notes

On desktop (≥1024px) the Gear Vault and Trail Notes are sticky sidebars — always mounted, semi-transparent, visible at a glance.

On mobile (below 1024px) they become full-screen overlay panels:

Slide in from the left over a blurred backdrop
Tap the backdrop or the X button to close
Close automatically if you resize the window above 1024px while one is open

Mobile item row display

On mobile screens (≤744px), item rows use a coloured border system instead of inline icon columns:

Left border — signals functional status: blue for worn items / water sources, amber for consumables / resupply points
Right border — signals star rating: yellow / red / green matches the star colour

An item that is both worn and starred shows both borders simultaneously. This gives instant status at a glance without expanding the row.

On desktop, the same information is shown via small inline icons in a dedicated column.

Star colour cycle: tapping the star cycles none → yellow → red → green → none. The colours have no enforced meaning — common conventions are yellow (important), red (critical), green (packed and ready).

Finding actions on mobile: tap the chevron ▾ to expand a row, then tap the ⋮ menu for star, type toggles, price, and vault actions. Delete is always visible outside the menu.

The coloured border system only appears in your dashboard. In the shared/public view, mobile uses inline icons next to item names — no border colours.

iOS notes

Input zoom

Safari on iOS auto-zooms when a text input smaller than 16px receives focus. Trailkeep prevents this by setting maximum-scale=1.0, user-scalable=no on the viewport — pinch-to-zoom is disabled while using Trailkeep. The viewport-fit=cover setting ensures content fills correctly on devices with a notch.

GPS permissions

Safari may prompt for location permission when you first capture GPS on day completion. If the app is installed as a PWA, the prompt appears once and is remembered by the OS. Safari may revoke location permission after extended inactivity — if GPS capture fails, check permissions in iOS Settings → Safari → Location.