pwa学习整理使用cacheStorage在离线时访问缓存资源

最新推荐文章于 2024-06-05 22:49:17 发布

前端小黑

最新推荐文章于 2024-06-05 22:49:17 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zemprogram/article/details/103001260

版权

cacheStorage

在pwa中，我们要实现访问一个断网的页面，显示上一次的数据的功能，就必须将上一次的数据存储到缓存中，具体的就是存储到cacheStorage中。
使用一个在service worker中使用cacheStorage的例子来讲述缓存的过程

初始化各文件

首先建立目录如下
在这里插入图片描述

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PWA-TEST</title>
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/index.css">
</head>

<body>
    <h1>hello pwa</h1>
    <script>
        window.addEventListener('load', async() => {
    
            if ('serviceWorker' in navigator) {
    
                try {
    
                    const registration = await navigator.serviceWorker.register('./sw.js');
                    console.log('注册成功', registration)
                } catch (e) {