Creating Mobile Apps with live updates, Quasar and Capacitor.

このチュートリアルでは、Capacitor を使用して Quasar Mobile アプリを作成する方法について説明します。 クアザール. その後、Capacitor を使用してモバイルアプリに変換する方法を学びます。モバイルでアプリが見栄えの良いようにしたい場合は、

With Capacitor, you can change your Quasar web app into a mobile app without needing to do lots of hard things or learn a completely new way of making apps like you would with something called React Native.

このチュートリアルでは、Quasar アプリの新しいプロジェクトから始め、次に Capacitor を使用してネイティブモバイルアプリの世界に進むプロセスをガイドします。さらに、 Capgo 即時でアプリにライブアップデートを送信することができます。

About Capacitor

CapacitorJSは実に革新的な技術です！あらゆるWebプロジェクトに容易に取り入れることができ、Webビューをネイティブにラップし、ネイティブのXcodeとAndroid Studioプロジェクトを自動生成してくれます。さらに、プラグインはJSブリッジを通じてカメラなどのネイティブデバイス機能にアクセスできるのです。

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

Quasarアプリの準備

Quasarアプリを作成するには、以下のコマンドを実行してください。

npm init quasar

Pick the “App with Quasar CLI” option then “Quasar v2”.

ネイティブモバイルアプリを作成するには、プロジェクトのエクスポートが必要です。 エクスポート プロジェクトのエクスポートを実現するには、package.jsonに簡単なスクリプトを追加してください。 このスクリプトは、Quasarプロジェクトのビルドとコピーを実行できます。 コマンドを実行すると、プロジェクトのルートディレクトリに新しいフォルダが表示されます。

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

Quasarプロジェクトの設定 generateQuasar v2を選択してください。 dist プロジェクトのエクスポートを実現するには、package.jsonに簡単なスクリプトを追加してください。

このフォルダは後でCapacitorによって使用されますが、現在は正しく設定する必要があります。

CapacitorをQuasarアプリに追加する

ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、最初のいくつかのステップを実行する必要がありますが、後は単に1つのコマンドを実行するだけです。 sync 最初に、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップする必要があります。セットアップ中に、名前とバンドルIDのデフォルト値に「Enter」を押してください。

次に、iOSとAndroidプラットフォームのためのコアパッケージと関連パッケージをインストールする必要があります。 Capacitor CLI __CAPGO_KEEP_0__を初期化する

この時点で、新しい

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Quasar project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

By this point, you should be able to observe new ios と アンドロイド Quasarプロジェクト内のフォルダ

実際のネイティブプロジェクトです!

Androidプロジェクトにアクセスするには、 Android Studioをインストールする必要があります。iOSの場合はMacが必要で、 Xcode.

をインストールする必要があります。さらに、プロジェクト内で capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__設定が含まれています。webDirという設定だけに注意してください。, には、ビルドコマンドの結果を指します。現在は不正確です。

この問題を解決するには、 capacitor.config.json __CAPGO_KEEP_0__.config.json ファイルを更新してください。:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

webDir

npm run generate
npx cap sync

を更新してください。 npm run generate このコマンドを実行して、Capacitorを試してみてください。 npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

は、Quasarプロジェクトをビルドし、静的ビルドをコピーするだけです。 Capacitor plugins は、すべてのWeb __CAPGO_KEEP_0__をネイティブプラットフォームの正しい場所にSyncし、表示するアプリに表示することができます。 npx cap sync 再び。

気づかないうちに、実際には完了していますので、デバイス上のアプリを見てみましょう！

ネイティブアプリをビルドしてデプロイ

iOSアプリを開発するには、 Xcode がインストールされている必要があります。また、Androidアプリを開発するには、 Android Studio がインストールされている必要があります。さらに、アプリをアプリストアで配布する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要があります。

ネイティブモバイル開発に慣れていない場合は、両方のネイティブプロジェクトを簡単に開くことができるCapacitor CLIを使用できます。

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、デバイスにアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく、デバイスにアプリをデプロイできます。ここでは例を示します。

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。実機にアプリをデプロイするには、シミュレータにのみアプリをデプロイする場合とは異なります。署名アカウントを設定する必要がある場合は、Xcodeはプロセスを案内します (ただし、再び、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、簡単にプレイを押すだけで、デバイスにアプリを実行できます。デバイスを選択するには、上部に移動してください。ここでは例を示します。

Congratulations! Quasarのウェブアプリをモバイルデバイスに成功でデプロイしました。 ここでは例を示します。

開発中はもっと速く実行できる方法もあります。

Capgo ライブ更新

Capgo ライブ更新は、開発者がアプリの更新をアプリストアの通常の提出プロセスを経ることなく、モバイルアプリに展開できるサービスです。このサービスは、バグの修正やアプリの小さな更新を、アプリストアのレビュープロセスを待つことなく、迅速に実行できるようにすることができます。

QuasarアプリにCapgoを統合することは、リアルタイムのライブ更新の力を引き出すための簡単なプロセスです。このステップバイステップのガイドでは、Capgo Live Updateの統合と実装を通して、滑らかな更新を提供できるようにします。

CapgoサインアップとCapgoダッシュボードへのアクセス:

Capgoの登録をして、最初のバージョンをアップロードするためのAPIキーを取得する時間です。始めに signing up for a Capgo account.

Install the Capgo SDK:

コマンドラインから、Capacitorアプリのルートディレクトリに直接移動し、以下のコマンドを実行してください。

npm i @capgo/capacitor-updater && npx cap sync CapacitorをあなたのCapacitorアプリにインストールするには。

Capacitorを置き換えるために、以下のcodeをアプリに追加してください。

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

この手順は、ネイティブ プラグインにインストールが成功したことを通知します。

Login to Capgo CLOUD:

Capacitorを使用してQuasarモバイルアプリを作成する all APIキー present in your account to log in with the CLI:

`npx @capgo/cli@latest login YOU_KEY`

アプリを追加してください:

Capgoでアプリを作成しましょう。まずはCapgoでアプリを作成し、CLIで設定を完了してください。

    npx @capgo/cli@latest app add

このコマンドは、指定されたCapacitorの設定ファイルに定義されているすべての変数を使用してアプリケーションを作成します。

ファーストバージョンをアップロードしてください。:

Capacitorをビルドするコマンドを実行し、code を Capgo に送信します。

npx @capgo/cli@latest bundle upload`

デフォルトでは、バージョン名は package.json ファイル内に含まれるものになります。

チェックイン Capgo ビルドが存在する場合

あなた自身のモバイルサンドボックスアプリでテストすることもできます。 チャネルをデフォルトに設定.

あなたが Capgo にアプリを送信した後、チャネルをデフォルトに設定する必要があります。アプリが Capgo からアップデートを受け取るようにします。:

After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from Capgo.

npx @capgo/cli@latest channel set production -s default

主の JavaScript ファイルにこの設定を追加してください。:

__CAPGO_KEEP_0__

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

__CAPGO_KEEP_1__ npm run build && npx cap copy アプリをアップデートするには、

リアルタイムアップデートを受け取る:

Deployからリアルタイムアップデートを受け取るには、デバイスまたはエミュレータでアプリを実行する必要があります。アプリを実行する最も簡単な方法は、次のコマンドを実行することです。

  npx cap run [ios | android]

アプリを開き、バックグラウンドに置き、再度アプリを開きます。ログに表示されるように、アプリはアップデートを実行しました。

おめでとうございます！ 🎉 ご自身で初めてのリアルタイムアップデートを成功させました。これは、リアルタイムアップデートのすべての可能性の始まりです。詳しく知りたい場合は、完全な リアルタイムアップデートのドキュメント.

Capacitor プラグインの使用

Capacitor プラグインの使用方法をご紹介します。ご存知のように、プラグインを使用することが何度も言及されてきました。プラグインを使用するには、次のコマンドを実行してください。

npm i @capacitor/share

Share プラグイン は、特別な機能はありませんが、native share ダイアログを表示します!Share プラグインを使用するには、パッケージをインポートし、関連する share() pages/index.vue ファイルを変更するだけです。 to this:

<template>
  <div>
    <h1>Welcome to Quasar and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

新プラグインをインストールする場合、同期処理を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。

npx cap sync

ボタンをクリックすると、美しいネイティブシェアダイアログが実行されます!

次に、iOSとAndroidでアプリをよりネイティブに感じることができます。Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正できます。

ネイティブフィーリングUI with Capgoネイティブナビゲーションとトランジション

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Quasarと統合することはハック的で、すでに Tailwind CSS.

を持っている場合、ほとんどの場合、値があまりないため、Quasar + Capacitorアプリでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく、Capgoプラグインを使用することをお勧めします。

• @capgo/capacitor-native-navigation ネイティブナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブレードタブスタイル。Quasarルーターはルート状態を保持し、プラグインはネイティブブラウザを管理します。
• @capgo/capacitor-transitions — WebViewレイヤーで、Ionicスタイルのページ遷移とiOSのエッジスワイプバックを実現する。Ionic UIを採用する必要はありません。

両方をインストールする:

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

CSSのインセットモードでネイティブなナビゲーションを設定して、ウェブコンテンツがネイティブなバーを尊重するようにします:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

液体ガラスのタブバーをレンダリングします (iOSはシステム所有のレンダリングを使用し、AndroidはぼやけたWebViewのバックグラウンドを使用します):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

アプリシェルにネイティブなページ遷移を追加します:

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

ページをwrapする cap-router-outlet, cap-page、 cap-content、 setDirection('forward') または setDirection('back') を呼び出してください。

See the full guides: Capacitorを使用する@capgo/capacitor-ネイティブナビゲーション と Capacitorを使用する@capgo/capacitor-トランジション.

セーフエリアのTailwind

Tailwind CSSのデバイスセーフエリアを使用するには @capgo/tailwind-capacitor （__CAPGO_KEEP_0__で公開 tailwind-capacitor on npm). It provides safe-areas ユーティリティやその他のCapacitor-対応のTailwindプラグインを提供

npm add -D tailwind-capacitor

In src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

ユーティリティを使用 pt-safe, pb-safe、そして px-safe Capacitorを使用せずに env(safe-area-inset-*) 手作りするのではなく。Capgoプロジェクトは活発に開発されています — ご自身のQuasar設定で不足しているものがあれば GitHubにPRを提出してください。.

iOSレイアウトの問題を修正する (ビュー ポート、セーフ エリア、水平方向のオーバーフロー)

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできる場合、ビュー ポートタグを追加したり調整したりするだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。 overflow-x: hidden ビュー ポートメタタグが正しく適用されていることを確認してください。

(またはご自身のQuasar HTMLテンプレート)、ビュー ポートメタタグを

iOSセーフエリアを1つのルートラッパーからのみ取り扱います。 index.html 単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントではありません: <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

全ページコンテンツを

内部にラッピングしてください。

html,
body,
#q-app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Wrap all page content inside .app-shell. iOS のセーフエリアの余白をヘッダー、モーダル、レイアウトラッパーで重複して設定すると、UI がカットされたり大きすぎるように見えることがあります。

With @capgo/tailwind-capacitorで、同じ余白を表現するために、 pt-safe pb-safe px-safe on その単一のシェルで

Set Capacitor iOS contentInset を never 最初に

In capacitor.config.ts, 自然のインセットを無効にして、CSS (またはネイティブナビゲーションの contentInsetMode: 'css') がセーフエリアを管理するようにします。

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitorの自動コンテンツインセットとCSS env(safe-area-inset-*) __CAPGO_KEEP_0__は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を共有し、UIの統一性を維持する簡単な方法を提供します。

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__ 100vw__CAPGO_KEEP_0__ w-screen__CAPGO_KEEP_1__ min-width.

__CAPGO_KEEP_0__

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

__CAPGO_KEEP_1__ w-screen __CAPGO_KEEP_0__ w-full __CAPGO_KEEP_1__ 100vw / w-screen__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、codeを共有し、UIの統一性を維持する簡単な方法を提供します。

Capacitorを利用したQuasarモバイルアプリの開発 Capgo最新の機能やバグ修正を常にユーザーが利用できるようにするため、リアルタイムの更新をアプリに追加するのはとても簡単です。

If you would like to learn how to add Capgo to your Next.js app, take a look at the next article :

Keep going from Creating Mobile Apps with live updates, Quasar and Capacitor.

Capacitorを使用している場合、CapacitorのQuasar Mobileアプリを使用して、Capacitorを使用したQuasar Mobileアプリを開発できます。 Creating Mobile Apps with live updates, Quasar and Capacitor. Capacitorをネイティブプラグイン作業に接続するには Capgo プラグインディレクトリ for the product workflow in Capgo Plugin Directory, Capacitor プラグインは Capgo によって提供されます。 Capacitor プラグインの実装詳細については、Capgo によって提供されます。 プラグインの追加または更新 プラグインの追加または更新の実装詳細について Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについて Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローについて