Добавление конденсатора Clipboard and Geolocation plugin в PWA.

Что мы здесь рассмотрим:

  • #1 Добавление плагина буфера обмена
  • #2 Добавление плагина геолокации

Предпосылки

Согласно предыдущей статье у нас должно быть USER-REQUESTED-TOKEN для отправки push-уведомлений клиенту. Поэтому в этой статье мы решили использовать copy-clipboard plugin, чтобы обеспечить безопасность токена для отправки уведомлений пользователю.

Далее добавляем конденсатор

Capacitor — это нативный контейнер с открытым исходным кодом (похожий на Cordova), созданный командой Ionic, который мы можем использовать для создания веб-/мобильных приложений, работающих на iOS, Android, Electron (Desktop) и в качестве прогрессивных веб-приложений с тем же кодом. база. Это позволяет нам получить доступ к полному собственному SDK на каждой платформе и легко развернуть его в магазинах приложений или создать PWA-версию нашего приложения.

Capacitor можно использовать с Ionic или любым предпочтительным фреймворком и расширять его с помощью плагинов. Он имеет богатый набор официальных плагинов, и вы также можете использовать его с плагинами Cordova.

# Установка конденсатора

Начнем с установки конденсатора в наш проект:

npm install --save @capacitor/cli @capacitor/core

Затем вам нужно инициализировать конденсатор с помощью npx cap init \[appName\] [appId]:

npx cap init pwaChitChat pwachitchat.codechintan.com

# 1 Добавление плагина буфера обмена

Теперь давайте воспользуемся плагином Clipboard Capacitor в нашем проекте на примере. Итак, у нас были наши home.page.ts и home.page.html из предыдущей статьи.

Сначала откройте файл src/app/home/home.page.ts и обновите его следующим образом:

import { Plugins } from '@capacitor/core';

Затем добавьте метод copyToClipboard(), который будет использоваться для копирования термина JS в буфер обмена:

async copyToClipboard() {
  const { Clipboard } = Plugins;
  Clipboard.write({ 
    string: 'URL: ' + this.requestToken 
  }); 
}

Окончательный код файла src/app/home/home.page.ts выглядит следующим образом:

Далее откройте файл src/app/home/home.page.html и добавьте кнопку для вызова функции copyToClipboard — для этого откройте и обновите home.page.html следующим образом:

<ion-button (click)="copyToClipboard()">Copy Token</ion-button>

Пока это скриншот результата:
Вы можете видеть кнопку "Копировать токен" (зеленого цвета), которая вызовет функцию copyToClipboard(), которая скопирует данный текст на ваш буфер обмена.

#2 Добавление плагина геолокации

API геолокации предоставляет простые методы для получения и отслеживания текущего положения устройства с помощью GPS, а также сведений о высоте, направлении и скорости, если они доступны.

(Прочитайте Подробное примечание, чтобы использовать этот плагин для родных устройств Android и iOS.)

Сначала откройте файл src/app/home/home.page.ts и обновите его следующим образом:

import { Plugins } from '@capacitor/core'; 
const { Geolocation, Clipboard } = Plugins;

Далее добавьте метод getCurrentPosition() и метод watchPosition():

// code to get current position of user
async getCurrentPosition() {
    const coordinates = await Geolocation.getCurrentPosition();
    console.log('Current', coordinates);
}
// code to watch users current active position
watchPosition() {
    const wait = Geolocation.watchPosition({}, (position, err) => {
    console.log('Current position', position);
});

Окончательный код файла src/app/home/home.page.ts выглядит следующим образом:

Затем откройте файл src/app/home/home.page.html и добавьте кнопку для вызова функций getCurrentPosition() и watchPosition(). Для этого откройте и обновите home.page.html следующим образом:

<ion-button (click)="getCurrentPosition()"> Allow Location </ion-button>

Пока это снимок экрана с результатом:
Вы можете видеть кнопку «РАЗРЕШИТЬ МЕСТОПОЛОЖЕНИЕ» (зеленого цвета), которая вызовет функцию getCurrentPosition(), которая напечатает объект местоположения в браузере. консоль. Смотрите изображение ниже👇👇

Сделанный! 🤩 Добавить плагины Capacitor очень просто. До встречи👋👋

Не стесняйтесь комментировать в поле для комментариев… Если я что-то пропустил, или что-то неверно, или что-то не работает для вас :)

Оставайтесь на связи, чтобы не пропустить новые статьи:
https://medium.com/@AnkitMaheshwariIn

Если вы не возражаете, похлопайте 👏 👏, так как это помогло, я был бы вам очень признателен :) Помогите другим найти статью, чтобы она могла помочь им!

Всегда хлопай…

Выучить больше