[toc]
---
## 如何增網頁捷徑加到手機主畫面 js 語法
1. 創建一個名為manifest.json的文件，並將其放置在您的網站根目錄中。 manifest.json文件定義了網頁的元數據和外觀設置。示例內容如下：
```
{
"name": "Mood Deer",
"short_name": "MoodDeer",
"start_url": "./",
"display": "standalone",
"icons": [
{
"src": "img/logo.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
```
2. 確保將name和short_name字段設置為您的應用程序的名稱，start_url字段設置為網頁的入口點（例如index.html），display字段設置為standalone以使網頁顯示為獨立應用程序，並替換icon.png為您的應用程序圖標的路徑和文件名。
在您的網頁的<head>部分中添加以下代碼以引用manifest.json文件：
html
```
<link rel="manifest" href="manifest.json">
创建一个名为service-worker.js的文件，并将其放置在您的网站根目录中。service-worker.js文件是一个JavaScript文件，用于注册Service Worker并处理安装和激活事件。示例内容如下：
javascript
Copy code
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-web-app').then(function(cache) {
return cache.addAll([
'./index.html',
'./styles.css',
'./script.js',
'./icon.png'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
```
3. 請確保將cache.addAll()中的文件路徑替換為您的網頁的實際路徑，以及您希望緩存的其他資源（例如CSS文件、JavaScript文件和圖標等）。
在您的網頁的<head>部分中添加以下代碼以註冊Service Worker：
html
```
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('Service Worker 注册成功：', registration.scope);
}, function(error) {
console.log('Service Worker 注册失败：', error);
});
});
}
</script>
```
這段代碼將檢查瀏覽器是否支持Service Worker，並在網頁加載時註冊Service Worker。
確保您的網頁包含一個圖標文件（如示例中的icon.png）。該圖標將用於在手機主屏幕上顯示網頁的快捷方式圖標。
現在，您可以在手機瀏覽器中打開您的網頁，然後按照以下步驟將其添加到主屏幕上：
在iOS上：點擊分享按鈕，然後選擇“添加到主屏幕”。
在Android上：點擊菜單按鈕，然後選擇“添加到主屏幕”或“創建快捷方式”。
Sign in with Wallet
Connect another wallet