如何在2022年构建渐进式Web应用程序
#javascript #教程 #pwa #webapp

移动设备现在占网络流量的一半以上，移动应用程序已成为移动设备上可用性的主要内容，并且Web应用程序需要提供本地和传统体验的需求比以往任何时候都更加突出。在本文中，您将从根本上了解什么是渐进的Web应用程序，它们如何影响您的业务以及如何建立它们。

什么是渐进式网络应用？

渐进式Web应用程序是一个网络应用程序，通过实施现代网络技术为用户提供类似移动应用的体验。这导致了您的网站或Web应用程序的表现，就像移动应用程序一样，但仍在引擎盖下的浏览器中运行。 PWA使您能够：

  • 在移动主屏幕上安装您的网站
  • 离线时访问您的Web应用
  • 获得推送通知
  • 以及更多

先决条件

我了解您对此感到兴奋，但是在开始本教程之前，您需要以下内容：

  • 现有的Web应用程序或网站（本地或部署）
  • JavaScript的良好知识

设置

在本教程中，我们将使用简单标记的基本HTML页面

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Dev Sprite PWA</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <script src="client.js"></script>
  </head>
  <body>
    <div class="toolbar" role="banner">
      <span>You are currently ONLINE</span>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
        <path
          d="M2 12H22"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
        <path
          d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </div>
    <div class="online-content">
      <p>This is our website homepage.</p>
      <a href="about.html">About</a>
    </div>
  </body>
</html>

样式

我们还需要样式来使我们的页面看起来不错。在本教程中，我们将创建一个文件并在页面上添加一些基本样式

style.css

:host {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.online-content {
  margin: 50px;
  padding: 15px;
  border: 1px solid #333;
}
.online-content a {
  margin-top: 10px;
}

p {
  margin: 0;
}

.toolbar {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #1976d2;
  color: white;
  font-weight: 600;
}

.toolbar span {
  margin: 0 30px 0 50px;
}

.toolbar.offline {
  background-color: #ff6969;
}

.content {
  display: flex;
  margin: 82px auto 32px;
  padding: 0 16px;
  max-width: 960px;
  flex-direction: column;
  align-items: center;
}

创建Web应用清单

Web应用清单是一个JSON文件，我们将在应用程序的根部创建，该文件提供元数据，以指示浏览器如何在最终用户的设备上呈现我们的PWA。

注册Web应用清单

清单文件通常存储在我们应用程序的根部中，因此我们可以将其命名 nothing.webmanifest 或 nothing.json.json 并将其与媒体类型一起使用< U>应用程序/清单+JSON

要注册Web应用清单，我们在<head>标记我们的html文档中使用<link>标签。

<head>
  <link rel="manifest" href="/manifest.webmanifest">
</head>

如果文件中的某些属性未正确设置，则用户代理将退回到文档元数据

清单的请求是没有任何凭据（即使在同一域上）的要求。因此，如果清单需要凭据，我们必须添加属性crossorigin =“ use-credentials” 

<head>
  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
</head>

在我们的清单中。 

{
  "name": "Dev'Sprite",
  "short_name": "DevSprite",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png", "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png","sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png", "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png", "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png", "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png", "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png", "sizes": "512x512"
    }
  ]
}

此清单文件包含一些属性（强制性和可选），我们将分解

  • 名称：启动浏览器时在飞溅屏幕上显示的名称。
  • short_name：在您的应用程序图标或快捷方式下显示的名称
  • start_url：打开应用时显示的第一页
  • 显示：这告诉浏览器如何显示应用程序。不同的模式，例如minimal-ui，fullscreen，standalone等。在本教程中，我们的显示模式将是standalone模式
  • background_color：这会告诉浏览器启动屏幕的背景颜色
  • theme_color：当我们打开应用时，这将是状态栏的背景颜色。
  • 方向：这告诉浏览器应用程序的方向。可以是portrait或landscape7
  • 图标：这将告诉浏览器在应用程序Splash屏幕上显示什么图标。

现在我们已经拥有Web应用清单，现在可以将其添加到HTML文件

<link rel="manifest" href="manifest.json" />
<!-- ios support -->
<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
<link rel="apple-touch-icon" href="images/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="images/icons/icon-128x128.png" />
<link rel="apple-touch-icon" href="images/icons/icon-144x144.png" />
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png" />
<link rel="apple-touch-icon" href="images/icons/icon-192x192.png" />
<link rel="apple-touch-icon" href="images/icons/icon-384x384.png" />
<link rel="apple-touch-icon" href="images/icons/icon-512x512.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />

在本文的第二部分中，我们将要讨论服务工作者。
感谢您的阅读。