后端开发教程 - Java、Spring Boot 实战 - msg200.com
让 React App 成为渐进式 Web 应用 (PWA)
什么是 PWA？
1. 注册 Service Worker
2.现在更新HTML
3. 激活 ServiceWorker
4.创建 manifest.json 文件
什么是 PWA？
渐进式 Web 应用程序是一种具有 Web 覆盖范围的用户体验，并且：
可靠- 即时加载，即使在网络不稳定的情况下也绝不卡顿。
快速- 以流畅的动画快速响应用户交互，滚动流畅无卡顿。
引人入胜- 如同设备上的自然应用，带来沉浸式的用户体验。
这种新的质量水平使得渐进式 Web 应用程序能够在用户的主屏幕上占有一席之地。
1. 注册 Service Worker
什么是 Service Worker？
Service Worker（预先缓存关键资源的客户端代理）使 PWA 能够即时加载，并
为用户提供即时、可靠的体验，无论网络状态如何。
worker.js在公共文件夹中创建一个新文件（public/worker.js），并添加以下代码：
Let CACHE_NAME = 'your-app-name';
Let urlsToCache = [
'/',
'/completed'
];
// Install a service worker
self.addEventListener('install', event => {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// Cache and return requests
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
// Update a service worker
self.addEventListener('activate', event => {
Let cacheWhitelist = ['your-app-name'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
注意！将上述代码中的 (your-app-name) 替换为您的应用名称
2.现在更新HTML
更新index.html公共文件夹(public/index.html)
中的文件 ，以检查客户端浏览器是否支持 Service Worker。只需将以下代码添加到应用(public/index.html)的 body 标签中即可。
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('worker.js').then(function(registration) {
console.log('Worker registration successful', registration.scope);
}, function(err) {
console.log('Worker registration failed', err);
}).catch(function(err) {
console.log(err);
});
});
} else {
console.log('Service Worker is not supported by browser.');
}
</script>
3. 激活 ServiceWorker
现在转到应用程序的 src 文件夹中的 index.js （src/index.js）
现在更新serviceWorker.unregister()为serviceWorker.register()最后一行下面的代码
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.register();
重新启动（npm start）并重新加载您的 React 应用程序 - 您应该在控制台中看到消息“Worker 注册成功”。
4.创建 manifest.json 文件
清单是一个简单的 JSON 文件，它向浏览器介绍您的 Web 应用，以及它在“安装”到用户的移动设备或桌面设备后应如何运行。Chrome 需要清单才能显示“添加到主屏幕”提示。
典型的清单文件包括有关应用程序名称、应使用的图标、启动时应启动的 start_url 等信息。
{
"name": "your-app-name",
"short_name": "your-app-name",
"icons": [
{
"src": "img/logo.png",
"sizes": "92x92",
"type": "image/png"
},
{
"src": "/img/logo.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/logo.png",
"sizes": "152x152",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#f0f2f5",
"theme_color": "#96f2d7"
}