Boost Mobile Web Performance with Rax PWA: Fast Loading, No White‑Screen, Seamless Offline

Rax PWA is a Progressive Web App solution based on Rax 1.x that allows developers to create full‑featured PWAs with minimal configuration, delivering a native‑like experience on the web.

Optimized Navigation

Traditional multi‑page web apps reload all resources on each navigation, causing delays. By using a Single Page Application (SPA) approach, Rax provides a built‑in SPA solution that requires only an app.json configuration to generate routes and component mappings.

To address large JavaScript bundles in mobile SPA scenarios, Rax 1.x implements page‑component code splitting and on‑demand loading, creating smaller bundles and loading only the code needed for the current route.

Eliminating White‑Screen

The App Shell feature supplies the minimal HTML, CSS, and JS needed to render the page structure before JavaScript execution, effectively removing white‑screen delays.

Adding a shell entry in app.json with a source file generates the App Shell automatically.

{
  "shell": {
    "source": "shell/index"
  },
  "hydrate": true
}

Unlike Google’s App Shell concept, Rax PWA’s App Shell can be developed with JSX, pre‑built, and inserted into HTML for fast rendering. It supports lifecycle methods, hooks, and external dependencies.

TabBar

App Shell can host common interactive structures such as a TabBar, enabling quick page previews.

Skeleton Screens

Skeleton screens occupy space while data loads, reducing perceived waiting time. Example implementation:

// /src/shell/index.jsx
import { createElement, Fragment, useEffect, useState } from 'rax';

function Shell(props) {
  const [showSkeleton, setShowSkeleton] = useState(true);
  useEffect(() => {
    setShowSkeleton(false);
  });
  return (
    <>
      <img style={{display:showSkeleton?'block':'none'}} src="data:image/png;base64,xxx" />
      {props.children}
    </>
  );
}

export default Shell;

Instant First Paint

The rax-plugin-pwa plugin enables features such as snapshot rendering and cache control to achieve instant first‑paint experiences.

Snapshot

When network conditions are poor, the snapshot feature stores the previous page content and quickly fills the blank screen on subsequent visits, improving first‑screen speed.

{
  "plugins": [
    ["rax-plugin-pwa", { "snapshot": true }]
  ]
}

Cache Control

Service Workers (SW) manage caching, intercept network requests, and support offline access. Rax provides a lightweight SW configuration without heavy frameworks like Workbox.

{
  "plugins": [
    ["rax-plugin-pwa", {
        "serviceWorker": {
          "preCacheUrlList": ["https://img.alicdn.com/tfs/rax.png"],
          "savedCachePatternList": ["/my-app/.+/i"]
        }
      }]
  ]
}

Performance tests show significant improvements under Slow 3G conditions:

Standard project – FCP 15558.7 ms, Load 15474.7 ms. Snapshot enabled – FCP 2032.5 ms (87% reduction), Load 16317.9 ms. Service Worker enabled – FCP 3096.2 ms (80% reduction), Load 5147.8 ms (66% reduction).

Accelerating Data Requests

Server‑Side Rendering (SSR) further speeds up first‑screen rendering and data fetching by rendering pages on the server and delivering fully formed HTML to the client.

{
  "plugins": [
    ["rax-plugin-ssr"]
  ]
}

Fast App Launch

By configuring a Web App Manifest, users can add the PWA to their home screen for instant launch, with customizable icons and splash screens.

{
  "plugins": [
    ["rax-plugin-pwa", {
        "manifest": {
          "name": "My Progressive Web App",
          "short_name": "MyPWA",
          "description": "My awesome Progressive Web App!",
          "background_color": "#ffffff",
          "icon": "src/public/icon.png",
          "start_url": "//market.m.taobao.com/app/mtb/rax-pwa-demo/web/index.html#/",
          "display": "standalone"
        }
      }]
  ]
}

The manifest generation automatically creates icons of various sizes to meet platform requirements.

Ongoing Mobile Web Optimization

Rax PWA follows the PRPL development model (Push/Preload, Render, Pre‑cache, Lazy‑load) and continues to evolve, aiming to improve developer experience, component performance, and integration across containers, with upcoming optimizations planned for major events such as Double‑Eleven.

For detailed usage, visit https://rax.js.org/pwa .