Building Progressive Web Apps

{
  "name": "myApp",
  "pwa": true
}

{
  "build": {
    "options": {
      "serviceWorker": true
    }
  }
}

const workboxConfig = {
  skipWaiting: true,
  clientsClaim: true,
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/api\.example\.com\/.*/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'api-cache',
        expiration: {
          maxEntries: 10,
          maxAgeSeconds: 300
        }
      }
    }
  ]
};

module.exports = {
  workbox: workboxConfig
};

{
  "name": "My Ionic App",
  "short_name": "IonicApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "assets/icon/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {
  if (swUpdate.isEnabled) {
    swUpdate.versionUpdates.subscribe(event => {
      console.log('New version available:', event);
    });
  }
}

import { SwUpdate } from '@angular/service-worker';
import { AlertController } from 'ionic-angular';

constructor(
  private swUpdate: SwUpdate,
  private alertCtrl: AlertController
) {}

updateApp() {
  const alert = this.alertCtrl.create({
    title: 'Update Available',
    message: 'A new version of the app is available. Would you like to update now?',
    buttons: [
      {
        text: 'Later',
        role: 'cancel'
      },
      {
        text: 'Update Now',
        handler: () => {
          window.location.reload();
        }
      }
    ]
  });
  alert.present();
}

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later
  deferredPrompt = e;
  // Show the install button or prompt
  document.getElementById('installButton').style.display = 'block';
});

document.getElementById('installButton').addEventListener('click', () => {
  // Hide the install button
  document.getElementById('installButton').style.display = 'none';
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
    // Clear the deferred prompt
    deferredPrompt = null;
  });
});

const registerPush = async () => {
  const sw = await navigator.serviceWorker.register("/sw.js");
  const subscription = await sw.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: "BNk..."
  });
  return subscription;
};

const sendPush = async (subscription, payload) => {
  const response = await fetch("/api/send-push", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ subscription, payload })
  });
  return response.json();
};

{
  "name": "MyApp",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash": {
    "src": "assets/splash/splash.png",
    "sizes": "1024x1024"
  }
}

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW registered: ', registration);
      })
      .catch(error => {
        console.log('SW registration failed: ', error);
      });
  });
}

ionic build --prod --release

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('SW registered: ', registration);
      })
      .catch((error) => {
        console.log('SW registration failed: ', error);
      });
  });
}