### Install Dependencies and Run Development Server

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/pwabuilder-chromium-extension/README.md

Use these commands to install project dependencies and start the development server. Ensure you have Node.js and npm installed.

```bash
npm i
```

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/pwa-builder/pwabuilder/wiki/Development-instructions-and-best-practices

Run this command to install project dependencies before starting development or running tests.

```bash
npm install
```

--------------------------------

### Install and Run PWABuilder pwa-starter

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/blog/src/posts/building-a-drawing-pwa.md

After obtaining the starter project, install its dependencies and start the development server. This command initiates TypeScript compilation and a live-reload enabled development server.

```bash
npm install
npm run dev
```

--------------------------------

### Handle Install Prompt Snippet

Source: https://context7.com/pwa-builder/pwabuilder/llms.txt

Handles the 'beforeinstallprompt' event to allow users to install the PWA. A custom install button should be shown when deferredPrompt is available.

```javascript
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // Show your custom install button
});
```

--------------------------------

### Start Developing Your PWA

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/blog/src/posts/announcing-cli/announcing-cli.md

Run the 'pwa start' command to launch your PWA in the browser with live-reload enabled for development.

```bash
pwa start
```

--------------------------------

### Default Descriptions for Manifest Previewer Install Stage

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/manifest-previewer/README.md

Default descriptions for the 'install' stage across different platforms (Windows, Android, iOS). These explain how each platform handles installation previews.

```json
{
  install: {
    windows: "Windows includes the application's icon, name, and website URL in its installation dialog.",
    android: 'When installing a PWA on Android, the description, name, icon and screenshots are used for giving a preview of the application.',
    iOS: "iOS uses the application's icon, name, and website URL in its installation screen."
  },
  splashScreen: {
    windows: 'Splash screens are used to provide a smooth transition between the loading state and the initial launch of the application.',
    android: 'When launching the PWA, Android uses the background color, theme color, name and icon for displaying the splash screen.',
    iOS: 'When launching the PWA, iOS uses the background color, name and icon for displaying the splash screen while the content loads.'
  },
  name: {
    windows: "The name of the web application is displayed on Window's start menu, application preferences, title bar, etc.",
    android: 'The name of the web application will be included in the app info screen on Android.',
    iOS: 'On iOS, the name of the web application will be used on settings.'
  },
  shortName: {
    windows: 'Windows uses the short name as a fallback when the manifest does not specify a value for the name attribute.',
    android: "On Android, the application's short name is used in the home screen as a label for the icon.",
    iOS: "On iOS, the application's short name is used in the home screen as a label for the icon."
  },
  themeColor: {
    windows: "The theme color defines the default color theme for the application, and is used for the PWA's title bar.",
    android: 'The theme color defines the default color theme for the application, and affects how the site is displayed.',
    iOS: 'The theme color defines the default color theme for the PWA, and defines the background color of the status bar when using the application.'
  },
  shortcuts: {

```

--------------------------------

### Install PWA Simulator

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/blog/src/docs/windows/pwa-simulator/pwa-simulator.md

Install the PWA simulator component from npm. Typings are included in the package.

```bash
npm i @pwabuilder/pwa-simulator
```

--------------------------------

### Install PWABuilder CLI

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/blog/src/posts/announcing-cli/announcing-cli.md

Install the PWABuilder CLI globally using npm. Ensure you have NPM installed.

```bash
npm install -g @pwabuilder/cli
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pwa-builder/pwabuilder/wiki/How-to-contribute-to-PWABuilder

Install all necessary project dependencies using npm. This command should be run after cloning the repository and navigating to the project root.

```bash
> npm install
```

--------------------------------

### Configure GET Share Target

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/builder/manifest.md

Example of configuring a share target using the GET method. This is suitable for sharing text-based data.

```json
"share_target": {
  "action": "/handle-shared-content/",
  "method": "GET",
  "params": {
    "title": "title",
    "url": "url"
  }
}
```

--------------------------------

### Open Install Prompt Method

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

To programmatically open the install modal, obtain a reference to the pwa-install element and call its openPrompt() method. This is useful for custom trigger elements.

```javascript
const pwaInstallElement = document.querySelector('pwa-install');
pwaInstallElement.openPrompt();
```

--------------------------------

### Install Fluent Web Components

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/starter/ui-components.md

Install the Fluent UI Web Components package using npm. This is the first step to using Fluent components in your project.

```bash
npm install @fluentui/web-components
```

--------------------------------

### PWA Install Component Usage

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

Instructions on how to install and use the pwa-install web component in your project.

```APIDOC
## PWA Install Component Usage

