# PWA

**Repository Path**: kevindish/pwa

## Basic Information

- **Project Name**: PWA
- **Description**: 最简单service work项目，pwa 断网访问
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-06-28
- **Last Updated**: 2025-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PWA

### 首页加载 js

```javascript
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker
      .register("sw.js", { scope: "./" })
      .then(function (registration) {
        console.log(
          "serviceWorker registeantion successful with scope:",
          registration.scope
        );
      })
      .catch(function (err) {
        console.log("serviceWorker registeantion failed", err);
      });
  });
}
```

### serviceWorker.js

##### serviceWorker.js 资源 事件 install

```javascript
const staticAssets = ["./", "./index.html"];

self.addEventListener("install", async (event) => {
  const cache = await caches.open("news-static");
  cache.addAll(staticAssets);
});
```

##### serviceWorker.js 资源 事件 fetch

```javascript
self.addEventListener("fetch", (event) => {
  const req = event.request;
  const url = new URL(req.url);
  if (url.origin == location.origin) {
    event.respondWith(cacheFirst(req));
  } else {
    event.respondWith(networkFirst(req));
  }
});
```

##### serviceWorker.js 方法

```javascript
async function cacheFirst(req) {
  const cachedRespone = await caches.match(req);
  return cachedRespone || networkFirst(req);
}

async function networkFirst(req) {
  const cache = await caches.open("news-dynamic");
  try {
    const res = await fetch(req);
    cache.put(req, res.clone());
    return res;
  } catch (error) {
    const cachedRespone = await cache.match(req);
    return cachedRespone || (await caches.match("./fallback.json"));
  }
}
```