您现在的位置是：网站首页> HTML&JS
渐进式Web应用（Progressive Web App，PWA）技术收集
- HTML&JS
- 2024-11-04
- 75人已阅读
渐进式Web应用（Progressive Web App，PWA）技术收集
一个PWA的例子包含PWA的所有功能
这个示例是一个简单的天气应用,用户可以查询指定城市的天气情况。
1.文件结构:
weather-app/
├── index.html
├── manifest.json
├── service-worker.js
├── js/
│ └── app.js
├── css/
│ └── style.css
└── images/
├── icon-128.png
├── icon-144.png
├── icon-152.png
├── icon-192.png
├── icon-256.png
└── icon-512.png
2.index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Weather App</h1>
<input type="text" id="city" placeholder="Enter city name">
<button id="search">Search</button>
<div id="weather-info"></div>
<script src="js/app.js"></script>
</body>
</html>
3.manifest.json:
{
"name": "Weather App",
"short_name": "Weather",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2196f3",
"icons": [
{
"src": "images/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icon-152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icon-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "images/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
4.service-worker.js:
const CACHE_NAME = 'weather-app-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/css/style.css',
'/js/app.js',
'/manifest.json',
'/images/icon-128.png',
'/images/icon-144.png',
'/images/icon-152.png',
'/images/icon-192.png',
'/images/icon-256.png',
'/images/icon-512.png'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 如果缓存中存在匹配的响应,直接返回缓存的响应
if (response) {
return response;
}
// 如果缓存中没有匹配的响应,发起网络请求
return fetch(event.request)
.then(function(response) {
// 克隆响应,因为响应是一个流,只能使用一次
const responseToCache = response.clone();
// 打开缓存
caches.open(CACHE_NAME)
.then(function(cache) {
// 将请求的响应存入缓存
cache.put(event.request, responseToCache);
});
// 返回原始的响应
return response;
});
})
);
});
5.js/app.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
const searchButton = document.getElementById('search');
const cityInput = document.getElementById('city');
const weatherInfo = document.getElementById('weather-info');
searchButton.addEventListener('click', function() {
const city = cityInput.value;
const apiKey = 'YOUR_API_KEY';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
fetch(apiUrl)
.then(function(response) {
return response.json();
})
.then(function(data) {
const temperature = Math.round(data.main.temp - 273.15);
const description = data.weather[0].description;
weatherInfo.innerHTML = `Temperature: ${temperature}°C<br>Description: ${description}`;
})
.catch(function(error) {
console.log('Error fetching weather data:', error);
});
});
6.css/style.css:
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #2196f3;
}
input, button {
margin: 10px;
padding: 5px;
}
这个PWA示例包含了以下功能:
Web App Manifest (manifest.json):
定义了应用的名称、图标和启动配置。
允许将应用添加到主屏幕,并以独立模式运行。
Service Worker (service-worker.js):
拦截网络请求并从缓存中返回响应,实现离线访问。
在安装阶段缓存了应用的关键资源。
响应式设计:
使用viewport元标签确保应用在不同设备上正常显示。
在线和离线功能:
当在线时,应用从OpenWeatherMap API获取天气数据。
当离线时,Service Worker从缓存中返回已缓存的资源,确保应用可以离线访问。
添加到主屏幕:
Web App Manifest中的配置允许用户将应用添加到设备的主屏幕。
推送通知(未在此示例中实现):
PWA还支持推送通知,可以向用户发送及时的更新和提醒。
这个示例展示了PWA的核心功能,包括Web App Manifest、Service Worker、离线访问和添加到主屏幕等。你可以在此基础上进一步扩展和优化应用,以提供更好的用户体验。
上一篇：wasm相关开发与应用