怎么构建有推送通知的 GitHub 跟踪器，你知道吗

时间：2022-08-18 22:30:01 sub板端连接器

在这篇文章中，你将学习如何构建一个 GitHub 跟踪器，当跟踪的存储库中有新的问题/PR 它通过发送推送通知通知用户。

假如你选择加入，GitHub 电子邮件已经发出通知，但许多研究表明，推送通知比电子邮件更能吸引用户。按本教程构建 GitHub 在跟踪器之后，习如何：

添加服务员并将跟踪器转换为PWA
订阅推送通知
使用GitHub API
通过Vercel云函数发送推送事件
使用EasyCron定期获取新问题

先决条件

阅读本文需要一些技能和服务：

安装了Node.js和 npm
先前的Svelte知识
一个免费的GitHub因为我们使用帐户，我们使用它GitHub API
一个免费的MongoDB Atlas云中使用帐户 MongoDB
免费部署应用程序和云功能Vercel帐户

推送通知是什么？

让我们来看看这些所谓的推送通知是什么。

您必须熟悉定期通知。这些是屏幕上出现的小气泡文本通知你有些事。推送通知类似，只是它们不是按需生成的，而是接收推送事件时产生的。推送通知当应用程序关闭时常规通知要求您打开应用程序。

现代 Web 浏览器（如 Chrome）通过使用被称为服务工作者的东西来支持推送通知。Service Worker 是浏览器主线程独立运行的一小段 JavaScript，因此，如果您的应用程序安装为 PWA（渐进式 Web 应用程序)，可以离线运行。

推送通知用于聊天应用程序，通知用户有未读信息时，在游戏中，通知用户游戏事件，在新闻网站上，通知用户突发文章和许多其他目的。

推送通知显示在您的应用程序中有四个步骤：

请求许可window.Notification.requestPermission()
将你的应用程序转换为游戏 PWA 并安装它
订阅推送事件
收到推送事件后，发出通知

第 1 步骤：创建跟踪器

让我们在本文中使用它 Svelte 和Vite.js，而不是 Rollup。顾名思义，Vite 比 Rollup 更快，并且还提供了对环境变量的内置支持。要使用 Svelte 和 Vite 创建新项目，请操作以下命令：

npm init vite

选择要成为的框架svelte。如果你愿意，你可以使用它 TypeScript。我会用常规的 JavaScript。

接下来，cd您可以进入项目文件夹TailwindCSS添加到您的应用程序中，并使用以下命令安装所有依赖项：

npx svelte-add tailwindcss  # Install packages yarn install # or npm install

最后，在您最喜欢的代码编辑器中打开项目并打开项目http://localhost:3000npm run dev上运行或yarn dev启动应用程序。

跟踪器将如何工作

我们将使用 GitHub API 获取用户跟踪的存储库的问题列表和提取请求。用户跟踪的存储库及其用户名将存储在 MongoDB 数据库中。

第一步是提示用户输入他们的用户名。Create
src/lib/UsernamePrompt.svelte，它将是执行此操作的组件。这是我的表格 UI，但可根据需要设计：

     Enter a username
   Enter a username to use this tracker

这样添加这个组件App.svelte：

接下来，让我们添加主动跟踪器 UI。创建文件src/lib/Tracker.svelte并添加以下代码：

     GitHub tracker
           Tracked repositories
                    https://github.com/test/test

请测试您的组件暂时将组件换成UsernamePrompt新Tracker组件App.svelte：

您的屏幕现在应如下所示：

注：记得恢复App.svelte到以前的代码！

第 2 步骤：设置云功能

我们需要一个后端服务器向我们的应用程序发送推送事件。这意味着你需要创建一个新的(可能)ExpressJS 项目，然后单独部署。对于刚试图推送通知的人来说，这将是一件令人头疼的事情。

Vercl 云函数来救援！云功能就像 Express 路由。他们可以运行代码并在您获取其 URL 时给您响应。Vercel 支持云功能；您只需要在api文件夹中创建文件。您将使用云功能与 MongoDB 进行交互，因为在客户端公开秘密从来都不是一件好事。

