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

介绍：

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

推荐工具

https://www.favicon-generator.org/
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=