Iniziare con Condividi Target

Questa guida ti guiderà attraverso l’integrazione del plug-in Capacitor Share Target per consentire alla tua app di ricevere contenuti condivisi da altre applicazioni.

Installazione

Installa il plug-in utilizzando npm:

npm install @capgo/capacitor-share-target
npx cap sync

Android Configurazione

Aggiungi filtri di intenti al tuo AndroidManifest.xml all’interno del tag <activity>:

Accetta contenuto testuale

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="text/*" />
</intent-filter>

Accetta immagini

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="image/*" />
</intent-filter>

<intent-filter>
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="image/*" />
</intent-filter>

Accetta tutti i tipi di contenuto

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="*/*" />
</intent-filter>

<intent-filter>
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="*/*" />
</intent-filter>

iOS Configurazione

Per iOS, devi creare un’estensione di condivisione:

1. Crea estensione di condivisione in Xcode

Apri il tuo progetto in Xcode
Vai su File > Nuovo > Destinazione
Seleziona Condividi estensione e fai clic su Avanti
Assegnagli un nome (ad esempio “ShareExtension”) e fai clic su Fine
Se richiesto, attiva lo schema

2. Configura il gruppo di app

Nella destinazione dell’app principale, vai su Firma e funzionalità
Fai clic su + Funzionalità e aggiungi Gruppi di app
Crea o seleziona un gruppo di app (ad esempio, group.com.yourcompany.yourapp)
Ripetere per la destinazione dell’estensione di condivisione

3. Aggiorna il codice dell’estensione di condivisione

L’estensione di condivisione deve salvare i dati condivisi nel contenitore del gruppo di app in modo che l’app principale possa accedervi.

Per la configurazione dettagliata di iOS, consulta la documentazione sull’estensione di condivisione diApple.

Utilizzo di base

Importa il plugin

import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

Ascolta i contenuti condivisi

CapacitorShareTarget.addListener('shareReceived', (event) => {
  console.log('Received share event');
  console.log('Title:', event.title);
  console.log('Texts:', event.texts);

  // Handle shared files
  if (event.files && event.files.length > 0) {
    event.files.forEach(file => {
      console.log(`File: ${file.name}`);
      console.log(`Type: ${file.mimeType}`);
      console.log(`URI: ${file.uri}`);
    });
  }
});

Esempio completo

Ecco un esempio completo che gestisce diversi tipi di contenuto condiviso:

import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

class ShareTargetService {
  private listener: any;

  initialize() {
    this.listener = CapacitorShareTarget.addListener('shareReceived', (event) => {
      this.handleSharedContent(event);
    });

    console.log('Share target listener initialized');
  }

  handleSharedContent(event: any) {
    console.log('=== Share Received ===');

    // Handle title
    if (event.title) {
      console.log('Title:', event.title);
      this.showNotification('Shared: ' + event.title);
    }

    // Handle text content
    if (event.texts && event.texts.length > 0) {
      event.texts.forEach((text: string, index: number) => {
        console.log(`Text ${index + 1}:`, text);
        this.processSharedText(text);
      });
    }

    // Handle files
    if (event.files && event.files.length > 0) {
      console.log(`Received ${event.files.length} file(s)`);

      event.files.forEach((file: any) => {
        console.log('File details:');
        console.log('  Name:', file.name);
        console.log('  Type:', file.mimeType);
        console.log('  URI:', file.uri);

        this.processSharedFile(file);
      });
    }
  }

  processSharedText(text: string) {
    // Check if it's a URL
    if (this.isURL(text)) {
      console.log('Shared URL detected:', text);
      // Handle URL (e.g., create bookmark)
      this.saveBookmark(text);
    } else {
      console.log('Shared text detected');
      // Handle plain text (e.g., create note)
      this.createNote(text);
    }
  }

  processSharedFile(file: any) {
    const fileType = file.mimeType.split('/')[0];

    switch (fileType) {
      case 'image':
        console.log('Processing shared image');
        this.handleImage(file);
        break;

      case 'video':
        console.log('Processing shared video');
        this.handleVideo(file);
        break;

      case 'audio':
        console.log('Processing shared audio');
        this.handleAudio(file);
        break;

      case 'application':
        console.log('Processing shared document');
        this.handleDocument(file);
        break;

      default:
        console.log('Processing generic file');
        this.handleGenericFile(file);
    }
  }

  handleImage(file: any) {
    // Process image file
    console.log('Saving image:', file.name);
    // Implementation: Save to gallery, upload, etc.
  }

  handleVideo(file: any) {
    // Process video file
    console.log('Saving video:', file.name);
  }

  handleAudio(file: any) {
    // Process audio file
    console.log('Saving audio:', file.name);
  }

  handleDocument(file: any) {
    // Process document file
    console.log('Saving document:', file.name);
  }

  handleGenericFile(file: any) {
    // Process generic file
    console.log('Saving file:', file.name);
  }

  isURL(text: string): boolean {
    try {
      new URL(text);
      return true;
    } catch {
      return false;
    }
  }

  saveBookmark(url: string) {
    console.log('Creating bookmark for:', url);
    // Implementation
  }

  createNote(text: string) {
    console.log('Creating note with text:', text.substring(0, 50));
    // Implementation
  }

  showNotification(message: string) {
    console.log('Notification:', message);
    // Show toast or notification
  }

  cleanup() {
    if (this.listener) {
      this.listener.remove();
    }
  }
}

// Usage
const shareTarget = new ShareTargetService();
shareTarget.initialize();

// Cleanup when app closes
// shareTarget.cleanup();

Integrazione di reazione

import { useEffect } from 'react';
import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

function useShareTarget(onShareReceived: (event: any) => void) {
  useEffect(() => {
    const listener = CapacitorShareTarget.addListener('shareReceived', onShareReceived);

    return () => {
      listener.remove();
    };
  }, [onShareReceived]);
}

// Usage in component
function App() {
  useShareTarget((event) => {
    console.log('Share received:', event);
    // Handle shared content
  });

  return <div>Your App</div>;
}

Integrazione Vue

import { onMounted, onUnmounted } from 'vue';
import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

export default {
  setup() {
    let listener: any;

    onMounted(() => {
      listener = CapacitorShareTarget.addListener('shareReceived', (event) => {
        console.log('Share received:', event);
        // Handle shared content
      });
    });

    onUnmounted(() => {
      if (listener) {
        listener.remove();
      }
    });
  }
};

Gestione di diversi tipi di contenuto

URL

if (event.texts && event.texts.length > 0) {
  const text = event.texts[0];

  if (text.startsWith('http://') || text.startsWith('https://')) {
    // Handle URL
    window.open(text, '_blank');
  }
}

Immagini

if (event.files) {
  const images = event.files.filter(f => f.mimeType.startsWith('image/'));

  images.forEach(async (image) => {
    // Read and display image
    const response = await fetch(image.uri);
    const blob = await response.blob();
    const imageUrl = URL.createObjectURL(blob);

    // Display or process image
    console.log('Image URL:', imageUrl);
  });
}

File multipli

if (event.files && event.files.length > 1) {
  console.log(`Processing ${event.files.length} files`);

  const processPromises = event.files.map(file =>
    processFile(file)
  );

  await Promise.all(processPromises);
  console.log('All files processed');
}

Migliori pratiche

Gestisci più tipi di contenuto: preparati a ricevere testo, URL e file
Convalida contenuto: controlla i tipi MIME prima dell’elaborazione
Fornisci feedback: mostra agli utenti cosa è stato ricevuto
Gestione errori: gli URI dei file potrebbero non essere validi o inaccessibili
Pulisci ascoltatori: rimuovi gli ascoltatori quando non sono necessari
Testa accuratamente: prova con diverse app e tipi di contenuti
Richiedi autorizzazioni: alcuni tipi di file potrebbero richiedere autorizzazioni aggiuntive

Problemi comuni

La condivisione non funziona su Android

Assicurati che i filtri degli intent siano configurati correttamente in AndroidManifest.xml all’interno del tag <activity> che ha android.intent.action.MAIN.

iOS L’estensione di condivisione non viene visualizzata

Verificare che il gruppo di app sia configurato in entrambi i target
Assicurarsi che l’estensione Condividi sia attivata
Verifica che Info.plist in Share Extension abbia la configurazione corretta

Errori di accesso ai file

try {
  const response = await fetch(file.uri);
  const blob = await response.blob();
  // Process blob
} catch (error) {
  console.error('Failed to access file:', error);
  // Show error to user
}

Passaggi successivi

Esplora il API Riferimento per la documentazione completa del metodo
Controlla l’app di esempio per un utilizzo avanzato
Consulta il tutorial per esempi di implementazione completi