Boost Your Web App with PWA: From Service Workers to First‑Load Optimization

Note: This article assumes some PWA basics.

1. What is PWA?

PWA stands for Progressive Web App, which is an enhanced, web‑based application that behaves like a native app. It relies on a set of technologies and standards, illustrated in the diagram below.

A simple demo demonstrates the concept.

Front‑end developers should pay attention to PWA because it enables web sites to behave like apps.

2. First‑Screen Optimization

2.1. Static Resource Optimization

Cache can be used to improve performance. For the first load, precache (pre‑loading) is applied: resources needed for the site are listed during build and inlined into

sw.js

. When the Service Worker installs, it fetches and caches all listed resources, ensuring that any page the user visits is served from cache.

The result is a noticeable first‑screen speed boost, as shown in the screenshot below.

2.2. Dynamic Data Optimization

Beyond static assets, CGI data can also be cached. The workflow differs in two ways: a switch is needed to decide which CGI responses to cache, and after returning a cached response the page must still request fresh data to update the UI, causing the page to render twice.

Displaying the page twice may affect user experience; the decision depends on business needs.

After implementing this, the first‑screen performance improves, as demonstrated below.

Dynamic data caching requires additional logic to determine its usefulness; this will be added later.

2.3. Direct‑HTML Caching

HTML generated on the server can also be cached. For details, see the referenced article “Penguin Tutoring Course Detail Page Millisecond Opening – PWA Direct Output”.

3. Replacing Offline Packages

PWA and offline packages share the same offline‑caching principle. Our legacy PC client’s offline‑package system is being replaced by a PWA solution.

The core flow mirrors static‑resource caching, but the offline‑package system is mature, so full replacement requires careful handling.

3.1. Update Mechanism

Offline packages automatically check for updates and replace themselves after a single navigation. Service Workers, however, only check for updates after the page loads and apply them on the next navigation. Two approaches were considered:

Implement an automatic update API for Service Workers (unsupported by our low‑version WebKit).

Update the Service Worker on the first navigation, then detect the new version and refresh the page on the next navigation.

We chose the second approach. The relevant code snippet is shown below.

After detecting an update, we can force a refresh or prompt the user.

3.2. First‑Open Issue

Offline packages are bundled with the app, so the first launch is instant. Service Workers lack this capability. Two solutions were evaluated:

During app installation, launch a hidden WebView to initialize the Service Worker and copy its cache files (too complex, not adopted).

On app start, create a hidden WebView that loads a blank page to trigger the Service Worker.

We adopted the second solution, as shown below.

Note: This “app” refers to a PC client, not a mobile app.

3.3. Switch Mechanism

During development we sometimes need to disable offline caching. Similar to the “disable offline package” option, a global switch in

sw.js

can turn caching on or off, which we use in the dev environment.

3.4. Downgrade Strategy

If a faulty version is released, we can quickly roll back by disabling the cache switch via a management interface, forcing users to fetch resources online until the fix is deployed.

The downgrade flow includes publishing the bad code, turning off the cache switch, fixing and redeploying the code, then re‑enabling the switch.

4. Easy Integration

All the above features are packaged into a webpack plugin that automatically generates

sw.js

and injects the necessary code into HTML during the build.

5. Future Directions

Potential future work for PWA includes:

5.1. Deep Business Integration

Service Workers offer many capabilities (e.g., server load control, pre‑fetching, automatic cache updates) that can be tailored to specific business needs.

Server load control: discard or delay requests when the server is under heavy load.

Pre‑fetching: after serving a response, scan it for additional resource URLs and fetch them proactively.

Automatic cache updates: push updated data from the server to the Service Worker.

5.2. Continued PWA Advocacy

While browser support is still limited, monitoring and contributing to PWA advancements (such as X5 kernel support) remains important.