首先，确保您在MongoDB Atlas中有一个集群。MongoDB 有一个免费计划 ( M0)，所以如果您还没有，请务必创建一个。现在，转到Atlas 仪表板侧栏中的Database Access选项卡。通过单击右侧的绿色按钮添加新的数据库用户。输入用户的详细信息（不要忘记密码），然后创建用户。

要连接到数据库，您需要连接字符串。将新用户和密码保存在某处，然后前往集群概览。单击右侧的连接按钮，然后选择连接您的应用程序作为连接方法。您应该看到一个类似于下面的连接字符串。

现在您有了连接字符串，您可以连接到数据库，但首先，您需要将当前应用程序部署到Vercel。最简单的方法是使用GitHub。

创建一个新的GitHub 存储库并将您的代码推送到其中。接下来，前往您的Vercel 仪表板并单击“新建项目”按钮。导入您的 GitHub 存储库，确保框架为Vite，并添加一个名为MONGODB_URL. 将其值设置为 MongoDB 数据库的连接字符串。

部署网站后，您需要将本地开发命令从更改yarn dev为vercel dev. 运行命令后，如果系统要求您链接到现有项目，请单击yes。

npm i -g vercel注意：如果您还没有安装 Vercel CLI，请确保安装。

vite像我一样，如果您在使用with时遇到问题vercel dev，请务必将项目的Development Command更改为Vercel Dashboardvite --port $PORT中的from 。vite

这将允许我们在本地使用具有正确环境变量的云函数。

让我们添加一个帮助文件，它允许我们在不打开太多连接的情况下访问 MongoDB。创建文件api/_mongo.js并将以下代码放入其中。api目录中以 a 为前缀的文件_不会被视为云函数。这允许我们在单独的文件中添加助手和其他逻辑：

const { MongoClient } = require("mongodb");

const mongo = new MongoClient(process.env.MONGODB_URL);

// Export the connection promise
export default mongo.connect();

导出连接承诺而不是主客户端本身将防止我们拥有冗余连接，因为我们在无服务器平台中工作。

使用 CommonJS 而不是 ESModules

注意我是如何使用require而不是import? 这是因为，在撰写本文时，Vercel Cloud Functions不支持 JavaScript 文件中的 ESModuleimport语句。相反，您需要使用 CommonJSrequire语句。

这里有一个问题。如果您看到package.json我们应用程序的，您会注意到它有一行"type": "module"。这意味着项目中的每个 JavaScript 文件都是一个 EsModule。这不是我们想要的，所以要将api目录中的所有文件都标记为 CommonJS 文件，这样我们就可以使用require语句，在其中创建api/package.json并添加这一行：

{
  "type": "commonjs"
}

这将允许我们在目录中使用require语句。api使用以下命令安装 MongoDB 连接驱动程序：

# Don't forget to CD!
cd api
npm i mongodb # or use yarn

第 3 步：添加功能

到目前为止，跟踪器并没有真正起作用，所以让我们解决这个问题。

验证

对于身份验证，我们需要将用户输入的用户名存储在 MongoDB 数据库中。

创建一个文件/api/storeusername.js。这将是一个云功能，并将映射到
http://localhost:3000/api/storeusername. 将以下代码放入其中：

const mongoPromise = require("../src/lib/mongo");
// All cloud functions must export a function that takes a req and res object.
// These objects are similar to their express counterparts.
module.exports = async (req, res) => {
  // TODO
};

接下来，像这样获取 MongoDB 客户端：

module.exports = async (req, res) =>
  // Wait for the client to connect
  const mongo = await mongoPromise;
}

username从请求的正文中提取：

// ...
const { username } = req.body;

// Check if the username is valid
if (typeof username !== "string" || !username.trim()) {
  res.status(400).json({ message: "Please send the username" });
  return;
}

接下来，您需要将此用户名存储在数据库中：

