モバイルアプリ（PWA）
「モバイルアプリ（PWA）」アドオンは、ECサイトをプログレッシブウェブアプリ（PWA）として、お客様の端末にインストールできるようにする機能です。PWAは、見た目も操作もスマートフォンのアプリのように使えるウェブサイトで、ホーム画面のアイコンから開けます。アプリストアへの公開は不要で、お客様はブラウザがあればインストールでき、対応バージョンはCS-Cart 4.20.1以降です。
公式マニュアルでは、このアドオンはCS-Cart Store Builder UltimateとMulti-Vendor Plusで利用できるとされています。
PWAには、次のような特長があります。
- アドオンを有効にして、いくつかの項目を設定するだけで公開できる。
- ECサイトとほぼ同じ見た目で表示され、ほかのアドオン（他社製を含む）もそのまま動く。
- ECサイトごとに設定できる。
- 検索エンジンからも見つけやすく、データ通信量が少ない。
スマートフォンからの注文が多いECサイトでは、ホーム画面にアイコンを置いてもらうことで、再訪問のきっかけを作りやすくなります。
このページでは、以下の内容を説明します。
- PWAとネイティブアプリの違い
- アドオンの確認と設定画面の開き方
- 基本設定
- PWAを公開する
- お客様の端末へのインストール
- 複数のECサイトでPWAを使う場合
PWAとネイティブアプリの違い
CS-Cartには、PWAのほかに、Android・iOS向けのネイティブアプリを作る「モバイルアプリケーション（ネイティブ）」アドオンもあります。ネイティブアプリは、アプリストアで配布し、端末の機能と深く連携できるのが特長です。
- PWA（このページ）：軽く、短期間で用意して公開したい場合に向いています。
- ネイティブアプリ：端末の機能と完全に連携させたい場合に向いています。
アドオンの確認と設定画面の開き方
管理画面の左メニューから「アドオン > ダウンロードしたアドオン」をクリック。
一覧から「モバイルアプリ（PWA）」を探し、状態が「有効」になっていることを確認してください。インストールされていない場合は、「インストール」ボタンでインストールします。すぐ上の行の「モバイルアプリケーション（ネイティブ）」は、別のアドオンです。
「モバイルアプリ（PWA）」のアドオン名をクリックして、設定画面を開きます。
基本設定
設定画面に、「一般」「基本設定」「インフォメーション」のタブが表示されます。「基本設定」タブをクリックします。
- 公開：「ON」にすると、ECサイトを訪れたお客様がPWAをインストールできるようになります。アプリ名とアイコンを用意してから「ON」にしてください。
- アプリ名：お客様の端末に表示されるアプリの名前。12文字以内がお勧めです。ホーム画面のアイコンの下に表示されるため、長い店名は「サンプル雑貨」のように短くしておくと途中で切れずに表示されます。
- アプリアイコン：アプリをインストールしたときに、お客様の端末に表示されるアイコン。512×512ピクセルの正方形で、背景が透明でないPNG画像を使用してください。「ローカル」（パソコンのファイル）、「サーバー」（サーバー上のファイル）、「URL」から画像を選べます。
設定が終わったら、右上の「保存」ボタンをクリックします。
PWAを公開する
アプリ名とアイコンを設定したら、「基本設定」タブの「公開」を「ON」にして、右上の「保存」ボタンをクリックします。
注意：公開した後に設定を変更しても、すでにインストールしたお客様のアプリには反映されません。たとえば、アイコンを変更すると、新しくインストールしたお客様にだけ新しいアイコンが表示されます。前からインストールしているお客様が新しい設定を使うには、アプリの入れ直しが必要です。アイコンとアプリ名は、公開前に十分確認しておくことをお勧めします。
「公開」を「OFF」に戻しても、インストール済みのアプリはそのまま使えます。「OFF」で止まるのは、新しいインストールだけです。
一般に、PWAはHTTPS（SSL）で表示されるサイトで動作します。ECサイトをSSLに対応させてから公開してください。
お客様の端末へのインストール
PWAを公開すると、お客様は次の方法でアプリをインストールできます。
パソコン
PWAを公開すると、ブラウザにインストールを勧めるアイコンやポップアップが表示されます。「インストール」をクリックすると、アプリとして使えるようになります。
表示されない場合は、ブラウザのメニューから手動でインストールできます。
- Google Chrome：右上の「︙」から「保存して共有」>「アプリをインストール」。
- Microsoft Edge：右上の「…」から「その他のツール」>「アプリ」>「アプリをインストール」。
- Mozilla Firefox：PWAのインストールには対応していません。
スマートフォン
- iPhone（Safari）：インストールを勧める表示は出ません。ECサイトを開き、「共有」ボタン（四角から矢印が出たアイコン）をタップして、「ホーム画面に追加」を選びます。iPhoneのほかのブラウザでも、手順はほぼ同じです。
- Android（Google Chrome）：インストールを勧めるポップアップを表示するかどうかは、Chromeがお客様の利用状況から判断します。表示されない場合は、ブラウザのメニューから「ホーム画面に追加」を選び、「インストール」をタップします。
- Firefox（スマートフォン）：PWAのインストールには対応していません。
公式マニュアルでは、Android版Chromeでポップアップが表示される目安として、以下が挙げられています。
- 別々の日に2回以上（間を1日以上空けて）訪問している。滞在時間が短いと、3回以上必要なこともある。
- 30秒以上、サイトを操作している。
- クリック・ページの移動・スクロールなどの操作をしている。
- 初めて訪問した日から24時間以上たっている。
- ポップアップを閉じると、90日間は表示されない。
このように、お客様が自分でインストール方法に気付かないことも多いため、「アプリでかんたんお買い物」のような案内ページを作り、iPhone・Androidそれぞれの手順を載せておくと利用が広がりやすくなります。
複数のECサイトでPWAを使う場合
複数のECサイトを運営している場合は、設定するECサイトを選んでから、ECサイトごとにPWAを設定できます。
PWAを使うECサイトには、サブドメイン（例：shop.example.com）か、別のドメインを割り当てることをお勧めします。サブドメインや別ドメインであれば、通常どおりPWAが作成されるためです。サブディレクトリ（例：example.com/shop/）でもPWAは作成されますが、同じドメインにすでにPWAがあるため、技術的な問題が起きる場合があります。
ECサイトの見た目については、テーマをご覧ください。