PWA非対応のWebアプリを無理やりPWAにできないか試してみたが無理でした😇
背景
純金積立を田中貴金属工業様でおこなっていて、積立額を見てニヤニヤするのが趣味で、田中貴金属のサイトをショートカットにしています。
ただ開いてみると画像のように検索バーや他のタブなどがあり、サイト感が拭いきれないので、ネイティブアプリっぽい見た目にしようと思い立ちました。
先に言っておきますが、以下の方法ではこちら側からPWAにすることができませんでしたmm
ただあくまで田中貴金属工業のサイトではダメだったという話です。
PWA
PWAはプログレッシブウェブアプリの略で、Webアプリを書くプラットフォーム専用のアプリっぽく使えるようにするものです。以下のようなことが実現できます。
- ホーム画面への追加・アプリのような起動
- オフライン対応
- プッシュ通知
- 自動更新などの機能
- HTTPS環境での配信
これらの細かい設定をmanifest.json
にまとめて、htmlで以下のように追加することで適応することができます。
<link rel="manifest" href="./manifest.json">
PWAをラップ
PWAの設定をうまくねじ込めばうまく行くと思ったので、自前でPWAに対応させたHTMLを作成し、PWAが非対応のWebアプリをiFrameで呼び出してPWAをラップしてやってみた。
今回はプッシュ通知のようなリッチな機能は不要で、ただ単純にアドレスバーとかその他のタブなどを消したいのでmanifest.json
を以下のように設定した。
{
"name": "PWA Wrapper",
"short_name": "PWAWrap",
"start_url": "/index.html",
"display": "fullscreen"
}
display
をfullscreen
にすることで利用可能な画面の領域をすべて使用するような設定となる。
HTMLのiFrame
にhttps://member.tt.tanaka.jp/login
を呼び出すようにしていざアクセス!
が、うーん...https://member.tt.tanaka.jpで拒否られている🤔
Networkタブで確認してみるとhttps://member.tt.tanaka.jp/login
から
https://member.tt.tanaka.jp/faces/JY0501/JY050110.xhtml
にリダイレクトされた際にx-frame-options
がDENY
にセットされていました。
X-Frame-Options
はブラウザがページを<frame>
,<iFrame>
の中に表示することを許可するかどうかを示すレスポンスヘッダーで田中貴金属工業のサイトではDENY
であり許可されていないことが判明😭
サイト側から許可されていないのでクライアント側でできることは何もないです。無念...
終わりに
暇つぶしにできないかふと試してみたのですが、結果ダメでしたね。ただ、X-Frame-Options
というレスポンスヘッダーを知る良いきっかけになりました。
逆に言えばX-Frame-Options
で許可されていれば今回の方法が適応できるってことです。(他に問題が出てこなければ)
また、田中貴金属工業のサイトはWebではダメだったという話で、シンプルにiOSのネイティブアプリのWebViewでサイトを呼び出せばうまく行くかもしれません。気が向いたら試してみます。
Discussion