Progressive Web App (PWA)

Transform your luxury Shopify store into a native app experience with offline support, app installation, and enhanced performance.

Features

• Offline Support — Browse previously visited pages without internet
• App Installation — Install on iOS and Android home screens
• Smart Caching — Intelligent asset caching for faster loading
• Background Sync — Queue cart operations when offline
• Luxury UI — Gold (#C9A961) and dark (#1A1816) branded interface

Quick Start

1. Enable PWA

In Shopify admin, go to Theme Settings > Progressive Web App:

1. Enable PWA
2. Upload icons (192x192 and 512x512 PNG)
3. Save

2. Test

1. Visit your store on Chrome/Edge
2. Wait for install prompt (5 seconds)
3. Click “Install App”

Icon Requirements

Size	Purpose	Format
192x192	Android app icon	PNG
512x512	Android splash screen	PNG
180x180	iOS app icon (optional)	PNG

Guidelines: Square images, PNG format, high quality, consider gold accents on dark background.

Caching Strategy

Cache-First (Static Assets)

CSS, JavaScript, fonts, and images load from cache first for instant rendering.

Network-First (Dynamic Content)

Cart operations, product data, collection data, and search results always try the network first.

Always Fresh (Network-Only)

Checkout, account, and admin pages are never cached.

Cache Limits

• Images: 50 items (adjustable)
• Pages: 30 items (adjustable)
• Automatic cleanup when limits exceeded

Installation Flow

Desktop (Chrome/Edge): User visits store, install prompt appears after 5 seconds, clicks “Install App”, app installs to desktop/taskbar.

Android (Chrome): Install prompt appears automatically, user taps “Add to Home Screen”.

iOS (Safari): User manually taps Share button, selects “Add to Home Screen”.

Offline Experience

When internet is unavailable:

1. Previously visited pages load from cache
2. Images and assets load from cache
3. Unvisited pages show an offline fallback page
4. Cart operations queue for later sync

Customization

Colors

{% render 'pwa-manifest',
  theme_color: '#C9A961',
  background_color: '#1A1816'
%}

Install Prompt

{% render 'pwa-install',
  auto_show: true,
  delay: 10,
  position: 'bottom'
%}

Analytics

Built-in PWA events tracked automatically:

• PWA Installed
• PWA Launched
• PWA Install Prompt Shown/Dismissed
• PWA Offline Mode

Browser Support

Browser	Install	Offline	Notifications
Chrome Desktop	Yes	Yes	Yes
Edge Desktop	Yes	Yes	Yes
Chrome Android	Yes	Yes	Yes
Samsung Internet	Yes	Yes	Yes
Safari iOS	Manual	Yes	No
Firefox	No	Yes	No

Testing Checklist

• Service worker registers (check DevTools > Application)
• Install prompt appears after delay
• App installs successfully on desktop and mobile
• Offline mode works (DevTools > Network > Offline)
• Cached assets load when offline
• Updates work correctly (new service worker activates)