// Get the collection
const usersCol = mongo.db().collection("users");
// Check if the username already exists in the database
if (await usersCol.findOne({ _id: username })) {
  res.status(400).json({ message: "User already exists!" });
  return;
}
// We want the username to be the identifier of the user
await usersCol.insertOne({ _id: username });

// Everything went well :)
res.status(200).json({ message: "Username recorded" });

最后，这是api/storeusername.js文件的外观：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;

  const { username } = req.body;
  if (typeof username !== "string" || !username.trim()) {
    res.status(400).json({ message: "Please send the username" });
    return;
  }

  // Get the collection
  const usersCol = mongo.db().collection("users");

  // Check if the username already exists in the database
  if (await usersCol.findOne({ _id: username })) {
    res.status(400).json({ message: "User already exists!" });
    return;
  }

  // We want the username to be the identifier of the user
  await usersCol.insertOne({ _id: username });

  // Everything went well :)
  res.status(200).json({ message: "Username recorded" });
};

使用或通过推送到 GitHub 将您的应用程序部署到 Vercel vercel .，您的无服务器功能应该是实时的！您可以通过以下命令使用 cURL 对其进行测试：

curl -X POST -H "Content-Type: application/json" -d '{"username": "test"}' https://your-app.vercel.app/api/storeusername

users这应该在集合中创建一个新文档，其_id字段是我们刚刚提供的用户名。

现在剩下的就是在前端获取这个函数。在
src/lib/UsernamePrompt.svelte，在submit函数中，首先需要向云函数发送请求，然后将用户名放入localStorage，这样我们就知道用户通过了身份验证。您可以使用以下功能发送请求fetch：

async function submit() {
  const res = await fetch("/api/storeusername", {
    body: JSON.stringify({ username }),
    headers: {
      "Content-Type": "application/json",
    },
    method: "POST",
  });
  const data = await res.json();
  if (!res.ok) alert(data.message);
  else {
    // Store the username in localStorage
    localStorage.setItem("username", username);
    // Reload the page
    window.location.reload();
  }
}

我们正在重新加载页面，因为在中App.svelte，当页面加载时，我们需要检查中是否有用户名localStorage。如果有，我们可以跳过UsernamePrompt屏幕。为此，请将此代码添加到的script标记中App.svelte：

上面的代码将检查localStorage用户名并设置isLoggedIn为true是否存在。接下来，我们要做的就是更新 DOM。在的script标记下App.svelte，添加以下内容：

{#if !isLoggedIn}

{:else}

{/if}

跟踪和取消跟踪存储库

现在让我们为跟踪器的实际跟踪功能添加功能。如果您打开Tracker.svelte，您会注意到有两个功能 -track()和untrack(). 这些函数应该通过将存储库添加到数据库来分别跟踪和取消跟踪存储库。

但在此之前，您需要添加更多的云功能。一个用于跟踪存储库，另一个用于取消跟踪，最后一个用于获取用户跟踪的存储库。

让我们一一研究它们。

跟踪存储库

创建文件api/trackrepo.js. 这将映射到/api/trackrepo：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;
  // TODO
};

当用户想要跟踪存储库时，他们将向POST此函数发送一个请求，其中包含存储库的名称和他们在正文中的用户名。该函数将在集合的trackedRepos字段中添加存储库的名称。users添加一些代码以从正文中获取这些字段：

const { username, repo } = req.body;
if (typeof username !== "string" || typeof repo !== "string") {
  res.status(400).json({ message: "Invalid body" });
  return;
}

最后，通过将存储库添加到数据库来添加代码以跟踪存储库：

// Get the users collection
const usersCol = mongo.db().collection("users");
let user = await usersCol.findOne({ _id: username });
if (!user) {
  res.status(400).json({ message: "User not found" });
}
// Add repository to user's tracked repositories
user.trackedRepos = !user.trackedRepos ? [repo] : [...user.trackedRepos, repo];
// Helps avoid duplicates
user.trackedRepos = [...new Set(user.trackedRepos)];
// Save changes to DB
user = await usersCol.updateOne({ _id: username }, { $set: user });
res.status(200).json({ user });

