构建并部署渐进式 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"
}