{"id":3608,"date":"2021-03-03T20:11:49","date_gmt":"2021-03-03T20:11:49","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3608"},"modified":"2021-03-04T14:11:27","modified_gmt":"2021-03-04T14:11:27","slug":"start-build-deploy-your-first-capacitor-pwa-with-ionic","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/start-build-deploy-your-first-capacitor-pwa-with-ionic","title":{"rendered":"Start, Build & Deploy Your First Capacitor PWA with Ionic"},"content":{"rendered":"

\n This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy<\/a>. Simon also created the Practical Ionic<\/a> book, a guide to building real world Ionic applications with Capacitor and Firebase.\n<\/p><\/blockquote>\n

In this tutorial we will build a simple Capacitor PWA with Ionic and Angular. We will integrate functionality to capture an image and share our current position using Capacitor plugins which work inside both native apps and PWAs!<\/p>\n

\"\"

Finally we will bring our PWA to the outside world by hosting it on Netlify<\/a>, so we got a full trip from start to hosted PWA in one go.<\/p>\n

<\/p>\n

Ionic App Setup<\/h2>\n

To get started, simply use the Ionic CLI to create a blank new project with Angular integration and Capacitor directly enabled:<\/p>\n

\/\/ Install the Ionic CLI globally if needed\nnpm i -g @ionic\/cli\n\n\/\/ Start a blank new Ionic app\nionic start ionicPwa blank --type=angular --capacitor\n<\/code><\/pre>\n
This will create a new Ionic application that already comes with all configuration for Capacitor in place. In this tutorial we won’t get into building native apps, but you could easily build your app for iOS and Android<\/a> from this codebase using Capacitor in the end as well!<\/p>\n
We will use Capacitor 3.0 in this tutorial, so check the dependencies inside your package.json<\/strong> for @capacitor\/core<\/code> and @capacitor\/cli<\/code> and if they are still below v3, install the latest version like this:<\/p>\n
npm install @capacitor\/cli@next @capacitor\/core@next\n<\/code><\/pre>\n
At the time writing Capacitor 3 was still in beta, but we’re living on the edge today!<\/p>\n
Make Your Ionic App PWA Ready<\/h2>\n
The process of making an Angular app PWA ready is quite easy given the Angular schematics that automatically change all necessary parts of your project and inject a Service Worker in the right place:<\/p>\n
\/\/ Install Angular CLI globally if needed\nnpm i -g @angular\/cli\n\n\/\/ Run the Angular schematic for PWAs\nng add @angular\/pwa\n<\/code><\/pre>\n
If you now check out your updated app\/app.module.ts<\/strong> you’ll see that the Service Worker will be injected into our app when built for production:<\/p>\n
@NgModule({\n  declarations: [AppComponent],\n  entryComponents: [],\n  imports: [BrowserModule, IonicModule.forRoot(),\n    AppRoutingModule,\n    ServiceWorkerModule.register('ngsw-worker.js',\n      { enabled: environment.production }\n    )],\n  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],\n  bootstrap: [AppComponent],\n})\nexport class AppModule { }\n<\/code><\/pre>\n
That means, we just need to make sure we run the correct build in the end before publishing our PWA – we\u2019ll come back to this as it\u2019s important for Netlify.<\/p>\n
Adding Capacitor Plugins<\/h2>\n
Capacitor plugins<\/a> allow us to use native APIs or the according Web API implementation if we are running as a PWA (or standard website).<\/p>\n
That means, the same call\/code to capture an image or get the user’s geolocation works across different devices, and triggers the right functionality depending on the current run environment.<\/p>\n
A tiny change is that since version 3 of Capacitor, all plugins need to be installed separately and don’t exist inside the core package anymore. But that doesn’t make the process any more complicated as you will see.<\/p>\n
Capturing Photos with PWA Elements<\/h3>\n
Yes, we can easily access the camera from within our PWa using Capacitor. The only problem is that there’s no decent web UI when capturing an image, and so we install another package called PWA Elements<\/a> next to the camera plugin in our app now:<\/p>\n
npm i @capacitor\/camera\n\n\/\/ Overlay for image capturing on the web\nnpm install @ionic\/pwa-elements\n<\/code><\/pre>\n
To enable those elements, we need to import the defineCustomElements<\/code> and call it inside our src\/main.ts<\/strong> like this:<\/p>\n
import { enableProdMode } from '@angular\/core';\nimport { platformBrowserDynamic } from '@angular\/platform-browser-dynamic';\n\nimport { AppModule } from '.\/app\/app.module';\nimport { environment } from '.\/environments\/environment';\n\n\/\/ Add the import\nimport { defineCustomElements } from '@ionic\/pwa-elements\/loader';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err => console.log(err));\n\n\/\/ Call the loader\ndefineCustomElements(window);\n<\/code><\/pre>\n
Now we can import everything we need from the package and call getPhoto()<\/code> to capture an image and set the resulting webPath<\/code> to a local variable.<\/p>\n
Go ahead and change your home\/home.page.ts<\/strong> to:<\/p>\n
import { Component } from '@angular\/core';\nimport { Camera, CameraResultType, CameraSource } from '@capacitor\/camera';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n\n  myImage = null;\n\n  constructor() {}\n\n  async takePicture() {\n    const image = await Camera.getPhoto({\n      quality: 90,\n      allowEditing: true,\n      resultType: CameraResultType.Uri,\n      source: CameraSource.Camera\n    });\n\n    this.myImage = image.webPath;\n  }\n}\n<\/code><\/pre>\n
Finally we need a simple button and ion-img<\/code> to display the captured image inside our app, so change the home\/home.page.html<\/strong> to:<\/p>\n
<ion-header>\n  <ion-toolbar color="primary">\n    <ion-title>\n      Capacitor PWA\n    <\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content>\n  <ion-button (click)="takePicture()" expand="block">\n    <ion-icon name="camera" slot="start"><\/ion-icon>\n    Capture image\n  <\/ion-button>\n\n  <ion-img *ngIf="myImage" [src]="myImage"><\/ion-img>\n<\/ion-content>\n<\/code><\/pre>\n
You can already try this inside your browser by bringing up the preview with ionic serve<\/code> now!<\/p>\n
Of course the image capturing only works if you have some kind of webcam attached or inside your computer.<\/p>\n
Geolocation<\/h3>\n
To show that the usage of every Capacitor plugin<\/a> is really that easy, let’s install two more plugins to get the current user location and natively share it:<\/p>\n
\/\/ Install the geolocation plugin\nnpm i @capacitor\/geolocation\n\n\/\/ Install the share plugin\nnpm i @capacitor\/share\n<\/code><\/pre>\n
Just like before we can directly import the necessary functions from the two packages to first grab the position by calling getCurrentPosition()<\/code> and then store that value so we can share it later with the share plugin.<\/p>\n
For this, bring up the home\/home.page.ts<\/strong> again and add the new code:<\/p>\n
import { Component } from '@angular\/core';\nimport { Camera, CameraResultType, CameraSource } from '@capacitor\/camera';\nimport { Geolocation, Position } from '@capacitor\/geolocation';\nimport { Share } from '@capacitor\/share';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage {\n\n  myImage: string = null;\n  position: Position = null;\n\n  constructor() {}\n\n  async takePicture() { ... }\n\n  async getCurrentPosition() {\n    const coordinates = await Geolocation.getCurrentPosition();\n\n    this.position = coordinates;\n  }\n\n  async share() {\n    await Share.share({\n      title: 'Come and find me',\n      text: `Here's my current location: \n        ${this.position.coords.latitude}, \n        ${this.position.coords.longitude}`,\n      url: 'http:\/\/ionicacademy.com\/'\n    });\n  }\n}\n<\/code><\/pre>\n
Now we need some additional buttons to trigger our new functionality and to display the result, which we can easily do inside an ion-card<\/a>.<\/p>\n
Open the home\/home.page.html<\/strong> again and change it to:<\/p>\n
<ion-header>\n  <ion-toolbar color="primary">\n    <ion-title>\n      Capacitor PWA\n    <\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content>\n  <ion-button (click)="takePicture()" expand="block">\n    <ion-icon name="camera" slot="start"><\/ion-icon>\n    Capture image\n  <\/ion-button>\n\n  <ion-img *ngIf="myImage" [src]="myImage"><\/ion-img>\n\n  <ion-button (click)="getCurrentPosition()" expand="block">\n    <ion-icon name="locate" slot="start"><\/ion-icon>\n    Get position\n  <\/ion-button>\n\n  <!-- present the geolocation information -->\n  <ion-card *ngIf="position">\n    <ion-card-content>\n      <ion-item>\n        <ion-icon name="location" slot="start"><\/ion-icon>\n        Lat: {{ position.coords.latitude }}\n      <\/ion-item>\n      <ion-item>\n        <ion-icon name="location" slot="start"><\/ion-icon>\n        Lng: {{ position.coords.longitude }}\n      <\/ion-item>\n\n      <ion-button (click)="share()" expand="block" color="secondary">\n        <ion-icon name="share" slot="start"><\/ion-icon>\n        Share!\n      <\/ion-button>\n    <\/ion-card-content>\n  <\/ion-card>\n<\/ion-content>\n<\/code><\/pre>\n
With those two functionalities you might get into some trouble, because:<\/p>\n