### Description

The `pwa-install` component is a web component designed to provide an 'install' experience for Progressive Web Apps. It can be integrated into projects via a script tag or an npm package.

### Installation

#### Script Tag

Add the following script tag to the `<head>` of your `index.html` file:

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwainstall"
></script>
```

#### NPM

Install the package using npm:

```bash
npm install @pwabuilder/pwainstall
```

Then import it into your project:

```javascript
import '@pwabuilder/pwainstall';
```

### Basic Usage

Once installed, you can use the custom element `<pwa-install></pwa-install>` in your HTML or templates.

```html
<pwa-install></pwa-install>
```

### Live Demo

A live demo is available at: https://pwainstall.glitch.me
```

--------------------------------

### Install pwa-install via NPM

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

If your project uses npm, install the package and import the component. Then, use the <pwa-install></pwa-install> element in your templates.

```bash
npm install @pwabuilder/pwainstall
```

```javascript
import '@pwabuilder/pwainstall'
```

--------------------------------

### Check Installation Status Method

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

Use the getInstalledStatus() method on a reference to the pwa-install element to determine if the PWA is already installed.

```javascript
const pwaInstallElement = document.querySelector('pwa-install');
const isInstalled = pwaInstallElement.getInstalledStatus();
```

--------------------------------

### Install pwa-auth via NPM

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-auth/README.md

Install the pwa-auth component using NPM and import it into your project.

```javascript
npm install @pwabuilder/pwaauth
import @pwabuilder/pwaauth
```

--------------------------------

### Clone the pwa-install repository

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-update/CONTRIBUTING.md

Clone the repository to your local machine to start development.

```bash
git clone https://github.com/pwa-builder/pwa-install.git
```

--------------------------------

### Web Component Reference Example

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-update/README.md

Defines a custom element that uses the pwa-update component within its shadow DOM. Ensure the template with id 'example' is defined.

```html
<template id="example">
  <style></style>
  ...
  <pwa-update></pwa-update>
</template>
```

```javascript
customElements.define(
  "example",
  class Example extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("example");
      let templateContent = template.content;
      this.shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        templateContent.cloneNode(true)
      );
      this.updateComponent = document
        .getElementsByTagName("el-example")[0]
        .shadowRoot.querySelector("pwa-update");
    }
  }
);
```

--------------------------------

### Install Docsify CLI

Source: https://github.com/pwa-builder/pwabuilder/wiki/Documentation

Install the docsify-cli globally using npm to run the documentation locally. This tool is essential for previewing your changes before submitting them.

```bash
npm i docsify-cli -g
```

--------------------------------

### Complete Web App Manifest Example

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/home/pwa-workshop.md

This is a comprehensive example of a web app manifest file, showcasing various members for customizing PWA appearance, behavior, and functionality, including icons, screenshots, and shortcuts.

```json
{
  "id": "/",
  "scope": "/",
  "lang": "en-us",
  "name": "Repose intelligent daily mood journal",
  "display": "standalone",
  "start_url": "/",
  "short_name": "Repose",
  "theme_color": "#B6E2D3",
  "description": "Repose is a mental health journal app that serves as your personal mood tracking companion and helps you organize and reflect upon your daily thoughts.",
  "orientation": "any",
  "background_color": "#FAE8E0",
  "dir": "ltr",
  "related_applications": [],
  "prefer_related_applications": false,
  "display_override": ["window-controls-overlay"],
  "icons": [
    {
      "src": "assets/icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "assets/icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "assets/icons/24x24.png",
      "sizes": "24x24",
      "type": "image/png"
    }
  ],
  "screenshots": [
    {
      "src": "assets/screenshots/screen.png",
      "sizes": "1617x1012",
      "type": "image/png"
    }
  ],
  "features": [
    "Cross Platform",
    "fast",
    "simple"
  ],
  "categories": [
    "social"
  ],
  "shortcuts": [
    {
      "name": "New Journal",
      "short_name": "Journal",
      "description": "Write a new journal",
      "url": "/form",
      "icons": [{ "src": "assets/icons/icon_192.png", "sizes": "192x192" }]
    }
  ],
  "widgets": [
    {
      "name": "Starter Widget",
      "tag": "starterWidget",
      "ms_ac_template": "widget/ac.json",
      "data": "widget/data.json",
      "description": "A simple widget example from pwa-starter.",
      "screenshots": [
        {
          "src": "assets/screenshots/widget-screen.png",
          "sizes": "500x500",
          "label": "Widget screenshot"
        }
      ],
      "icons": [
        {
          "src": "assets/icons/48x48.png",
          "sizes": "48x48"
        }
      ]
    }
  ]
}
```

