Building Progressive Web Applications/

...

/

Static Caching or Pre-Caching

Static Caching or Pre-Caching

Learn pre-caching and how to implement it in a progressive web app.

We'll cover the following...

Pre-caching

In pre-caching, we cache static assets during the service worker’s install event to serve them during the fetch event. After pre-caching, our app loads even if the user is offline because we don’t make network requests. All the static assets are stored in the cache.

Now, let’s practice what we should store in our static cache. Consider the following HTML file as the index.html file for a web app and think about what should be in the static cache.

Press + to interact
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/src/icons/touch-icon-iphone.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="/src/css/app.css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1>Welcome <i class="fa-duotone fa-door-open"></i></h1>
        <p>This is my landing page!</p>
    </div>
    
    <script src="/src/js/app.js"></script>
    <script src="/src/js/utils.js"></script>
</body>
</html>

The following are the items that we should store in the cache from the above index.html file:

  • We should add the index.html file itself because it’s the landing page for the web app. If it isn’t cached, the request to the index page will fail, and the app will not even load offline.
  • We should cache the style sheets used by the index file for its core stylings. We should also cache the Bootstrap CDN because the page might also use some styling from Bootstrap. The CDN content is static and is ideal for caching.
  • We should cache the scripts used by the index file for its core functionality, like utils.js.
  • We should cache the page because it includes an icon for the apple-touch-icon meta tag in addition to icons from Font Awesome.

All these assets define the app’s shell and should ...