将“添加到主屏幕”功能添加到您的渐进式 Web 应用程序

迈不过友情╰ 2023-10-14 13:59 62阅读 0赞

### 介绍： ###

渐进式 Web 应用程序 (PWA) 通过在浏览器中提供类似本机应用程序的感觉，继续彻底改变 Web 体验。PWA 的定义功能之一是能够提示用户“添加到主屏幕”，从而能够快速访问应用程序。在本文中，我们将指导您创建一个渐进式 Web 应用程序，并在页面加载时自动提示“添加到主屏幕”，类似于 Twitter 等流行应用程序提示用户添加其精简版本的方式。

推荐工具

[https://www.favicon-generator.org/][https_www.favicon-generator.org]  
[https://www.pwabuilder.com/][https_www.pwabuilder.com]

**第 1 步：创建清单文件**

manifest.json首先在 Web 应用程序的根目录中创建一个文件。该文件包含定义 PWA 行为的基本元数据。自定义以下示例以匹配您的应用程序的具体情况：

{
       
        
      "name": "Your App Name",
      "short_name": "Short Name",
      "start_url": "/",
      "display": "standalone",
      "background_color": "#ffffff",
      "theme_color": "#ffffff",
      "icons": [
        {
       
        
          "src": "https://via.placeholder.com/128x128?text=App+Icon",
          "sizes": "128x128",
          "type": "image/png"
        },
        {
       
        
          "src": "https://via.placeholder.com/192x192?text=App+Icon",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
       
        
          "src": "https://via.placeholder.com/512x512?text=App+Icon",
          "sizes": "512x512",
          "type": "image/png"
        }
      ]
    }

分别将"Your App Name"和替换"Short Name"为您的应用程序的名称和短名称。该icons数组由三个不同大小的图标占位符组成。

**第 2 步：实施 Service Worker**

为了启用 PWA 功能，我们需要一个 Service Worker。在应用程序的根目录中创建一个名为的新文件sw.js并使用以下代码：

// Activate event: Clean up old caches
    // Define the cache name
    const cacheName = 'your-app-cache-v1';
    
    // List of assets to cache
    const assetsToCache = [
      '/',
      '/index.html',
      '/path/to/your/css/styles.css',
      '/path/to/your/js/script.js',
      'https://via.placeholder.com/128x128?text=App+Icon',
      'https://via.placeholder.com/192x192?text=App

[https_www.favicon-generator.org]: https://www.favicon-generator.org/
[https_www.pwabuilder.com]: https://www.pwabuilder.com/