以气温为例实战PWA应用
本文将介绍如何将PWA进行应用。以气温为例实战渐进式 Web 应用（PWA），我们应先创建一个简单的天气预报应用。用户可以在应用中通过输入城市名称来获取该城市的当前天气情况。我们将使用 React.js 框架来构建这个应用，并使用第三方天气 API 获取实时天气数据。
1. 创建 React 应用
首先，我们需要创建一个 React 应用并安装必要的依赖。
npx create-react-app weather-app
cd weather-app
npm install axios
2. 获取天气数据
接下来，我们将使用 Axios 库来获取天气数据。假设我们使用 OpenWeatherMap API，你需要先注册账号并获取 API 密钥。
// src/api/weather.js import axios from 'axios'; const API_KEY = 'YOUR_API_KEY'; const fetchWeather = async (city) => { try { const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`); return response.data; } catch (error) { throw new Error('Failed to fetch weather data'); } }; export default fetchWeather;
3. 创建天气组件
接下来，我们创建一个简单的 React 组件来显示天气数据。
// src/components/Weather.js import React, { useState } from 'react'; import fetchWeather from '../api/weather'; const Weather = () => { const [city, setCity] = useState(''); const [weatherData, setWeatherData] = useState(null); const handleSearch = async () => { try { const data = await fetchWeather(city); setWeatherData(data); } catch (error) { console.error(error); } }; return ( <div> <input type="text" value={city} onChange={(e) => setCity(e.target.value)} /> <button onClick={handleSearch}>Search</button> {weatherData && ( <div> <h2>{weatherData.name}</h2> <p>Temperature: {weatherData.main.temp}°C</p> <p>Weather: {weatherData.weather[0].description}</p> </div> )} </div> ); }; export default Weather;
4. 注册 Service Worker
为了将应用转换为 PWA，我们需要注册 Service Worker。
// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorkerRegistration from './serviceWorkerRegistration'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); serviceWorkerRegistration.register(); reportWebVitals();
5. 构建和运行应用
现在，我们已经完成了应用的编写。最后，让我们构建并运行应用。
npm start
以上代码示例演示了如何创建一个简单的 PWA 应用。用户可以在应用中输入城市名称，然后获取该城市的实时天气数据。这个应用还利用了 PWA 技术，使得用户可以将应用添加到手机桌面，并且可以在离线状态下访问。