--------------------------------

### Pre-cache Assets on Install

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/home/sw-intro.md

This snippet listens for the 'install' event and pre-caches specified assets using the Cache API. It opens a cache with a defined name and adds all assets from a predefined list.

```javascript
const CACHE_NAME = 'cool-cache';

// Add whichever assets you want to pre-cache here:
const PRECACHE_ASSETS = [
    '/assets/',
    '/src/'
]

// Listener for the install event - pre-caches our assets list on service worker install.
self.addEventListener('install', event => {
    event.waitUntil((async () => {
        const cache = await caches.open(CACHE_NAME);
        cache.addAll(PRECACHE_ASSETS);
    })());
});
```

--------------------------------

### Start the PWA development server with custom Vite arguments

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/starter/cli-usage.md

Pass custom arguments directly to Vite using the --viteArgs flag when starting the development server.

```bash
pwa start --viteArgs="Custom Args String"
```

--------------------------------

### Close Install Prompt Method

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

To programmatically close the install modal, obtain a reference to the pwa-install element and call its closePrompt() method.

```javascript
const pwaInstallElement = document.querySelector('pwa-install');
pwaInstallElement.closePrompt();
```

--------------------------------

### Start PWA with Vite Arguments

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/cli/README.md

Starts the PWA development server and passes custom arguments to Vite. Refer to Vite's Config Reference for available arguments.

```bash
pwa start --viteArgs="<argument string here>"
```

--------------------------------

### Start the Development Server

Source: https://github.com/pwa-builder/pwabuilder/wiki/How-to-contribute-to-PWABuilder

Start the development server and the TypeScript compiler in watch mode. This script spins up a web server, opens the project in your browser, and automatically reloads the page when code changes are detected.

```bash
> npm start
```

--------------------------------

### Install pwa-inking via Script Tag

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-inking/README.md

Include this script tag in the head of your HTML file to use the component via a CDN. This is recommended for simple projects or quick starts.

```html
<script
        type="module"
        src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwa-inking"
    ></script>
```

--------------------------------

### Configure Launch Handler with Fallback Client Modes

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/builder/manifest.md

Example of configuring the launch handler with a list of client modes for backwards compatibility. The first valid mode in the list will be used.

```json
"launch_handler": {
    "client_mode": ["some-new-future-value", "focus-existing", "auto"]
}
```

--------------------------------

### Programmatically Creating PWAInstallComponent

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

Dynamically create and append a pwa-install element to the document body using JavaScript. This allows for creating the component at runtime.

```html
<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwainstall"
  ></script>
</head>
<body>
  <script async defer>
    var installComponent = document.createElement("pwa-install");
    document.body.appendChild(installComponent);
    installComponent.getInstalledStatus();
  </script>
</body>
```

--------------------------------

### Install Spectrum Accordion Component

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/starter/ui-components.md

Install the Spectrum Accordion component separately from npm. Spectrum components, like Vaadin, require individual installation.

```bash
npm install @spectrum-web-components/accordion
```

--------------------------------

### Install Project Dependencies with CocoaPods

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/builder/app-store.md

Run this command in the terminal within the 'src' directory of your unzipped PWABuilder project to install necessary dependencies. If you encounter errors, ensure CocoaPods is installed.

```bash
pod install
```

--------------------------------

### Configure Launch Handler for Single Instance App

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/builder/manifest.md

Example of configuring the launch handler to focus an existing client instance. This ensures your app runs as a single instance.

