让网站支持 PWA：如此简单的指南，让您的网站更上一层楼

2023-10-28 05:57:16

PWA：如此简便的指南，让你的网站焕然一新

网站配置 PWA 的步骤可谓简单明了，总结起来就是：

编写 manifest.json 文件。
编写 serviceWorker.js 文件。
在 index.html 中引入上述两个文件。
将上述三个文件放置在网站根目录（或同一目录下）。

1. manifest.json

manifest.json 文件定义了 PWA 的基本信息，包括应用程序名称、图标、启动屏幕颜色等。

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000"
}

2. serviceWorker.js

serviceWorker.js 文件负责控制 PWA 的离线功能，如缓存资源和处理推送通知。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/script.js'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

3. index.html

在 index.html 中，引入 manifest.json 和 serviceWorker.js 文件。

<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>My PWA</h1>
  <script src="/serviceWorker.js"></script>
</body>
</html>