Bubblewrap を使用して Web サイトをネイティブ Android アプリに変換する – ステップバイステップ ガイド

あなたがアプリ開発について詳しくない Web 開発者 (私と同じです!) であれば、この記事はあなたのためのものです。新しいフレームワークや言語を使わずに、ウェブサイトをネイティブ アプリに変える方法を教えます。ウェブサイトを Play ストアで公開できる PWA (プログレッシブ ウェブ アプリ) に変換する方法を学びます。

まず、あなたのウェブサイトをプログレッシブ ウェブ アプリ (PWA) に変換します。次に、Bubblewrap という Google の無料コマンドライン ツールを使用します。 その PWA を Android アプリにパッケージ化します。始めましょう。

前提条件

このチュートリアルに従う場合、いくつかの前提条件があります。

• Web 開発の基礎知識

• サイトは一般公開されている必要があり、そのソース コードにアクセスできる必要があります。

• npm を使用して必要なツールをインストールするので、Node.js がインストールされていることを確認してください。

注: このチュートリアルはVite に基づいています。

目次

<オル>

PWA とは何ですか?

バブルラップとは何ですか?

• TWA (信頼できるウェブ アクティビティ) とは何ですか?

• TWA が信頼を検証する方法

ステップ 1 – Vite で PWA を設定する

• アプリのアイコンを作成する

• Vite PWA プラグインをインストールします。

• プラグインを設定する

ステップ 2 – Android アプリを作成する

• ビルド フォルダーを作成します

• Bubblewrap CLI をインストールする

• プロジェクトを初期化します

• init コマンドのトラブルシューティングを行ってみましょう。

ステップ 3 – バブルラップの質問に答える

ステップ 4 – アプリを構築する

ステップ 5 – TWA 検証のセットアップ

• .well-known フォルダとは何ですか?

• delegate_permission/common.handle_all_urls とは何ですか?

ステップ 6 (オプション) – アプリ内エクスペリエンスをカスタマイズする

まとめ

PWA とは何ですか?

PWA はプログレッシブ ウェブ アプリケーションの略です。 、その目標は、Web サイトの外観と操作性をネイティブ アプリとまったく同じにすることです。ブラウザでウェブサイトにアクセスし、携帯電話やラップトップにダウンロードできるインストール アイコンが表示された場合は、PWA を使用したことになります。

しかし、それは見た目と感触だけではありません。 PWA には、オフラインでの作業、プッシュ通知の送信など、アプリのような機能もあります。

PWA には 2 つの主要なコンポーネントがあります。

• マニフェスト ファイルは、名前、アイコン、開始 URL など、アプリについて説明します。

• Service Worker は、プロキシとして機能するバックグラウンド JavaScript ファイルです。キャッシュとプッシュ通知はサービス ファイルによって処理され、メイン スレッドとは別のスレッドとして実行されます。

これら 2 つのコンポーネントがないと、ブラウザではユーザーがアプリをローカルにダウンロードできません。

マニフェスト ファイルと Service Worker は、ブラウザーのチェックリストのようなものです。 Web サイトにアクセスすると、ブラウザはこれらのコンポーネントの両方を探します。これらが存在し、正しく構成されている場合、ブラウザーはそれが真の PWA であることを認識し、「インストール」アイコンを表示して、ユーザーがアプリをローカルにダウンロードできるようにします。これらがないと、ブラウザは通常の Web サイトを表示するだけであり、インストールするオプションは利用できません。

バブルラップとは何ですか?

Bubblewrap は Google が作成したコマンドライン ツールで、PWA を取得し、Trusted Web Activity (TWA) を使用して Android アプリに変換します。

Bubblewrap は、TWA の作成プロセスを簡素化し、PWA のマニフェスト ファイルを Android アプリ パッケージ (APK または AAB) に変換します。

TWA (信頼された Web アクティビティ) とは何ですか?

Trusted Web Activity (TWA) は、Android アプリ内でライブ Web サイトを全画面表示できるようにする最新の Android 機能です。基本的にブラウザ上でウェブサイトを実行しますが、アプリ上にブラウザのアドレスバーは表示されません。これにより、ネイティブ アプリのように感じることができます。