```json
"launch_handler": {
    "client_mode": "focus-existing"
}
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/blog/src/docs/ios/build-your-ios-app/build-your-ios-app.md

Run this command in the 'src' directory of your unzipped project to install necessary dependencies via CocoaPods. If you encounter errors, first run 'sudo gem install cocoapods'.

```bash
pod install
```

```bash
sudo gem install cocoapods
```

--------------------------------

### PWA CLI - Create New Project

Source: https://context7.com/pwa-builder/pwabuilder/llms.txt

Installs and uses the PWA CLI to create new PWA projects from starter templates with dependencies pre-configured.

```APIDOC
## PWA CLI - Create New Project

### Description
Installs and uses the PWA CLI to create new PWA projects from starter templates with dependencies pre-configured.

### Installation
```bash
npm install -g @pwabuilder/cli
```

### Usage
- **Create a new PWA project with the default template:**
  ```bash
  pwa create my-new-pwa
  ```
- **Create a new PWA project with a specific template:**
  ```bash
  pwa create my-whisper-app --template whisper
  ```
- **List available templates:**
  ```bash
  pwa create --list
  ```

### Available Templates
1.  **default**: Original PWA Starter template.
2.  **basic**: Simplified PWA Starter with fewer dependencies.
3.  **whisper**: PWA Starter with transformers.js and Fluent UI.

### Process
The `create` command performs the following actions:
1.  Downloads the selected template from GitHub.
```

--------------------------------

### Styling Install Button Color

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

Customize the color of the install button using the --install-button-color CSS variable.

```css
:root {
  --install-button-color: #3498db;
}
```

--------------------------------

### PWA Update Component Installation

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-update/README.md

Instructions on how to install the pwa-update component using either a script tag or npm.

```APIDOC
## Installation

There are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.

### Script tag

- Put this bit of code in your index.html

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"
></script>

<pwa-update></pwa-update>
```

### NPM

- Run `npm install @pwabuilder/pwaupdate`
- import with `import '@pwabuilder/pwaupdate'`

Then you can use the element `<pwa-update></pwa-update>` anywhere in your template, JSX, html etc. An example of using this component can be found here: https://pwa-update.glitch.me
```

--------------------------------

### Serve Docs Locally with Docsify

Source: https://github.com/pwa-builder/pwabuilder/wiki/Documentation

Run the documentation locally using the docsify-cli. Replace 'docs' with the actual path to your documentation directory if it differs.

```bash
docsify serve docs
```

--------------------------------

### Run App in Development Mode

Source: https://github.com/pwa-builder/pwabuilder/wiki/Development-instructions-and-best-practices

Starts the development server and opens the app in your default browser. Changes are automatically reloaded.

```bash
npm run dev
```

--------------------------------

### Install Vaadin Grid Component

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/starter/ui-components.md

Install the Vaadin Grid component separately from npm. Vaadin components are shipped individually.

```bash
npm install @vaadin/vaadin-grid
```

--------------------------------

### Entire image (blob) Example

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-inking/README.md

Example of how to request the entire canvas image as a blob and handle the broadcasted custom event.

```APIDOC
## Entire image (blob)

### Description
If transmitting the entire canvas state as a snapshot is necessary (e.g., for imported pictures), you can call the `requestBlob()` function and capture the broadcasted custom event which contains the blob image.

### Method
`requestBlob()`

### Event
`inking-canvas-blob-requested`

### Example Usage

```javascript
this.secondInkingCanvas.requestBlob();

this.secondInkingCanvas.addEventListener('inking-canvas-blob-requested', (e) => {
    console.log("blob updated event received");
    console.log(e.detail.blob);
}, false);
```

### Try it
[live](https://pwabuilder-inking-live.glitch.me/) | [code](https://glitch.com/edit/#!/pwabuilder-inking-live?path=src%2Fscript%2Fpages%2Fapp-home.ts%3A116%3A9)
```

--------------------------------

### CacheFirst Strategy Example

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/home/pwa-workshop.md

Demonstrates the CacheFirst strategy for runtime caching, which serves assets from the cache first and falls back to the network if not found, then updates the cache. Useful for revisioned assets.

```javascript
runtimeCaching: [
  {
    urlPattern: /^\/api\/.*$/,
    handler: 'CacheFirst',
    options: {
      cacheName: 'api-cache',
      expiration: {
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
      }
    }
  }
]
```

--------------------------------

### Create New PWA Project using PWA CLI

Source: https://context7.com/pwa-builder/pwabuilder/llms.txt

The PWA CLI allows you to create new PWA projects from starter templates. It handles dependency configuration and downloading the selected template from GitHub. You can list available templates using the `--list` flag.