这api/trackrepo.js应该是这样的：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;

  const { username, repo } = req.body;
  if (typeof username !== "string" || typeof repo !== "string") {
    res.status(400).json({ message: "Invalid body" });
    return;
  }

  const usersCol = mongo.db().collection("users");
  const user = await usersCol.findOne({ _id: username });
  if (!user) {
    res.status(400).json({ message: "User not found" });
  }
  user.trackedRepos = !user.trackedRepos
    ? [repo]
    : [...user.trackedRepos, repo];
  user.trackedRepos = [...new Set(user.trackedRepos)];
  await usersCol.updateOne({ _id: username }, { $set: user });
  res.status(200).json({ user });
};

现在是时候在跟踪器中使用此功能了。打开src/lib/Tracker.svelte并将track()函数更改为：

function track() {
  // If there is no username, reload the page and end the function
  if (!localStorage.getItem("username")) return window.location.reload();

  fetch("/api/trackrepo", {
    body: JSON.stringify({ username: localStorage.getItem("username"), repo }),
    headers: { "Content-Type": "application/json" },
    method: "POST",
  })
    .then(async (r) => {
      // Return the data and the response itself
      return { r, data: await r.json() };
    })
    .then(({ r, data }) => {
      if (!r.ok) alert(data.message);
      else console.log("Repository tracked");
    });
  trackedRepos = [...trackedRepos, repo];
  repo = "";
}

现在，当您在输入中输入存储库并单击Track时，它应该会保存在数据库中。

取消跟踪存储库

让我们添加一个云函数来取消跟踪存储库。创建文件api/untrackrepo.js. 这将映射到/api/untrackrepo：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;
  // TODO
};

这个云函数的请求体将与函数的请求体相同trackrepo——用户username和repo：

const { username, repo } = req.body;
if (typeof username !== "string" || typeof repo !== "string") {
  res.status(400).json({ message: "Invalid body" });
  return;
}

接下来，这里是从用户删除存储库的代码trackedRepos：

const usersCol = mongo.db().collection("users");
const user = await usersCol.findOne({ _id: username });
if (!user) {
  res.status(400).json({ message: "User not found" });
}
if (!Array.isArray(user.trackedRepos)) {
  user.trackedRepos = [];
} else {
  // Remove the repo from the user's list of tracked repos.
  user.trackedRepos = user.trackedRepos.filter((r) => r !== repo);
}
// Save changes
await usersCol.updateOne({ _id: username }, { $set: user });
res.status(200).json({ user });

这api/untrackrepo.js应该是这样的：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;

  const { username, repo } = req.body;
  if (typeof username !== "string" || typeof repo !== "string") {
    res.status(400).json({ message: "Invalid body" });
    return;
  }

  const usersCol = mongo.db().collection("users");
  const user = await usersCol.findOne({ _id: username });
  if (!user) {
    res.status(400).json({ message: "User not found" });
  }
  if (!Array.isArray(user.trackedRepos)) {
    user.trackedRepos = [];
  } else {
    user.trackedRepos = user.trackedRepos.filter((r) => r !== repo);
  }
  await usersCol.updateOne({ _id: username }, { $set: user });
  res.status(200).json({ user });
};

现在是时候在前端使用这个云功能了。在的untrack()函数中src/lib/Tracker.svelte，添加以下代码：

function untrack(repo) {
  // If there is no username, reload the page and end the function
  if (!localStorage.getItem("username")) return window.location.reload();

  fetch("/api/untrackrepo", {
    body: JSON.stringify({ username: localStorage.getItem("username"), repo }),
    headers: { "Content-Type": "application/json" },
    method: "POST",
  })
    .then(async (r) => {
      // Return the data and the response itself
      return { r, data: await r.json() };
    })
    .then(({ r, data }) => {
      if (!r.ok) alert(data.message);
      else console.log("Repository untracked");
    });
  trackedRepos = trackedRepos.filter((r) => r !== repo);
}

