如何配置Svelte應用以支持PWA特性

要配置Svelte應用以支持PWA（漸進式Web應用）特性，您可以按照以下步驟進行操作：

1. 在Svelte應用的根目錄中創建一個service-worker.js文件，這將是PWA的service worker文件。

2. 在rollup.config.js中，添加@rollup/plugin-workbox插件來生成service worker文件。您可以按照以下方式安裝插件：

npm install @rollup/plugin-workbox --save-dev

3. 在rollup.config.js中配置插件，例如：

import {generateSW} from 'rollup-plugin-workbox';

export default {
  plugins: [
    generateSW({
      swDest: 'public/service-worker.js',
      globDirectory: 'public',
      globPatterns: ['**/*.{html,js,css,png,jpg}'],
    })
  ]
}

4. 在App.svelte文件中添加pwa:manifest和pwa:meta標簽，以定義應用的PWA信息。例如：

<svelte:head>
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#3F51B5">
</svelte:head>

5. 創建manifest.json文件，并添加應用的manifest信息，例如：

{
  "name": "Svelte PWA App",
  "short_name": "Svelte PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3F51B5",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

6. 最后，您可以使用Lighthouse或類似工具來檢查應用是否符合PWA標準，并進行必要的優化。

通過以上步驟，您的Svelte應用就可以支持PWA特性了，可以在移動設備上添加到主屏幕，并享受離線訪問等功能。