给你的网站增加一个桌面应用：PWA的探索-倦意博客

看到了有不少网站增加了PWA的支持，我也对PWA进行了不少的探索。

支持PWA后，在访问你的网站时，右上角会提示本网站有应用。󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄣󠄡󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄥󠄦󠄤󠄡󠄣󠄣󠄨󠄢󠄬󠅒󠅢󠄟󠄮󠇕󠅰󠆖󠇖󠅴󠅿󠇕󠅽󠆊󠇕󠆞󠆒󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

安装完毕后桌面上也会显示一个PWA应用。

点开应用后会直接在APP内打开你的网站。跟原生APP相似。

PWA是什么？

PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。

PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，其目的是通过各种 Web 技术实现与原生 App 相近的用户体验。󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄣󠄡󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄥󠄦󠄤󠄡󠄣󠄣󠄨󠄢󠄬󠅒󠅢󠄟󠄮󠇕󠅰󠆖󠇖󠅴󠅿󠇕󠅽󠆊󠇕󠆞󠆒󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

如何将你的网站支持PWA？

我下面写的一些代码，大家可以直接拿来用：

1.在你的网站根目录下创建一个 manifest.json

里面的内容需要你自己去修改󠄐󠄹󠅀󠄪󠄢󠄡󠄦󠄞󠄧󠄣󠄞󠄢󠄡󠄦󠄞󠄣󠄡󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄥󠄦󠄤󠄡󠄣󠄣󠄨󠄢󠄬󠅒󠅢󠄟󠄮󠇕󠅰󠆖󠇖󠅴󠅿󠇕󠅽󠆊󠇕󠆞󠆒󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

{
    "background_color": "#f9f9f9",
    "description": "倦意博客（jyblog.cn）是一家专注于技术分享、网站美化和个人项目展示的博客网站。我们的宗旨是为广大技术爱好者提供最新的技术资讯、最有价值的技术解决方案，并具有创新性的理念和设计，同时也关注个人项目和网站美化。博客成立于2022年，并在短时间内快速发展壮大，并拥有了一批忠诚的读者群体。",
    "display": "standalone",
    "icons": [
        {
            "sizes": "16x16 24x24 32x32 64x64",
            "src": "/favicon.ico",
            "type": "image/x-icon"
        },
        {
            "sizes": "192x192",
            "src": "/image/favicon192.png",
            "type": "image/png"
        },
        {
            "sizes": "512x512",
            "src": "/image/favicon512.png",
            "type": "image/png"
        }
    ],
    "lang": "zh-CN",
    "name": "倦意博客",
    "orientation": "portrait",
    "short_name": "倦意博客",
    "start_url": ".",
    "theme_color": "#6cc"
}

2.在网站的<head> 部分，添加对 manifest.json 的链接：

PS：有些主题，比如子比在自定义头部HTML里面添加

<link rel="manifest" href="/manifest.json">

3.在你的网站根目录下创建一个 sw.js

// 缓存名称和版本，更新版本可以强制刷新缓存
const CACHE_NAME = 'jyblog-v1';
// 需要预缓存的核心资源列表
const urlsToCache = [
  '/',
  '/styles/main.css',    // 替换为您的主要CSS文件路径
  '/scripts/main.js',    // 替换为您的主要JS文件路径
  // 添加其他关键资源，如Web字体、Logo等
];

// 安装阶段：预缓存关键资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('已打开缓存');
        return cache.addAll(urlsToCache);
      })
  );
});

// 激活阶段：清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('删除旧缓存：', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

//  fetch 事件：缓存优先，网络为备用的策略
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 如果在缓存中找到，就直接返回
        if (response) {
          return response;
        }
        // 否则从网络获取
        return fetch(event.request).then(networkResponse => {
          // 可选：将新请求添加到缓存中
          // return caches.open(CACHE_NAME).then(cache => {
          //   cache.put(event.request, networkResponse.clone());
          //   return networkResponse;
          // });
          return networkResponse;
        });
      })
  );
});

4.在<head> 或 <body> 末尾添加以下代码：

PS：有些主题，比如子比在自定义底部HTML代码里面添加

<script>
  // 检查浏览器是否支持 Service Worker
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/sw.js')
        .then(function(registration) {
          console.log('ServiceWorker 注册成功，作用域为: ', registration.scope);
        })
        .catch(function(error) {
          console.log('ServiceWorker 注册失败: ', error);
        });
    });
  }
</script>

这样，你的PWA应用就创建成功了！