Salesforce Docs Portal

Static Assets Differences with PWA Kit

PWA Kit uses a traditional Webpack-based approach with SVG sprites and utility functions for responsive images. Storefront Next leverages Vite's native asset handling with a modern component-based approach for responsive images and tree-shaken icon imports. The shift simplifies asset management while providing more powerful responsive image capabilities through the DynamicImage component.

Key Differences

Aspect PWA Kit Storefront Next
Build Tool Webpack Vite
Static Directory app/static/ public/
Asset URLs getAssetUrl() helper Direct / paths
Icon System SVG sprite sheet Tree-shaken React icons
Image Component Custom with SSR preload <picture> with React 19 preload
Responsive Images Utility functions DynamicImage component
Font Strategy Chakra UI defaults Tailwind CSS defaults
CSP Headers Explicit in ssr.js Framework-handled

Image Import Patterns

PWA Kit:

import { getAssetUrl } from "@salesforce/pwa-kit-react-sdk/ssr/universal/utils";

const src = getAssetUrl("static/img/hero.png");
// Result: /mobify/bundle/development/static/img/hero.png?v=abc123

Storefront Next:

import heroImage from "/images/hero.png";
// or
const src = "/images/hero.png";

Icon Usage

PWA Kit:

// Import registers to sprite
import "@salesforce/retail-react-app/app/assets/svg/search.svg";

// Use via sprite reference
<Icon>
  <use xlinkHref="#search" />
</Icon>;

Storefront Next:

import { Search } from "lucide-react";

<Search className="h-5 w-5" />;

Responsive Image Handling

PWA Kit:

// Manual utility function usage
const {srcSet, sizes} = getResponsivePictureAttributes({
    src: imageUrl,
    breakpoints: [320, 640, 1024]
})

<picture>
    <source srcSet={srcSet} sizes={sizes} />
    <img src={imageUrl} alt={alt} />
</picture>

Storefront Next:

// Component handles complexity
<DynamicImage
  src={imageUrl}
  alt={alt}
  widths={{ base: "100vw", md: "50vw", lg: "33vw" }}
  priority="high"
/>

Key Similarities

  1. Lazy loading default: Both default to loading="lazy".
  2. B2C Commerce images: Both use Dynamic Imaging Service (?sw={width}).
  3. System fonts: Neither bundles custom web fonts.
  4. SSR awareness: Both handle preloading for above-fold images.
  5. Aspect ratio handling: Both manage layout stability.

Storefront Conversion Considerations

  • Asset Path Changes

    • Replace getAssetUrl() with direct / paths.
    • Move files from app/static/ to public/.

  • SVG Icons

    • Replace sprite imports with lucide-react icons.
    • Or create individual SVG component imports.

  • Image Component

    • Replace custom Image with DynamicImage.
    • Update width props to new format.

  • Responsive Images

    • Convert utility function usage to DynamicImage props.
    • Breakpoint format changes from array to object.