Web APIs in Firefox: Notifications, Web Share, File System, Web Locks, and What's Missing

// Request permission
const permission = await Notification.requestPermission();
if (permission === 'granted') {
  const notification = new Notification('Title', {
    body: 'Notification body',
    icon: '/icon.png',
    badge: '/badge.png',
    tag: 'unique-tag',  // Replace existing notifications with same tag
    requireInteraction: true  // Keep notification visible until dismissed
  });

  notification.onclick = () => {
    window.focus();
    notification.close();
  };
}

// Share content to mobile apps
await navigator.share({
  title: 'Article title',
  text: 'Check out this article',
  url: 'https://example.com/article'
});

// Check support
if (navigator.canShare && navigator.canShare({ url: 'https://example.com' })) {
  // Share supported for this content
}

// Text to speech
const utterance = new SpeechSynthesisUtterance('Hello, world!');
utterance.lang = 'en-US';
utterance.rate = 1.0;  // 0.1 to 10
utterance.pitch = 1.0;  // 0 to 2
utterance.volume = 1.0;

// List voices
const voices = speechSynthesis.getVoices();
utterance.voice = voices.find(v => v.name.includes('Google'));

speechSynthesis.speak(utterance);

const recognition = new webkitSpeechRecognition();  // Chrome
// Firefox: uses SpeechRecognition (no webkit prefix)
const recognition = new SpeechRecognition();

recognition.lang = 'en-US';
recognition.continuous = false;

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  console.log('Heard:', transcript);
};

recognition.start();

// Show file picker
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.multiple = true;

fileInput.addEventListener('change', () => {
  Array.from(fileInput.files).forEach(file => {
    console.log(file.name, file.size, file.type);
    const reader = new FileReader();
    reader.onload = (e) => console.log('Data:', e.target.result.slice(0, 100));
    reader.readAsDataURL(file);
  });
});

fileInput.click();

// Modern API for reading/writing local files
const [fileHandle] = await window.showOpenFilePicker({
  types: [{ 
    description: 'JSON files', 
    accept: { 'application/json': ['.json'] }
  }]
});

const file = await fileHandle.getFile();
const contents = await file.text();
console.log(contents);

// Write file
const writable = await fileHandle.createWritable();
await writable.write('new contents');
await writable.close();

// Acquire an exclusive lock
await navigator.locks.request('resource-key', async (lock) => {
  // Only one tab runs this at a time
  await doExclusiveWork();
});

// Acquire with timeout
await navigator.locks.request('resource-key', { 
  ifAvailable: true  // Don't wait, return null if locked
}, async (lock) => {
  if (!lock) {
    console.log('Resource locked, skipping');
    return;
  }
  await doWork();
});

const request = new PaymentRequest(
  [{ supportedMethods: 'basic-card' }],  // Payment methods
  {
    total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } },
    displayItems: [
      { label: 'Item', amount: { currency: 'USD', value: '10.00' } }
    ]
  }
);

const response = await request.show();
const { methodName, details } = response;
await response.complete('success');

const detector = new IdleDetector();

detector.addEventListener('change', () => {
  console.log('User state:', detector.userState);  // 'active' or 'idle'
  console.log('Screen state:', detector.screenState);  // 'locked' or 'unlocked'
});

await detector.start({ threshold: 60_000 });  // Detect after 60s of idle

const contacts = await navigator.contacts.select(
  ['name', 'email', 'tel'],
  { multiple: true }
);

contacts.forEach(contact => {
  console.log(contact.name, contact.email);
});

// Set badge with count
await navigator.setAppBadge(5);

// Clear badge
await navigator.clearAppBadge();

// Get physical key names for current keyboard layout
const map = await navigator.keyboard.getLayoutMap();
const key = map.get('KeyQ');  // Returns 'q' for US, 'a' for AZERTY, etc.