)は、ブラウザで動作するWebアプリケーションとネイティブアプリケーションの両方の特徴を兼ね揃えたアプリケーションです。ホーム画面にインストールすればすぐにアクセス出来るようになり、オフラインで一部機能が使えたり、プッシュ通知を受け取れたりと大変便利な技術です。開発側の視点で言えば、通常のWebアプリのノウハウで開発が可能で、かつストアへの登録が不要という手軽さも手伝って非常に多くのWebアプリがPWAに対応しています。プロダクト開発を支援しているスタートアップにおいても、多くの場面でPWAは活躍しています。Webアプリケーションのコードをほぼそのまま活用出来る点は大きな魅力であり、ユーザーの使い勝手向上はもちろん、さらにはアプリケーション自体の価値向上を図るために非常に頼もしい存在です。iOSのPWA対応の遅れしかし、iOSのPWAへの対応状況は芳しくありません。執筆当時から見て「昨年」です。今なお、iOSのPWA対応はAndroidと比較すると多くの点で不完全です。わたしたち開発者はどこが完全でないのかを知り、そして戦わなければなりません。この記事ではiOSでのPWA実装で陥りやすい落とし穴の共有と、その対応策について考えていきます。いう設定によりホーム画面に追加した時の挙動を制御できます。設定した場合はブックマークとして機能し、ホーム画面に設置されたアイコンをタップするとブラウザーで開かれます。)でなければなりません。選択すれば良いのですが、そこで新たな問題が発生します。ナビゲーションが使えない問題です。モードでナビゲーションが使えないスマートフォンのブラウザはジェスチャナビゲーションでコントロールができます。環境によっては他にも使える機能があるかもしれませんが、広く知られているのはこの3つですね。iOSのSafariでもこれらのジェスチャを使って快適にWebブラウジングすることができます。PWAでは、ジェスチャナビゲーションが使えません。画面はフルスクリーンビューなので通常のブラウザに備わっている「戻る」「進む」「更新」といったナビゲーションUIがありません。ページ内に実装されているUIを使う以外にページ遷移をする手段がないので、例えばアプリを使っていて予期せずエラー画面になってしまった場合、その画面に「ホームに戻る」ボタンなどが用意されていなければ立ち往生してしまうというわけです。モードを使う事で解消できるのですが、そうすると今度はプッシュ通知が利用出来なくなるという堂々巡りに陥ります。モードで起動させて、PWAで開かれている場合にはブラウザのUIを模したナビゲーションUIをHTMLで実装する、というあたりが現実的な落とし所ではないでしょうか。Webアプリである以上、URLをシェアしたいというニーズは当然あります。これも「戻る」ボタンなどと同様に自前で実装してやると良いでしょう。シェアの機能については専用のAPIが標準で備わっているので、これを利用すれば実現は容易です。データを共有できません。受け渡すことができないため、PWAで開いた際に再度ログインする必要があります。共有する事ができました。使った実装が有用そうです。別セッション扱いとなるため使えませんでしたが、これはAndroidも同様でした。クセがあり扱いづらいです。PWAと上手に付き合っていくためのTipsをいくつかここで紹介します。要素でリンクをはっておくことで、PWAとして登録出来るようになります。最初にロードされたものが優先されます。「どういうこと?」と思われるかもしれないので、コードで説明します。参照させたい」という要件があった場合にこの挙動を知らなければ貴重な時間をたっぷり溶かすことになるでしょう。これは「最初にロードされたもの」というところが肝なので、「最初にロード」させなければよいのです。要素の挿入であればうまくワークします。記述されていてはいけません。PWA環境の判別方法このようにクセのある環境ですから「iOSのPWAでのみ別の処理をさせたい」という場面もあるでしょう。そこで「PWA環境で実行されている」ことを判別する方法が知りたくなります。レガシーブラウザ対応を彷彿とさせますね。PWA環境下であることを知るためにはCSSのメディアクエリが有用です。指定することで、PWAで開かれているかどうかを判別することができます。*/}JavaScriptで判別したい場合も同様にメディアクエリを使います。駄目だということです。なってしまうからです。しなければなりません。してはいけないのです。おわりにWebの標準化が進み、レガシーブラウザ対応のPolyfillやCSSハックなど、特定環境で役立つ知識や技術の多くは過去のものとなりました。今なお端末の環境は多岐にわたり、それらをサポートするために開発者は様々な知見を常に蓄えていかなければなりません。これは今も昔も変わらず、Web技術が進化していくうえで欠かすことのできない流れです。iOSのPWAもいずれWeb標準に則るようになり、これらの知識は不要になるでしょう。その時はまた新たな課題に挑戦していることと思います。毎週「テックシェア」という時間を設け、メンバーそれぞれが案件などで得た知見を共有したり、質問・相談をし合う場として活用しています。支援しているプロダクトでそれぞれ発揮されていきます。いうチームの強さを支え、結果として開発支援するスタートアップの価値を高めていくのです。新規事業やサービス開発に取り組む、事業会社・スタートアップへの支援を行っています。アプリケーションのフロントエンド開発をリードするフロントエンドエンジニアを募集しています!さまざまなプロダクトやチームに関わりながら、一緒に成長を体験しませんか?もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。Hisashiフロントエンドエンジニア。モダンなJavaScript開発に関心があります。デザインからバックエンドまで網羅的にこなすマルチデザイナーとして長く活動してきた経験を活かして、これから関わる様々なものをデザインしていきたいです。チームもコミュニケーションもデザインするもの。ライフワークはピアノと水泳。