---
# System prepended metadata

title: 網頁捷徑加到手機主畫面
tags: [javascript]

---

[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上：點擊菜單按鈕，然後選擇“添加到主屏幕”或“創建快捷方式”。
