PWA設定

Update: 2023/12/15

PWA設定

PWA設定では、PWA化に必要な機能を追加実装できます。本項目によってアプリのように見せる機能を充実化できます。

※iOSでWEBプッシュ通知を適用するために必須の機能となります。iOS適用の一連の流れはこちら。

  1. 管理画面トップのサイドメニューの [PWA設定] をクリックします。
  2. PWAマニフェストを生成するため、各項目を入力します。
    （画像をクリックするとポップアップ表示されます。）

項目名 説明 Android iOS
プロジェクトURL WEBサイトURL。
PUSHONE実装中のURLが自動的に入力される。
変更不可。
アプリ名 ホーム画面追加時に
表示される名称。
※Androidのみ対象。
※iOSは「アプリ名（アイコン）」が
表示される。		 Androidアプリアイコン画像 iOSアプリアイコン画像
アプリ名
(アイコン)		 ホーム画面追加アイコンに表示される名称。
8文字以下推奨。		 Androidアプリアイコン画像 iOSアプリアイコン画像
スタート
ページ		 PWA起動時にアクセスする
最初のページ。
希望のページURLの絶対パスを
指定する。
※パラメータは反映済みだが、
冒頭に該当サイトのURLの
入力が必要となる。

■トップページを指定するケース
・事例1
https://webpush.jp/?utm_source=pwa

■トップページ以外を指定するケース
・事例1
該当ドメイン/mypage/?utm_source=pwa
・事例2
https://webpush.jp/lock-screen-ads/?utm_source=pwa 		iOSスタートページ画像
アプリ説明 ホーム画面追加時に表示される説明。
※一部のAndroidのみ対象
テーマカラー PWA閲覧時のステータスバーの色。 Androidテーマカラー iOSテーマカラー
背景カラー PWA起動時のスプラッシュ画面の背景色。
アイコンのカラーに合わせると背景カラーと一体化し、自然なスプラッシュ画面を表現できる。
※右図は背景カラーの領域がわかりやすいよう異なる色合い、グレーに設定。 		Android背景カラー
アイコン PWAアイコンの画像。
デフォルトではステータスアイコンに設定されている画像が自動的に登録される。
任意の画像を設定することも可能。		 Androidアイコン iOSアイコン
  1. 各項目の入力完了後 マニフェストを作成 をクリックします。

  1. 生成されたマニフェストスクリプトをWEBサイトの＜head＞領域に記載します。 GTMなどタグ管理ツールは利用できません。ファイルに直接書き込んでください。