```bash
# Install the PWA CLI globally
npm install -g @pwabuilder/cli

# Create a new PWA project with default template
pwa create my-new-pwa

# Create with specific template
pwa create my-whisper-app --template whisper

# List available templates
pwa create --list
# Available templates:
# 1. default - Original PWA Starter template
# 2. basic - Simplified PWA Starter with fewer dependencies
# 3. whisper - PWA Starter with transformers.js and Fluent UI

# The create command will:
# 1. Download the selected template from GitHub
```

--------------------------------

### Install PWABuilder CLI

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/release-notes/2023.md

Install the PWABuilder CLI globally using npm. This command is required before using any other PWABuilder CLI commands.

```bash
npm i -g @pwabuilder/cli
```

--------------------------------

### Customizing Install Button Text

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-install/README.md

Control the text displayed on the install button by setting the 'installbuttontext' property or attribute on the pwa-install element.

```html
<pwa-install installbuttontext="Add to Home Screen"></pwa-install>
```

--------------------------------

### Create a PWA project with a specific name

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/starter/cli-usage.md

Skip the prompt by providing the app name directly as an argument to the create command.

```bash
pwa create <app-name>
```

--------------------------------

### Install pwa-update via NPM

Source: https://github.com/pwa-builder/pwabuilder/blob/main/components/pwa-update/README.md

Install the package using npm and import it into your project. The component can then be used in your templates, JSX, or HTML.

```bash
npm install @pwabuilder/pwaupdate
```

```javascript
import '@pwabuilder/pwaupdate';
```

--------------------------------

### Create a New PWA Project

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/blog/src/posts/announcing-cli/announcing-cli.md

Use the 'pwa create' command to generate a new PWA project with a starter template. Replace 'my-first-pwa' with your desired project name.

```bash
pwa create my-first-pwa
```

--------------------------------

### Install pwa-inking via NPM

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/blog/src/posts/pwa-inking/pwa-inking.md

Install the pwa-inking npm package to use it in your project. This is the recommended method for projects already using npm.

```bash
npm install @pwabuilder/pwa-inking
```

--------------------------------

### POST /msix/bundle

Source: https://github.com/pwa-builder/pwabuilder/blob/main/apps/pwabuilder-microsoft-store/readme.md

Accepts a .appx or .msix file and creates a bundle file from it.

```APIDOC
## POST /msix/bundle

### Description
Accepts a .appx or .msix file and creates a bundle file from it.

### Method
POST

### Endpoint
/msix/bundle

### Parameters
#### Request Body
- **packageFile** (file) - Required - The .appx or .msix file to bundle.

### Response
#### Success Response (200)
- **bundleFile** (file) - The generated bundle file.

#### Response Example
(Binary data representing the bundle file)
```

--------------------------------

### JavaScript Push Notification Component Example

Source: https://github.com/pwa-builder/pwabuilder/blob/main/docs/builder/app-store.md

This JavaScript component demonstrates how to handle push notifications on the client-side. It is part of the iOS PWA shell example.

```javascript
import React, { useEffect } from 'react';
import PushNotification from 'react-native-push-notification';

const PushNotificationComponent = () => {
  useEffect(() => {
    PushNotification.configure({
      // (optional) Called when Token is generated
      onRegister: function (token) {
        console.log('TOKEN:', token);
      },

      // (required) Called when a remote or local notification is opened or received
      onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
        // Process the notification here
      },

      // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues.
      onRegistrationError: function(err) {
        console.error(err.message, err);
      },

      // IOS ONLY (optional) default: all - Permissions to register. You can deny the default permission requests.
      permissions: {
        alert: true,
        badge: true,
        sound: true
      },

      // (optional) default: true - See 
      popInitialNotification: true,

      /**
       * (optional) default: পড়ুন
       * Our local which is the default notification channel for Android. 
       * This is only used if you don't define any channels in your app's native code.
       */
      // localNotificationChannelId: "6033388584952558", //Use this ID if you want to use the default channel ID

      /** 
       * (optional) default: false - Should the initial notification be popped automatically 
       * before any other notification is delivered? If true, notification will be
       * popped whenever the app is popped from the background but not terminated.
       */
      requestPermissions: Platform.OS === 'ios'
    });
  }, []);

  return null;
};

export default PushNotificationComponent;
```