您会注意到它与track()函数非常相似，因为它实际上是相同的；只是网址已更新。你现在还不能真正测试它，因为我们没有显示跟踪存储库的列表，所以让我们修复它。

列出跟踪的存储库

这部分非常简单。您只需要从数据库中获取用户跟踪的存储库并将其显示在前端。创建一个云函数api/listrepos.js并向其中添加以下代码：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;
  const username = req.query.username;
  if (typeof username !== "string" || !username.trim()) {
    res
      .status(401)
      .json({ message: "Please send `username` in the querystring." });
    return;
  }

  const usersCol = mongo.db().collection("users");
  const user = await usersCol.findOne({ _id: username });
  if (!user) {
    res.status(400).json({ message: "User not found" });
  }
  let repositories = [];
  if (Array.isArray(user.trackedRepos)) {
    repositories = user.trackedRepos;
  }
  res.status(200).json({ repositories });
};

由于将使用 HTTPGET请求调用云函数，因此您不能在其中放入正文，因此我们使用查询字符串来传递用户名；由于user.trackedReposcan be null，我们确保返回一个数组。接下来，是时候在前端使用这个云功能了！创建一个在文件中async调用的函数。该函数将负责使用我们刚刚创建的云函数从数据库中获取用户跟踪的存储库：
fetchRepossrc/lib/Tracker.svelte

async function fetchRepos() {
  // If there is no username, reload the page and end the function
  if (!localStorage.getItem("username")) return window.location.reload();

  const res = await fetch(
    "/api/listrepos?username=" + localStorage.getItem("username")
  );
  const data = await res.json();
  if (!res.ok) alert(data.message);
  else return data.repositories;
}

当组件被挂载时，我们需要获取这个函数。这可以使用onMountSvelte 中的钩子来完成。当组件挂载时，我想将上述函数的返回值设置为一个名为的变量trackedRepos，这样我们就可以在 DOM 中使用它了：

import { onMount } from "svelte";

let trackedRepos = [];
onMount(async () => {
  trackedRepos = await fetchRepos();
});

现在我们可以访问用户的跟踪存储库，让我们更新 HTML 模板Tracker.svelte以显示跟踪存储库的准确列表：


  
    {#each trackedRepos as repo}
      
        https://github.com/{repo}
        
      
    {/each}

我们仍然需要重新加载页面才能看到任何更改。让我们通过每次单击track或untrack按钮时更新 DOM 来解决这个问题：

function track() {
  // ...
  trackedRepos = [...trackedRepos, repo];
  repo = "";
}

function untrack(repo) {
  // ...
  trackedRepos = trackedRepos.filter((r) => r !== repo);
}

这是Tracker.svelte应该的样子：




  GitHub tracker

  
  

  Tracked repositories
  
    {#each trackedRepos as repo}
      
        https://github.com/{repo}
        
      
    {/each}

这是应用程序现在应该如何显示的屏幕截图。

第 4 步：使应用程序可安装

推送通知仅在已安装的应用程序上受支持。是的，您可以使用支持的浏览器（即 Chrome 和其他基于 Chromium 的浏览器）将 Web 应用程序安装为常规应用程序。

要使应用程序可安装，您需要将其转换为渐进式网络应用程序。这是一个三步过程：

添加服务人员
让您的应用离线工作
添加manifest.json文件

如果所有三个步骤都完成，当您访问应用程序时，地址栏上会出现一个安装按钮。

添加服务工作者

服务工作者是可以在后台运行的 JavaScript 文件，脱离浏览器的主线程。这允许他们执行离线运行、在后台运行和下载大文件等操作。它们主要用于缓存请求和监听事件，我们将做这两件事。

要添加服务工作者，您需要添加一个公开可用的 JavaScript 文件，就像任何 CSS 文件一样。名称并不重要，但通常命名为service-worker.jsor sw.js。这个文件应该像你的 CSS 一样公开提供，所以把它放在public目录中。

服务工作者通过监听事件来工作。对于缓存文件，以便您的应用程序离线工作，您将监听install,activate和fetch事件。install安装服务工作者时调用该事件。activate当服务工作者运行时调用该事件，并且每当fetch发出网络请求时调用该事件。可以使用添加事件侦听器self.addEventListener()。让我们创建一个public/service-worker.js文件并向其中添加以下代码：

self.addEventListener("install", (event) => {
  console.log("Installed SW");
});

self.addEventListener("activate", (event) => {
  console.log("Activated SW");
});

self.addEventListener("fetch", (event) => {
  console.log("Fetch:", event.request);
});

剩下的就是注册这个 service worker。我们将在的onMount函数中做到这一点App.svelte。在内部回调的末尾添加此代码onMount：

if ("serviceWorker" in navigator) {
  // Service worker supported
  navigator.serviceWorker.register("/service-worker.js");
}

上面的代码首先在浏览器中检查 Service Worker 的支持，然后注册我们的 Service Worker。需要注意的是，register()函数中的路径是相对于您的域的路径，而不是相对于项目文件夹的路径——这意味着服务工作者应该可以在访问
http://localhost:3000/service-worker.js，因为它在public目录中。

现在，如果您重新加载页面并打开控制台，您应该会看到上述消息。

让我们的应用离线工作

要使应用离线工作，您需要使用服务工作者缓存其内容。由于我们的应用程序向云功能发出请求，因此在没有网络的情况下，它实际上并不能做太多事情。因此，让我们显示一个指示我们处于离线状态的页面，而不是显示应用程序的缓存、无功能版本。创建一个public/offline.html文件并将以下代码放入其中：



  
    
    
    
    You're offline
  
  
    You're offline
    This app doesn't work while offline. Please check your network

您可以随意自定义此页面。您现在需要缓存此页面。缓存也是一个三步过程，它使用了我们监听的上述三个 service worker 事件。以下是它的工作原理：

打开缓存并使用将所需路由添加到缓存中cache.add。这发生在install.
旧的缓存被删除，因此只有最新的缓存被保存到用户的计算机上。这使用了更少的存储空间。这发生在activate.
我们拦截任何网络请求并检查这些请求是否是页面导航——即更改路由。如果请求成功，一切都很好，但如果请求失败，我们将offline.html要显示的页面交付给用户。这发生在fetch.

让我们实现第一步。打开 service worker 文件并更改install事件的处理程序，如下所示：

let CACHE_NAME = "cache-" + Date.now();

self.addEventListener("install", event => {
  console.log("Installed SW");
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.add("/offline.html");
    });
  );
  self.skipWaiting();
});

event.waitUntil()是一个类似于await关键字的函数。的回调addEventListener不能是异步的，因此要实现该功能，我们应该使用event.waitUntil()并向其传递一个 Promise，以便等待该 Promise。

self.skipWaiting()告诉浏览器我们已经完成了这个install过程，所以激活 service worker。说到activate，现在让我们添加代码以删除所有旧缓存：

self.addEventListener("activate", (event) => {
  console.log("Activated SW");
  event.waitUntil(
    // Loop through the cache
    caches.keys().then((keys) => {
      // We must return a promise so it gets awaited
      return Promise.all(
        keys.map((k) => {
          // If the key doesn't match the name of the current cache, delete it
          if (k !== CACHE_NAME) return caches.delete(k);
        })
      );
    })
  );
});

有了这个，offline.html页面应该被缓存。要仔细检查，请通过按下F12并选择应用程序选项卡打开开发人员工具。在侧边栏上，应该有一个缓存存储选项卡。点击它，你应该注意到/offline.html。

现在剩下要做的就是在没有网络时提供这个文件：

self.addEventListener("fetch", (event) => {
  console.log("Fetch:", event.request);

  // We only want to send /offline.html when the user is navigating pages,
  // not when they're requesting something else like CSS files or API requests.
  if (event.request.mode !== "navigate") return;

  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.open(CACHE_NAME).then((cache) => {
        return cache.match("offline.html");
      });
    })
  );
});

该函数将使用传递给它event.respondWith()的任何对象响应网络获取请求。Response在这种情况下，我们首先获取请求，如果请求失败，这很可能是由于互联网问题，我们将发送offline.html页面，该页面由服务工作者缓存。

现在刷新页面并关闭 Wi-Fi 或以太网。刷新时，您现在应该会看到我们的离线页面，而不是默认的 chrome “无网络”页面。不幸的是，这个离线页面没有恐龙游戏，但它确实使我们能够将应用程序安装为 PWA。

以下是 service worker 的外观：

let CACHE_NAME = "cache-" + Date.now();

self.addEventListener("install", (event) => {
  console.log("Installed SW");
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.add("/offline.html");
    })
  );
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  console.log("Activated SW");
  event.waitUntil(
    // Loop through the cache
    caches.keys().then((keys) => {
      // We must return a promise so it gets awaited
      return Promise.all(
        keys.map((k) => {
          // If the key doesn't match the name of the current cache, delete it
          if (k !== CACHE_NAME) return caches.delete(k);
        })
      );
    })
  );
});

self.addEventListener("fetch", (event) => {
  console.log("Fetch:", event.request);

  // We only want to send /offline.html when the user is navigating pages,
  // not when they're requesting something else like CSS files or API requests.
  if (event.request.mode !== "navigate") return;

  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.open(CACHE_NAME).then((cache) => {
        return cache.match("offline.html");
      });
    })
  );
});

添加manifest.json文件

或 Web 清单包含有关您的应用程序的manifest.json一些有用信息——例如应用程序的名称、主题颜色、描述、图标等等。该文件通常被调用manifest.json，并且必须使用 HTML 中的标签链接到您的网站，就像链接 CSS 文件的方式一样。让我们为我们的应用程序添加一个清单。随意为此使用生成器：

{
  "background_color": "#ffffff",
  "description": "Notifies you of new issues and PRs in GitHub repositories",
  "display": "standalone",
  "icons": [
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/maskable_icon.png",
      "sizes": "640x640",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "name": "GitHub Tracker",
  "orientation": "portrait",
  "short_name": "GH Tracker",
  "start_url": "/",
  "theme_color": "#000000"
}

您需要为该应用程序下载一堆图标。这些图标大小不同，被不同的操作系统使用。您可以从源代码存储库或使用此链接下载它们。请务必将 ZIP 文件解压缩为public/icons.

接下来，您需要将清单和图标添加到index.html文件中。您可以通过将以下代码放入其中来做到这一点：



  
    
    
    
    GitHub Tracker

F12通过按下并前往Lighthouse选项卡打开 Chrome 的开发人员工具并创建一个新的审计。您现在应该在 PWA 部分获得“可安装”分数。这意味着您已经成功地将您的网站转换为 web 应用程序，您现在可以通过单击地址栏上的按钮来安装它。

第 5 步：订阅推送通知

在我们发送推送通知之前，我们需要获得用户的许可。您可以使用该
Notification.requestPermission()方法来执行此操作。此方法是异步的，并返回一个可以等于,和的字符串。当用户分别在通知提示上按下X、按下Deny或按下Allow时，将返回这些信息。我们将使用hook in来调用这个函数：defaultdeniedgrantedonMountApp.svelte

onMount(async () => {
  isLoggedIn = !!localStorage.getItem("username");
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/service-worker.js");
  }
  const status = await Notification.requestPermission();
  if (status !== "granted")
    alert(
      "Please allow notifications to make sure that the application works."
    );
});

您现在应该会看到一个弹出窗口，要求您在应用程序中允许通知。现在我们有了发送通知的权限，让我们使用 service worker 订阅推送事件。这可以使用pushManager.subscribe()服务工作者的功能来完成。您可以在 service worker 本身中执行此操作，也可以在将 service worker 注册到App.svelte. 我会选择后者，所以如果你想这样做，只需用下面的代码替换
navigator.serviceWorker.register函数：onMount

navigator.serviceWorker.register("/service-worker.js");
const reg = await navigator.serviceWorker.ready;
reg.pushManager.subscribe({ userVisibleOnly: true });

如果您打开控制台，您会注意到一个错误，指出applicationServerKey缺少。推送通知需要服务器向它们发送推送消息，并且这些服务器使用 VAPID 密钥进行身份验证。这些密钥标识服务器并让浏览器知道推送消息是有效的。我们将使用 Vercel Cloud Functions 发送推送消息，因此我们需要对其进行设置。

创建推送消息服务器

我们将使用web-push npm 包来帮助我们生成密钥并发送推送事件。要安装它，cd到api文件夹并运行以下命令：

npm i web-push

请记住到cd该api文件夹，否则该web-push软件包将安装在 Svelte 应用程序中。

要发送推送通知，您需要生成一个公共和私有 VAPID 密钥对。为此，请使用node命令打开 Node REPL 并运行以下命令：

$ node
> const webPush = require("web-push");
> webPush.generateVAPIDKeys()
{
  publicKey: "XXXXXXX",
  privateKey: "XXXXXX"
}

复制这两个密钥并将它们作为环境变量存储在 Vercel 上。一定要称它们为令人难忘的东西，例如VAPID_PRIVATE_KEY和VAPID_PUBLIC_KEY。

现在，我们可以开始使用云功能了。创建文件api/vapidkeys.js. 该文件将负责向客户端发送公共VAPID 密钥。您永远不应该共享私有 VAPID 密钥。在api/vapidkeys.js中，首先我们需要初始化web-push：

const webPush = require("web-push");

webPush.setVapidDetails(
  "YOUR_VERCEL_DOMAIN",
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

请务必替换YOUR_VERCEL_DOMAIN为您的 Vercel 应用程序的域。接下来，让我们导出一个函数，将公共 VAPID 密钥返回给请求者：

module.exports = (_, res) => {
  res.send(process.env.VAPID_PUBLIC_KEY);
};

完成后，您现在可以更新onMount函数App.svelte以首先获取云函数以获取公钥，然后在subscribe函数中使用公钥：

let sub;
onMount(async () => {
  // ...
  if ("serviceWorker" in navigator) {
    // Service worker supported
    navigator.serviceWorker.register("/service-worker.js");
    const reg = await navigator.serviceWorker.ready;
    sub = await reg.pushManager.getSubscription();
    if (!sub) {
      // Fetch VAPID public key
      const res = await fetch("/api/vapidkeys");
      const data = await res.text();
      sub = await reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: data,
      });
    }
    console.log(sub);
  }
  // ...
});

请注意，如果我们没有订阅推送通知，我们只会获取 VAPID 密钥。如果您打开控制台，您应该会看到订阅记录到控制台。

提供的端点对我们来说非常重要。该端点将允许我们使用通知该用户web-push。让我们创建一个云函数来将此端点存储在数据库中。创建文件api/storeendpoint.js：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;
  const usersCol = mongo.db().collection("users");
  // TODO
};

让我们subscription从正文中获取和用户名：

const { username, subscription } = req.body;
if (typeof username !== "string" || typeof subscription !== "object") {
  res.status(400).json({ message: "Invalid body" });
  return;
}

让我们将它添加到数据库中：

await usersCol.updateOne({ _id: username }, { $set: { subscription } });

以下是最终云函数的外观：

const mongoPromise = require("./_mongo");

module.exports = async (req, res) => {
  const mongo = await mongoPromise;
  const usersCol = mongo.db().collection("users");
  const { username, subscription } = req.body;
  if (typeof username !== "string" || typeof subscription !== "string") {
    res.status(400).json({ message: "Invalid body" });
    return;
  }
  await usersCol.updateOne(
    { _id: username },
    {
      $set: {
        subsciption,
      },
    }
  );
  res.status(204).end();
};

每次我们订阅推送通知时都应该调用这个函数。每当变量有值且变量为真时，让我们使用Svelte 反应块调用此云函数。在标签结束之前添加此代码：subisLoggedIn