はじめまして。2018年度新卒のYIです。よろしくお願いします。
入社してから半年が過ぎ、仕事にも大分慣れてきました。
今回は、プロジェクトに配属されてから初めて調査を依頼された「PWA」についてまとめたいと思います。
はじめに
約4ヶ月間の研修を終えて、プロジェクトに配属されました。
配属されてすぐの間は、チームでの開発に慣れるために小さなバグの修正をいくつかこなしました。
そしてチームでの開発に慣れてきた頃に「PWA」について調査してほしいという依頼を受けました。
調査の依頼を受けた私は、PWAではどんなことができるのか、そしてスワイプで前のページに戻れないという問題を解決した上でiPhone（iOS）でPWAを実装する方法はないかについて調べました。
PWAについて
PWAとは
PWA（Progressive Web Apps）は、モバイルユーザのUX向上を目的とした、モバイルサイト向けWebサイトをネイティブアプリのように使える仕組みのことです。
PWAには、 ページの読み込み・表示速度が速い、プッシュ通知の受信可能、オフラインで動作可能など様々なメリットがあります。
私が配属されたプロジェクトは、モバイルサイト向けのサービスの開発・運営をしています。
ですので、PWAについては以前から関心が高かったようです。
しかし、私が調査を依頼された段階ではAndroidにのみPWAが実装されており、iPhoneには実装されていませんでした。
理由は、iOSのPWAはスワイプで前のページに戻れないという問題があるためでした。
iOSでPWAを実装する
PWAについて調査した結果、スワイプで前のページに戻れない という問題を解決した上でiOSでPWAを実装する方法を見つけました。
PWAを実装するためには、マニフェストファイルを読み込ませる必要があります。
マニフェストファイルを使用することで、ユーザが起動できる対象や起動時の外観などを指定することができます。
マニフェストファイルで設定することができる項目には、下記のようなものがあります。
short_name: ユーザのホーム画面で表示されるテキスト
name: ウェブアプリのインストールバナーに表示されるテキスト
start_url: 起動時のURL
icons: ホーム画面にサイトを追加した際にブラウザが使用するアイコンのセット
display: 起動時のスタイル
displayでは画面の表示スタイルを設定できます。
displayには次の4種類があります。
| display | 表示スタイル |
|---|---|
| fullscreen | 動画やゲームで使われるようなフルスクリーン |
| standalone | ステータスバーやナビゲーションバーは表示されるが、ブラウザのUIは表示されない |
| minimal-ui | standaloneに最低限のUIが追加される（追加されるUIはブラウザによって異なる） |
| browser | Webアプリ扱いせずにブラウザで表示する |
displayをbrowserに指定することでスワイプで前のページに戻ることが可能になりました。
iOSはdisplayをbrowserに指定することで問題が解決しましたが、Androidはbrowserにする必要がありません。
Androidの場合は、browserよりもネイティブアプリの見た目に近くなるstandaloneにした方がPWAのメリットを活かせます。
そこで、私は次のようにマニフェストファイルを出し分けするように実装しました。
<% if browser.platform.android? %> <link rel="manifest" href="/android-manifest.json"> <% elsif browser.platform.ios? %> <link rel="manifest" href="/ios-manifest.json"> <% end %>
上記のように実装することで、Androidではstandaloneに、iOSではbrowserに指定したマニフェストファイルを読み込ませることに成功しました。
まとめ
私はチームメンバーにPWAの調査結果を報告し、問題を解決した上でiOSでPWAを実装する方法を提案しました。
提案した実装方法をチームメンバーに受け入れていただき、実装を任されました。
この経験は、積極的に自分の考えを伝えていきたいと思うようになるきっかけになりました。
その後も新しいことにチャレンジする機会がたくさんありました。
新卒の私に任せていいのだろうか、という不安な仕事を担当することもありましたが、先輩方のサポートのおかげで一つ一つこなしていくことができました。
そのおかげで色々な技術を学ぶことができました。
これからも積極的に新しいことにチャレンジし、技術や知識を身につけてエンジニアとして成長していきたいと思います。
