使用 PWA 实现识别空气质量的应用-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代社会中，环境污染越来越严重，空气质量也成为人们关注的焦点之一。因此，开发一款能够识别空气质量的应用，可以帮助人们更好地了解周围的环境，并采取相应的措施保护自己的健康。本文将介绍如何使用 PWA 技术实现这样一款应用。

PWA 简介

PWA（Progressive Web App）是一种新兴的 Web 应用程序模型，它结合了 Web 应用程序和本机应用程序的优点，能够在离线状态下提供类似于本地应用程序的用户体验。PWA 具有以下优点：

可以像本地应用程序一样在主屏幕上添加快捷方式。
可以像本地应用程序一样在全屏幕中运行，消除浏览器的干扰。
可以像本地应用程序一样在离线状态下使用，提供更好的用户体验。
可以像本地应用程序一样使用推送通知，提高用户参与度。

实现过程

获取空气质量数据

要实现识别空气质量的应用，首先需要获取空气质量数据。可以使用第三方 API，例如 AirVisual API，该 API 提供了全球范围内的空气质量数据，可以通过 HTTP 请求获取数据。

fetch('https://api.airvisual.com/v2/city?city=Shanghai&state=Shanghai&country=China&key=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们使用了 fetch 函数来获取数据，并使用 then 方法处理响应结果。需要注意的是，需要将 YOUR_API_KEY 替换为自己的 API 密钥。

实现 PWA 功能

接下来，我们需要实现 PWA 的功能，包括添加到主屏幕、全屏运行、离线使用和推送通知等。

添加到主屏幕

要将应用添加到主屏幕，需要在页面中添加一个 manifest.json 文件。该文件包含了应用的名称、图标、主题色等信息。

// javascriptcn.com 代码示例
{
  "name": "空气质量识别器",
  "short_name": "AQI",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone"
}

在页面中添加以下代码，将 manifest.json 文件链接到页面中：

<link rel="manifest" href="manifest.json">

当用户访问应用时，浏览器会自动提示用户将应用添加到主屏幕上。

全屏运行

要让应用在全屏中运行，可以使用以下代码：

if (window.navigator.standalone) {
  document.documentElement.classList.add('fullscreen');
}

在 CSS 中添加以下样式：

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

离线使用

要让应用在离线状态下使用，可以使用 Service Worker 技术。Service Worker 是一种 JavaScript 脚本，可以在后台运行，拦截网络请求，实现离线缓存和推送通知等功能。

首先，我们需要在页面中注册 Service Worker：

// javascriptcn.com 代码示例
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('Service Worker registered:', registration);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

然后，在 service-worker.js 文件中实现缓存策略：

// javascriptcn.com 代码示例
const CACHE_NAME = 'air-quality-cache-v1';
const CACHE_URLS = [
  '/',
  'index.html',
  'manifest.json',
  'app.js',
  'style.css',
  'icon-192x192.png',
  'icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(CACHE_URLS))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys()
      .then(cacheNames => Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      ))
      .then(() => self.clients.claim())
  );
});

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

在上面的代码中，我们首先定义了缓存名称和需要缓存的 URL，然后在 install 事件中打开缓存并将 URL 添加到缓存中，然后在 activate 事件中删除旧的缓存，最后在 fetch 事件中拦截网络请求并返回缓存中的数据。

推送通知

要实现推送通知，需要在 Service Worker 中注册推送服务，并在服务器端发送推送消息。

在 service-worker.js 文件中添加以下代码：

self.addEventListener('push', event => {
  event.waitUntil(
    self.registration.showNotification('空气质量识别器', {
      body: '空气质量已更新',
      icon: 'icon-192x192.png'
    })
  );
});

在服务器端使用 Web Push 协议发送推送消息：

// javascriptcn.com 代码示例
const webpush = require('web-push');

webpush.setVapidDetails(
  'mailto:youremail@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

webpush.sendNotification(subscription, '空气质量已更新');

其中，subscription 是客户端的订阅信息，process.env.VAPID_PUBLIC_KEY 和 process.env.VAPID_PRIVATE_KEY 是 VAPID 公钥和私钥。

完整代码

下面是完整的代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="识别空气质量的应用">
  <link rel="icon" href="icon-192x192.png">
  <link rel="manifest" href="manifest.json">
  <title>空气质量识别器</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }
    header {
      background-color: #2196f3;
      color: #fff;
      padding: 16px;
    }
    h1 {
      margin: 0;
      font-size: 24px;
      font-weight: normal;
    }
    main {
      padding: 16px;
    }
    .fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <header>
    <h1>空气质量识别器</h1>
  </header>
  <main>
    <p>当前空气质量：</p>
    <p id="aqi"></p>
  </main>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(registration => {
          console.log('Service Worker registered:', registration);
        })
        .catch(error => {
          console.error('Service Worker registration failed:', error);
        });
    }
    if (window.navigator.standalone) {
      document.documentElement.classList.add('fullscreen');
    }
    fetch('https://api.airvisual.com/v2/city?city=Shanghai&state=Shanghai&country=China&key=YOUR_API_KEY')
      .then(response => response.json())
      .then(data => {
        const aqi = data.data.current.pollution.aqius;
        document.getElementById('aqi').textContent = aqi;
      })
      .catch(error => {
        console.error(error);
      });
  </script>
</body>
</html>

// javascriptcn.com 代码示例
{
  "name": "空气质量识别器",
  "short_name": "AQI",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone"
}

// javascriptcn.com 代码示例
const CACHE_NAME = 'air-quality-cache-v1';
const CACHE_URLS = [
  '/',
  'index.html',
  'manifest.json',
  'app.js',
  'style.css',
  'icon-192x192.png',
  'icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(CACHE_URLS))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys()
      .then(cacheNames => Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      ))
      .then(() => self.clients.claim())
  );
});

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

self.addEventListener('push', event => {
  event.waitUntil(
    self.registration.showNotification('空气质量识别器', {
      body: '空气质量已更新',
      icon: 'icon-192x192.png'
    })
  );
});

总结

本文介绍了如何使用 PWA 技术实现识别空气质量的应用，包括获取空气质量数据、实现 PWA 功能和推送通知等。PWA 技术具有很大的优势，可以提高 Web 应用程序的用户体验，是未来 Web 开发的重要趋势之一。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656283ccd2f5e1655dc5e49f