Добавление конденсатора Clipboard and Geolocation plugin
в PWA.
Что мы здесь рассмотрим:
- #1 Добавление плагина буфера обмена
- #2 Добавление плагина геолокации
Предпосылки
- Создание нового проекта Ionic 4 PWA 👉
Build a Progressive Web App (PWA) with Ionic 4/Ionic Framework and Firebase Hosting.
- Добавление push-уведомлений в PWA👉
Adding Push Notifications to Progressive Web App (PWA) with Ionic 4 and Firebase Hosting.
Согласно предыдущей статье у нас должно быть 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
Если вы не возражаете, похлопайте 👏 👏, так как это помогло, я был бы вам очень признателен :) Помогите другим найти статью, чтобы она могла помочь им!
Всегда хлопай…