How to use Ionic Capacitor in Progressive Web App (PWA) with Ionic 4, Capacitor and Angular.

Adding Capacitor Clipboard and Geolocation plugin to PWA.

What we will cover here:

• #1 Adding Clipboard Plugin
• #2 Adding Geolocation Plugin

Prerequisites

• Generating a New Ionic 4 PWA Project 👉 Build a Progressive Web App (PWA) with Ionic 4/Ionic Framework and Firebase Hosting.
• Adding Push Notifications to PWA 👉 Adding Push Notifications to Progressive Web App (PWA) with Ionic 4 and Firebase Hosting.

As per previous article we must have USER-REQUESTED-TOKEN to send push notifications to client. So in this article we decide to use copy-clipboard plugin so as to keep token safe to send notifications to user.

Next, Adding Capacitor

Capacitor is an open source native container (similar to Cordova) built by the Ionic team that we can use to build web/mobile apps that run on iOS, Android, Electron (Desktop), and as Progressive Web Apps with the same code base. It allows us to access the full native SDK on each platform, and easily deploy to App Stores or create a PWA version of our application.