この全画面機能のロックを解除するには、アプリが「信頼済み」である必要があります。

ここで「シークレット ハンドシェイク」が登場します。Android では、アプリを作成した人と Web サイトの所有者が同じであることを確認する必要があります。この所有権の証明がないと、TWA はフォールバック モードで実行され、ブラウザのアドレス バーが上部に表示され、ネイティブ アプリの操作性が損なわれます。

TWA が信頼を検証する方法

この信頼はデジタル アセット リンクと呼ばれるシステムを使用して検証されます。 。アプリの一意のデジタル指紋を含む特別なファイルを Web サイトに配置します (これは実装部分で行います)。ユーザーがアプリを開くと、Android OS はこのファイルをチェックします。フィンガープリントが一致すると、アプリに「信頼できる」ステータスが付与され、アドレス バーが削除され、ディープ リンクなどの他の機能が有効になります。

この関係は、Google の公式テスト ツールである Digital Asset Links Verifier を使用して自分で確認できます。

プロジェクトとツールを理解したところで、構築を開始しましょう。

ステップ 1 – Vite で PWA を設定する

最初のステップは、PWA の 2 つの主要コンポーネント、マニフェスト ファイルとサービス ワーカーを追加することです。これにより、ブラウザはそれを「インストール可能」であると認識できるようになります。

このガイドは Vite で構築されたプロジェクトに基づいており、特別なプラグインを使用するとこのプロセスが簡単になります。別のツールを使用している場合、概念は同じですが、環境に応じた特定の手順については、別のリソースを調べる必要があります。

アプリのアイコンを作成する

コードに触れる前に、アプリのアイコンが必要です。 Android では、アプリのランチャー アイコン (ホーム画面に表示されるもの) とスプラッシュ スクリーン (アプリの起動時に表示されるもの) に特定のサイズが必要です。

2 つの主要なサイズが必要です:192x192 ピクセルと 512x512 ピクセル。このファビコン ジェネレーターを使用して、それぞれのサイズでロゴを生成できます。メインのロゴをアップロードすると、必要なサイズがすべて生成されます。

次に、生成されたファイルをダウンロードし、192x192 を配置するだけです。 および 512x512 ファイルを public に格納します プロジェクトのフォルダー。

Vite PWA プラグインをインストールします。

PWA にはマニフェスト ファイルとサービス ワーカーが必要です。これらを手動で作成することもできますが、このプラグインはそのプロセス全体を自動化します。 manifest.json が自動的に生成されます。 と service-worker.js プロジェクトをビルドするたびに。

npm install vite-plugin-pwa -D

プラグインを設定する

このステップでは、このプラグインを使用してアプリのマニフェストを構成します。 vite.config.ts を編集します ファイル。この設定により、アプリの名前や使用するアイコンなどをプラグインに指示します。

vite.config.ts で :

