构建并部署渐进式 Web 应用
PWA 简介
结果
在我之前的文章中（感谢你们，它成为了本周的热门文章），我讨论了如何使用 ReactJS 构建一个天气应用。在本文中，你将了解什么是渐进式 Web 应用以及如何将天气应用部署到 PWA 商店。
PWA 简介
渐进式 Web 应用是指将 Web 功能融入类似 App 体验的网站。它的基本含义是，您无需为公司或业务需求构建单独的移动应用，只需构建一个渐进式 Web 应用，即可同时利用 Web 和原生功能。更简单地说，PWA 是 Web 和移动应用的最佳结合。
PWA 的优势：
- 渐进式 Web 应用程序的速度非常快。
- 访问网站比安装应用程序更容易。
- 原生应用程序与操作系统完美集成和配置，从而提供更好的性能。
- 离线访问。
- 减少数据使用量。
入门
在构建天气应用时，我们将所有注意力都集中在src文件夹上。而构建 PWA 应用时，我们可以专注于public文件夹。让我们先清理这个文件夹中的杂乱内容，直到只剩下index.html文件。
首先在 index.html 中创建一个 Service Worker。Service Worker 是一个在网站后台运行的脚本。这非常有用，因为它即使在应用程序终止后也能运行，因此能够发送通知并支持离线工作。您可以使用以下代码在 index.html文件中root ID的 div 下方创建一个新的 Service Worker 。
<script>
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./serviceworker.js')
.then(reg => console.log(reg.scope))
.catch(err => console.log(err))
})
}
</script>
在 public 文件夹中创建一个serviceworker.js文件。在此文件夹中粘贴以下代码：
const CACHE = "dev";
const URL = ["index.html", "offline.html"];
const self = this;
正如我之前提到的，PWA 速度非常快。这是因为它们维护了缓存。因此，我们创建一个变量CACHE并为其命名。然后在变量URL中，我们传入需要缓存的 URL。
现在，此文件中需要执行三个事件：
- 安装 Service Worker
将 URL 添加到缓存存储中。
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((cache) => {
return cache.addAll(URL);
})
);
- 监听请求
匹配页面收到的请求，如果获取成功则返回请求，否则呈现离线页面。
self.addEventListener("fetch", (e) => {
e.respondWith(
caches.match(e.request).then(() => {
return fetch(e.request).catch(() => caches.match("offline.html"));
})
);
});
- 激活服务工作者
删除旧缓存并存储新缓存。
self.addEventListener("activate", (e) => {
const newCache = [];
newCache.push(CACHE);
e.waitUntil(
caches.keys().then((cacheNames) =>
Promise.all(
cacheNames.map((cacheName) => {
if (!newCache.includes(cacheName)) {
return caches.delete(cacheName);
}
})
)
)
);
});
如果您想了解有关缓存的更多信息，请参阅此链接。
为了确保我们npm start在您的终端上测试此命中，请转到您的 chrome 开发者控制台并选择“应用程序”选项卡，然后在“服务工作者面板”上确保选中“重新加载时更新”，然后在“清除存储”面板上点击“清除站点数据”。
现在该构建我们的offline.html页面了。我将使用极简的样式来设计这个页面，但您可以随意地让这个离线页面看起来更加出色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
background-image: linear-gradient( to right, rgba(255, 100, 0, 0.52), rgba(0, 195, 255, 0.73) );
display: flex;
font-size: 30px;
color: white;
font-family: 'Balsamiq Sans', cursive;
align-items: center;
text-align: center;
justify-content: center;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
margin: -120px 170px;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="lds-ripple"><div></div><div></div></div>
<span>You are currently offline. Please go online to check the weather.</span>
</body>
</html>
现在，重新加载页面并查看缓存空间。如果看起来像下图所示，恭喜！您已经缓存了网页，以便更快地进行离线访问。
如需进一步测试，请转到“网络”选项卡并选择“离线”。
现在重新加载您的页面以查看缓存的offline.html页面。
显现
清单文件是一个简单的 JSON 文件，用于提供有关应用程序的信息。因此，请创建一个manifest.json文件，并将这段代码粘贴到其中。
{
"name": "Weather App PWA",
"short_name": "Weather App",
"icons": [
{
"src": "./logo.png",
"type": "image/png",
"sizes": "1024x1024"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
要了解有关清单文件的更多信息，请查看此链接。
灯塔
Lighthouse是一款用于评估 Web 应用程序质量的工具。安装它，然后在 Chrome 开发者控制台上点击“生成报告”。现在让我们检查一下我们的应用的运行情况：
嗯，根据Lighthouse 的评分，我们的分数还不错。不过你可以看到，还有一项测试没有通过，这导致我们的性能得分一直很低。
部署应用程序
为了解决无法将 HTTP 流量重定向到 HTTPS 的错误，我们必须部署我们的应用程序。
打开终端并输入，npm run build在项目目录中创建 build 文件夹。在Netlify和仪表盘上创建一个如下所示的
帐户：
只需将您的构建文件夹拖放到此屏幕上，即可在 netlify 上在线部署您的应用程序。
单击生成的URL即可在互联网上真实查看您的应用程序，请尝试断开互联网连接以查看离线页面。
结果
现在，让我们对已部署的应用程序运行 Lighthouse 测试：
太棒了！对于我们的 PWA 应用来说，这分数太棒了。
现在，如果你一切顺利，你应该会在 Chrome 浏览器的 URL 搜索栏中看到书签图标旁边有一个+图标。
现在，这个按钮将允许您在设备上安装此应用程序。单击+图标并安装该应用程序。
断开网络连接即可查看离线页面。
太棒了！这个应用现在已内置到你的系统，你也可以在手机上使用了。
现在到了最精彩的部分——在 PWA 商店发布应用。前往PWA 商店并注册。登录后，进入你的个人资料页面，点击最右侧的汉堡图标，然后点击小+符号。输入应用的所有详细信息，包括名称、描述、屏幕截图等。最后，运行 Lighthouse PWA 检查。获得全部三个勾选后，你就可以提交审核了。
瞧！就是这样。审核通过后，您的应用将在 PWA 商店中发布，过一段时间您就可以在“发现”部分找到它。
这篇文章很长，但内容丰富。希望您能够全面了解渐进式 Web 应用 (PWA) 的含义、如何构建 PWA、如何使用 Lighthouse 工具进行测试以及如何部署 PWA 应用。
如有任何疑问，请随时通过我的LinkedIn联系我。代码可以在我的Github上找到。