鲁达 学习如何创建一个简单的React应用程序，并使用其他工具来帮助我们一路测试它。
渐进式Web应用程序（PWA）迅速流行，因为基本上是基于性能的快速Web应用程序，可简化移动应用程序体验。PWA使用html，CSS和JavaScript等前端技术构建，以创造与本地移动应用程序相当的可用性和性能水平。它们具有响应能力，消耗更少的数据和存储空间，并支持浏览器中的推送通知和离线使用。
构建一个渐进的网络应用程序现在已经成为每个企业都希望遵循的网络发展趋势。Twitter和Flipboard等大型企业最近推出了渐进式网络应用程序，为用户提供移动体验，而不需要他们实际安装应用程序。在本文中，您将学习如何使用React构建渐进式Web应用程序。所以，让我们开始吧。
第1步 - 设置反应应用程序
首先，生成一个React应用程序create-react-app。为此，您需要运行以下命令：
- npm install -g create-react-app
- create-react-app pwa-app
现在安装React Router：
- cd pwa-app
- npm install --save react-router@3.0.5
您需要使用下面的代码替换“src / A”内容以获取带有导航的基本模板。import React, { Component } from 'react';
import { Router, browserHistory, Route, Link } from 'react-router';
import '.;;
const NavBar = () => (
<div className="navbar">
<Link to="/">Feed</Link>
<Link to="/Profile">Profile</Link>
</div>
);
const Template = ({ title }) => (
<div>
<NavBar />
<p className="page-info">
This is the {title} page.
</p>
</div>
);
const Feed = (props) => (
<Template title="Feed"/>
);
const Profile = (props) => (
<Template title="Profile"/>
);
class App extends Component {
render() {
return (
<Router history={browserHistory}>
<Route path="/" component={Feed}/>
<Route path="/profile" component={Profile}/>
</Router>
);
}
}
export default App;
现在，您必须更新默认样式，方法是将下面的样式替换为“src / A”，以使您的应用看起来干净整洁。
.navbar {
background-color: #01C8E5;
text-align: center;
}
.navbar a {
display: inline-block;
padding: 10px;
color: #fff;
text-decoration: none;
}
.page-info {
text-align: center;
font-weight: bold;
}
然后运行 npm start 以在浏览器中测试该应用程序。这是一个有两条路线的基本应用程序。您现在将其转换为PWA。
第2步 - 安装灯塔和审计
Lighthouse是一款自动化的开源工具，用于根据PWA清单测试应用程序。它有助于对可访问性，性能等进行审计。
用灯塔测试你的应用程序。点击Chrome右上角的灯塔图标，然后点击“生成报告”按钮。生成的报告将如下所示：
你将不得不修复所有失败的审计。
第3步 - 注册服务工作者
服务工作者是连接应用程序和网络的代理服务器。使用Service Worker，您将不得不拦截网络请求并保存缓存的文件。这将使您的应用即使在网络不可用的情况下也能正常工作。
在应用程序的公用文件夹中创建一个空白的worker.js文件，并将以下代码添加到该文件中：// Flag for enabling cache in production
var doCache = false;
var CACHE_NAME = 'pwa-app-cache';
// Delete old caches
('activate', event => {
const currentCachelist = [CACHE_NAME];
event.waitUntil(
cac()
.then(keyList =>
Promi(key => {
if (!curren(key)) {
return cac(key);
}
}))
)
);
});
// This triggers when user starts the app
('install', function(event) {
if (doCache) {
event.waitUntil(
cac(CACHE_NAME)
.then(function(cache) {
fetch('a;)
.then(response => {
re();
})
.then(assets => {
// We will cache initial page and the main.js
// We could also cache assets like CSS and images
const urlsToCache = [
'/',
assets['main.js']
];
cac(urlsToCache);
})
})
);
}
});
// Here we intercept request and serve up the matching files
('fetch', function(event) {
if (doCache) {
event.respondWith(
cac).then(function(response) {
return response || fetch);
})
);
}
});
现在检查浏览器是否支持服务人员，然后注册worker.js。为此，您需要将以下脚本添加到public / index.html文件中（请注意， shrink-to-fit=no 已从视口元标记中删除）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%;>
<link rel="shortcut icon" href="%PUBLIC_URL%;>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
naviga('worker.js').then(function(registration) {
con('Worker registration successful', regi);
}, function(err) {
con('Worker registration failed', err);
}).catch(function(err) {
con(err);
});
});
} else {
con('Service Worker is not supported by browser.');
}
</script>
</body>
</html>
您必须重新启动您的应用程序并重新加载浏览器，然后才能在开发人员控制台中看到“工作人员注册成功”消息。现在重新生成Lighthouse报告。
第4步 - 提高应用程序的渐进性
你的应用会呈现一个空的根div，直到JavaScript加载并且React挂钩了初始路由。您必须确保您的应用程序在没有任何JS加载的情况下运行，并在React进场前显示一些CSS和HTML。您更新的index.html将如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%;>
<link rel="shortcut icon" href="%PUBLIC_URL%;>
<title>React App</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.navbar {
background-color: #01C8E5;
text-align: center;
}
.navbar a {
display: inline-block;
padding: 10px;
color: #fff;
text-decoration: none;
}
.page-info {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
<div>
<a href="/">Feed</a>
</div>
<p>
Loading an awesome app...
</p>
</div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
naviga('worker.js').then(function(registration) {
con('Worker registration successful', regi);
}, function(err) {
con('Worker registration failed', err);
}).catch(function(err) {
con(err);
});
});
} else {
con('Service Worker is not supported by browser.');
}
</script>
</body>
</html>
现在使用Lighthouse重新审核您的应用程序，您会注意到应用程序性能的提高。
第5步 - 添加飞溅图标
您需要添加一个512x512图标才能显示在启动画面上。为此，您将不得不更新mani并添加图标t0公用文件夹。
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
此外，使用以下元标记允许浏览器识别您的应用是PWA。
<！ - 告诉浏览器它是一个PWA - >
< meta name = “mobile-web-app-capable” content = “yes” >
<！ - 告诉iOS它是一个PWA - >
< meta name = “apple-mobile-web-app-capable” content = “yes” >
第6步 - 部署PWA
现在，只有HTTPS丢失，并且可以在部署应用程序后修复缓存。在worker.js文件中用'true'更新doCache标志。在Firebase控制台中创建一个新项目并将其命名为“Pwa App”。然后在项目目录中运行以下命令：
npm install -g firebase-tools
firebase login
firebase init
你的应该是这样的：
{
"hosting": {
"public": "build",
"rewrites": [
{
"source": "**",
"destination": ";
}
]
}
}
初始化后，构建并部署您的应用程序。
- npm run build
- firebase deploy
在使用已部署的URL上的Lighthouse来审核应用后，您将看到以下结果。
最后，您已经使用React.js创建了您的第一个渐进式网络应用程序！