export default defineConfig({
 plugins: [
 VitePWA({
 registerType: "autoUpdate", 
 manifest: {
 name: "your app name",
 short_name: "your app short name",
 description: "write any description",
 theme_color: "#0d1117",
 background_color: "#ffffff",
 display: "standalone",
 start_url: "/",
 icons: [
 {
 src: "/web-app-manifest-192x192.png",
 sizes: "192x192",
 type: "image/png",
 },
 {
 src: "/web-app-manifest-512x512.png",
 sizes: "512x512",
 type: "image/png",
 },
 ],
 },
 }),
 ]

ここで、npm run build を実行すると、 を実行すると、プラグインによってマニフェスト ファイルと Service Worker ファイルが自動的に生成されます。それが完了したら、変更をデプロイします。これで、あなたのウェブサイトは PWA になりました。

ステップ 2 – Android アプリを作成する

ウェブサイトが PWA になったので、Bubblewrap を使用してウェブサイトを Android アプリにパッケージ化しましょう。

ビルド フォルダーを作成する

Android プロジェクト ファイル用の専用フォルダーを作成します。プロジェクトのルートに新しいフォルダーを作成します。私の名前は android とします .

project/
├── client/
├── server/
└── android/

次に、作成した新しいフォルダーに移動します。

Bubblewrap CLI をインストールする

npm install -g @bubblewrap/cli

プロジェクトを初期化する

次に、init を実行します。 コマンド。 Bubblewrap はライブ Web サイトに接続します。manifest.webmanifest を読み取ります。 Vite が作成したファイルを作成し、その情報を使用して基本的な Android プロジェクトを生成します。

bubblewrap init --manifest=https://your-website-domain/manifest.webmanifest

your-website-domain を置き換えてコマンドを実行します。 実際の URL に置き換えます:

init のトラブルシューティングを行ってみましょう コマンド

init を実行すると、 コマンドを実行するには、Bubblewrap には 2 つの主要なソフトウェア パッケージが必要です:Java Development Kit (JDK) とAndroid SDK 。それらをインストールするよう提案されます。

JDK セットアップ:

? Do you want Bubblewrap to install the JDK (recommended)?
 (Enter "No" to use your own JDK 17 installation) (Y/n)

私の場合、Bubblewrap に JDK をインストールさせると、プロセスはファイルをダウンロードしましたが、「解凍」ステップで失敗しました。同じ問題に直面しても、心配しないでください。修正するには、手動でインストールします。

• ノーと言う

• Adoptium などのソースから推奨バージョン (通常は JDK 17) をダウンロードします。

• これをインストールし、JDK の bin を含むようにシステムの環境変数を設定します。 パス。環境変数の設定方法がわからない場合は、このサイト「環境変数の設定」を参照してください。

• Bubblewrap がパスを要求する場合は、C:\java\jdk-17.0.16.8-hotspot などのようにパスを直接指定します。 .

Android SDK のセットアップ:

JDK が正常にセットアップされたら、次のステップは Android SDK を構成することです。

? Do you want Bubblewrap to install the Android SDK (recommended)?
 (Enter "No" to use your own Android SDK installation) (Y/n)

Android SDK を持っていなかったため、[はい] を選択して Bubblewrap にこれを処理させました。 。ここでは何の問題もありませんでした。

Android SDK でのセットアップで問題が発生した場合は、JDK セットアップと同様に、手動でセットアップしてパスを指定してください。

ステップ 3 – バブルラップの質問に答える

SDK がセットアップされると、Bubblewrap はアプリを構成するために多くの質問をします。この情報は、twa-manifest.json の作成に使用されます。 ファイル。これはアプリの設計図です。

Domain: Press Enter (auto-filled from your manifest)
Application name: Your full app name
Application ID: (e.g, chat.yourapp.twa)
Display mode: standalone
Orientation: portrait
Status bar color: Press Enter (accepts default)
Splash screen color: Press Enter (accepts default)
Icon URL: Press Enter (accepts default)
Include support for Play Billing?: Type Y if your app uses Google Play in-app purchases. Otherwise, N
Request geolocation permission?: Type Y if your app needs location access. Otherwise, N

これらの質問で重要な部分は、キー ストアとキーです。

First and Last names: Your full name
Organizational Unit: Developer or anything
Organization: Your organization name
Country (2-letter code): Your country code
Password for key store: Enter a new password
Password for key: Re-enter the same password

注: キー ストアとキーの両方のパスワードは同じである必要があります。同じでない場合、エラーがスローされます。 この問題を参照してください: バブルラップの問題。

ステップ 4 – アプリを構築する

bubblewrap build --universalApk

このコマンドにより、アプリケーションの構築が開始されます。ここで、フラグ universalApk .apk が生成されます および .abb 。 Play ストアでアプリケーションを公開する場合は、.abb をアップロードします。 ファイルを Play ストアにコピーします。テストには APK ファイルが必要なので、このフラグは universalApk です。 両方のファイルが生成されます。このフラグを指定しなかった場合、.abb のみが返されます。 .

ステップ 5 – TWA 検証の設定

ビルドが完了すると、APK が取得されます。それを携帯電話に転送してテストしてください。アプリを開くと、ブラウザのアドレス バーが表示されます。これは、アプリと Web サイトの間に「信頼」がまだ設定されていないためです。今すぐ修正しましょう。

フロントエンド プロジェクトで、public に移動します。 フォルダーに、.well-known という名前の新しいフォルダーを作成します。 、その中に assetlinks.json というファイルを作成します。 .

frontend/
├── public/
 ├── .well-known/
 └── assetlinks.json

.well-known とは何ですか? フォルダ?

既知のフォルダーは、外部ソースが Web サイトの検証を見つけるために使用されるため、プロトコルの構成を定義するファイルを保存するために使用されます。この場合、アプリはウェブサイトの既知のフォルダーをチェックし、検証を検証します。

以下を assetlinks.json に貼り付けます。 :

[
 {
 "relation": ["delegate_permission/common.handle_all_urls"],
 "target": {
 "namespace": "android_app",
 "package_name": "chat.yourapp.twa",
 "sha256_cert_fingerprints": [
 "your_sha256_fingerprint"
 ]
 }
 }
]

delegate_permission/common.handle_all_urls とは ?

これは、ドメインではなくアプリからすべてのリンクを開く特別なフラグです。簡単に言えば、ディープリンクとして機能します。アプリをインストールした後、WhatsApp などからウェブサイトのリンクをクリックすると、ブラウザで開くのではなくアプリが開き、ディープリンクとして機能します。

package_name フィールドは packageId である必要があります これは、twa-manifest.json の Android ビルド フォルダーから取得できます。 .

さあ、指紋を採取してください。これを行うには、次のコマンドを実行します。

keytool -list -v -keystore android.keystore -alias android

エイリアス名は、作成した値である必要があります。このコマンドを入力すると、キー ストアのパスワードを要求されます。それを入力すると、SHA256 が表示されます。 指紋。それをコピーして assetslinks.json に貼り付けます。 sha256_cert_fingerprints 内のファイル 配列。次に、これらの変更を本番環境にプッシュします。デジタルアセットリンク

で検証を確認できます。

それです！これで、アプリをインストールしてテストできるようになりました。

ステップ 6 (オプション) – アプリ内エクスペリエンスをカスタマイズする

さらに、Web サイトとモバイル アプリで異なるコンテンツをユーザーに表示したい場合もあります。それはできますか？はい！

Android ビルド フォルダーの twa-manifest.json 内 、startUrl というフィールドがあります。 。そうでない場合は、それを追加し、値 "startUrl": "/?twa=true" を追加します。 。 startUrl がエントリーポイントです。値 twa=true のクエリ パラメータがあります。 .

bubblewrap build --universalApk を使用してビルドを再度実行します。 .

ここで、アプリを開くと、エントリ URL が yourwebsitedomain.com/?twa=true でアプリが開きます。 .

フロントエンド内:

const twaParam = queryParams.get("twa");
const [isTwa, setIsTwa] = useState<boolean>(() => {
 return localStorage.getItem("isTwa") === "true";
});
useEffect(() => {
 if (twaParam === "true") {
 localStorage.setItem("isTwa", "true"); // set the value to local storage
 setIsTwa(true);
 }
}, [twaParam]);

 {isTwa? (
 <Link to="/contact" className="underline hover:text-primary">
 Contact
 </Link> 
 ) : (
 <Link to="/download" className="underline hover:text-primary">
 Download App
 </Link>
 )}

上記のコードでは、twa=true をチェックします。 URLのクエリパラメータ。存在する場合は、その情報をローカル ストレージに保存し、条件付きでユーザーにコンテンツをレンダリングします。

それだけです。アプリを作成しました。

名前、色、スプラッシュ画面を変更したい場合は、twa-manifest.json で変更できます。 ビルドを再度実行します。

まとめ

Bubblewrap は Android 専用です。アプリでクロスプラットフォームをサポートしたい場合は、Capacitor などの他のプラットフォームもあります。これについては別の記事で書きます。

ちなみに、Bubblewrap を使用して作成したアプリは、こちらからご覧いただけます:Stranger Talk。

間違いや質問がある場合は、LinkedIn または Instagram で私にご連絡ください。

読んでいただきありがとうございます!

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう