😇

PWA非対応のWebアプリを無理やりPWAにできないか試してみたが無理でした😇

2025/01/26に公開

背景

純金積立を田中貴金属工業様でおこなっていて、積立額を見てニヤニヤするのが趣味で、田中貴金属のサイトをショートカットにしています。
ただ開いてみると画像のように検索バーや他のタブなどがあり、サイト感が拭いきれないので、ネイティブアプリっぽい見た目にしようと思い立ちました。

先に言っておきますが、以下の方法ではこちら側からPWAにすることができませんでしたmm
ただあくまで田中貴金属工業のサイトではダメだったという話です。

PWA

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps

PWAはプログレッシブウェブアプリの略で、Webアプリを書くプラットフォーム専用のアプリっぽく使えるようにするものです。以下のようなことが実現できます。

  • ホーム画面への追加・アプリのような起動
  • オフライン対応
  • プッシュ通知
  • 自動更新などの機能
  • HTTPS環境での配信

これらの細かい設定をmanifest.jsonにまとめて、htmlで以下のように追加することで適応することができます。

<link rel="manifest" href="./manifest.json">

PWAをラップ

PWAの設定をうまくねじ込めばうまく行くと思ったので、自前でPWAに対応させたHTMLを作成し、PWAが非対応のWebアプリをiFrameで呼び出してPWAをラップしてやってみた。
今回はプッシュ通知のようなリッチな機能は不要で、ただ単純にアドレスバーとかその他のタブなどを消したいのでmanifest.jsonを以下のように設定した。

manifest.json
{
  "name": "PWA Wrapper",
  "short_name": "PWAWrap",
  "start_url": "/index.html",
  "display": "fullscreen"
}

displayfullscreenにすることで利用可能な画面の領域をすべて使用するような設定となる。
https://developer.mozilla.org/ja/docs/Web/Manifest/display

HTMLのiFramehttps://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-optionsDENYにセットされていました。

X-Frame-Optionsはブラウザがページを<frame>,<iFrame>の中に表示することを許可するかどうかを示すレスポンスヘッダーで田中貴金属工業のサイトではDENYであり許可されていないことが判明😭
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options

サイト側から許可されていないのでクライアント側でできることは何もないです。無念...

終わりに

暇つぶしにできないかふと試してみたのですが、結果ダメでしたね。ただ、X-Frame-Optionsというレスポンスヘッダーを知る良いきっかけになりました。
逆に言えばX-Frame-Optionsで許可されていれば今回の方法が適応できるってことです。(他に問題が出てこなければ)
また、田中貴金属工業のサイトはWebではダメだったという話で、シンプルにiOSのネイティブアプリのWebViewでサイトを呼び出せばうまく行くかもしれません。気が向いたら試してみます。

Discussion