WEB APP 使用pwa将网页添加至应用

最新推荐文章于 2023-11-17 08:46:46 发布

小Demo吃面包

最新推荐文章于 2023-11-17 08:46:46 发布

阅读量221

点赞数

分类专栏：前端文章标签： web app javascript 前端 webapp

本文链接：https://blog.csdn.net/qq_35372797/article/details/126929101

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果展示:
在这里插入图片描述
将manifest.json,index.html,serviceWorker.js,144.png都放在网站根目录下

manifest.json

{
  "name": "蛙特",
  "short_name": "what",
  "start_url": "/index.html",
  "id": "/index.html",
  "display": "standalone",
  "background_color": "#ddd",
  "theme_color": "#fff",
  "icons": [
    {
      "src": "144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>蛙特</title>
    <link rel="manifest" href="/manifest.json" />
  </head>
  <body>
    hello what
  </body>
  <script>
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", function () {
          navigator.serviceWorker
            .register("./serviceWorker.js")
            .then((res) => console.log("service worker registered"))
            .catch((err) => console.log("service worker not registered", err));
        });
      }
  </script>
</html>

serviceWorker.js

const cacheName = "what";
const cacheFiles = ["/", "/index.html", "/manifest.json"];

/**
 * 安装 Service Worker
 */
self.addEventListener("install", e => {
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      return cache.addAll(cacheFiles);
    }),
  );
});


/**
 * 激活 Service Worker
 */
self.addEventListener("activate", (e) => {
  e.waitUntil(
    caches
      .keys()
      .then((keys) => {
        return Promise.all(
          keys.map((key) => {
            if (cacheName !== key) {
              return caches.delete(key);
            }
          })
        );
      })
      .then(() => {
        console.log("cache deleted");
      })
  );
});

self.addEventListener("fetch", event => {
  event.respondWith(
    caches
      .open(cacheName)
      .then(cache => cache.match(event.request, { ignoreSearch: true }))
      .then(response => {
        return response || fetch(event.request);
      }),
  );
});