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.');
}
現在使用Lighthouse重新審核您的應用程序，您會注意到應用程序性能的提高。
第5步 - 添加飛濺圖標
您需要添加一個512x512圖標才能顯示在啟動畫面上。為此，您將不得不更新manifest.json並添加圖標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。
< meta name = “mobile-web-app-capable” content = “yes” >
< 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
你的firebase.json應該是這樣的：
{
"hosting": {
"public": "build",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
初始化後，構建並部署您的應用程序。
- npm run build
- firebase deploy
在使用已部署的URL上的Lighthouse來審核應用後，您將看到以下結果。
最後，您已經使用React.js創建了您的第一個漸進式網絡應用程序！
閱讀更多 愛碼農 的文章
