pwa-setup

name	pwa-setup
description	Progressive Web App setup with manifest, mobile meta tags, safe area handling for notched devices, and install prompts for app-like browser experience.
license	MIT
compatibility	TypeScript/JavaScript
metadata	{"category":"frontend","time":"2h","source":"drift-masterguide"}

PWA Setup

Progressive Web App configuration for app-like browser experience.

When to Use This Skill

• Users want to "install" your web app
• Mobile users want home screen access
• Need app-like behavior without native apps
• Supporting notched devices (iPhone, etc.)

Core Concepts

PWA requires:

1. Web App Manifest - App metadata and icons
2. Mobile meta tags - Viewport and theme configuration
3. Safe areas - Handle notched devices
4. Install prompt - Custom install experience

Implementation

TypeScript (Next.js)

// app/manifest.ts
import  {  }  ;

   (): . {
   {
    : ,
    : ,
    : ,
    : ,
    : ,
    : ,
    : ,
    : ,
    
    : [
      {
        : ,
        : ,
        : ,
        : ,
      },
      {
        : ,
        : ,
        : ,
        : ,
      },
      {
        : ,
        : ,
        : ,
        : ,
      },
    ],
    
    : [
      { : , : , :  },
      { : , : , :  },
    ],
    
    : [, ],
  };
}