Skip to main content
What can we help you with?
< All Topics
Print
Posted
Updated
Byamanstacker@gmail.com

How To Set Up Pre-Caching In Hyper PWA

Pre-Caching allows Hyper PWA to automatically cache important pages and resources during the service worker installation process. This helps improve loading speed and ensures selected content remains available even when the user has limited or no internet connectivity.

With Hyper PWA, you can pre-cache content using:

  • Post Types
  • Specific Post Selection
  • Manual URLs

What Is Pre-Caching?

Pre-caching downloads and stores selected pages in the browser cache when the service worker is installed.

Benefits include:

  • Faster page loading
  • Improved user experience
  • Better offline support
  • Reduced server requests for frequently accessed content

Hyper PWA provides flexible controls so you can decide exactly which content should be available from cache.

Step 1: Open Hyper PWA Dashboard

Log in to your WordPress administration area.

Navigate to:

Hyper PWA → Core Features

Open the Pre Caching accordion section.

Step 2: Enable Pre-Caching Configuration

Inside the Pre Caching section, you will find the available caching options.

These options allow you to choose:

  • Which post types should be cached
  • How many latest posts should be cached
  • Specific posts that should be cached
  • Additional custom URLs to cache

Step 3: Save Settings

After configuring your pre-caching rules:

  1. Click Save Settings
  2. Wait for the settings to be stored successfully

Step 4: Refresh the Service Worker

After changing pre-caching settings, the service worker must be updated.

To ensure the new cache list is generated:

  1. Open your website in a new tab
  2. Hard refresh the page

Windows:

Ctrl + F5

Mac:

Cmd + Shift + R

The updated service worker will install and download the newly configured resources.

How To Verify Pre-Caching Is Working

There are several ways to verify that Hyper PWA has successfully pre-cached your content.

Method 1: Verify Using Chrome DevTools Cache Storage

Open your website in Google Chrome.

Steps

  1. Press F12
  2. Open the Application tab
  3. Expand Cache Storage
  4. Select the Hyper PWA cache

You should see cached URLs that match your:

  • Selected post types
  • Specific posts
  • Manual URLs

Method 2: Verify Using the Network Panel

Open Chrome DevTools.

Steps

  1. Press F12
  2. Open the Network tab
  3. Refresh the page multiple times

When pre-caching is working correctly, some resources may be served from:

  • Service Worker
  • Memory Cache
  • Disk Cache

Depending on your caching strategy and browser behavior.

Method 3: Test Offline Mode

This is the easiest way to verify pre-cached pages.

Steps

  1. Open Chrome DevTools
  2. Navigate to the Network tab
  3. Change the network status to Offline
  4. Visit a page that was configured for pre-caching

If the page was successfully pre-cached:

  • The page should continue loading
  • Content should be visible
  • Static assets may load from cache

Expected Result

A selected pre-cached page should remain accessible even without an internet connection.

Best Practices

For optimal performance, consider pre-caching:

  • Homepage
  • About Us page
  • Contact page
  • Documentation pages
  • Frequently visited landing pages
  • Important product pages

Avoid pre-caching a very large number of pages unless necessary, as this can increase installation time and cache size.

Table of Contents