“short_name”: “Website”,
“description”: “This is my website converted into a PWA”,
“start_url”: “/”,
“display”: “standalone”,
“background_color”: “#ffffff”,
“theme_color”: “#ffffff”,
“icons”: [
{
“src”: “/icons/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “/icons/icon-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
]
}
“`
在你的HTML文件的`head`部分，將以下代碼添加至`manifest.json`文件：
“`html
“`
2. 創建并注冊Service Worker
Service Worker 是一個與主線程（主線程通常用于處理UI元素）分離的Javascript文件。用于處理緩存、推送通知和后臺同步操作。首先，我們需要創建一個Service Worker 并在根目錄中注冊。
如果你使用的是React、Vue或Angular等框架，你可以使用現有的PWA支持庫來生成一個Service Worker。
創建一個名為 `serviceworker.js` 的新文件，并在該文件中添加以下內容：
“`javascript
self.addEventListener(“install”, function (event) {
event.waitUntil(
caches.open(“websites-cache”).then(function (cache) {
return cache.addAll([
“/”,
“/index.html”,
“/css/style.css”,
“/js/main.js”,
“/icon/icon-192×192.png”,
“/icon/icon-512×512.png”,
]);
})
);
});
self.addEventListener(“fetch”, function (event) {
event.respondWith(
caches
.match(event.request)
.then(function (cachedResponse) {
return cachedResponse || fetch(event.request);
})
.catch(function (error) {
console.log(“Failed to fetch “, event.request, error);
})
);
});
“`
接下來，在你的 `index.html` 文件的底部，添加以下腳本來注冊 `serviceworker.js`：
“`javascript
if (“serviceWorker” in navigator) {
window.addEventListener(“load”, function () {
navigator.serviceWorker.register(“/serviceworker.js”).then(
function (registration) {
console.log(
“Service Worker registration successful with scope: “,
registration.scope
);
},
function (err) {
console.log(“Service Worker registration failed: “, err);
}
);
});
}
“`
3. 測試并部署
現在你已經將一個現有的網站轉換為PWA，你可以使用如Lighthouse、PWABuilder或其他工具測試你的PWA。確保你的PWA滿足要求，并根據需要進行修復。之后將其部署到現有的Web服務器或使用服務命令來生成一個預覽鏈接。
上述步驟完成后，你已經將一個網站成功生成為APP。用戶可以將你的網站添加到他們的設備主屏幕上，在離線狀態下訪問并感受到類似原生應用的體驗。你可以繼續優化并添加更豐富的功能、如推送通知和后臺同步等功能來實現更好的用戶體驗。
