朝日ネットの開発チームでサービスの企画やUIデザイン、HTML+CSSでの実装を主に担当している watanabeです。
今回技術テーマとしてwebページをネイティブアプリのように見せる「PWA(Progressive Web Apps)」を選択しました。
PWAで実現できることとして特に注目したのがプッシュ通知です。
今まで、ネイティブアプリでしか行えなかったプッシュ通知を「PC」でも「ブラウザ（PC・モバイル問わず）を起動していなくても」行えるようになるのです。
自サービスでどのようにユーザにリマインダや新着の通知を見せるかは長年悩んでおり、（メールだと埋もれてしまうことが多く、重要な情報を見逃してしまうこともある）そこで、プッシュ通知を候補として挙げ、そちらをwebページで受け取る仕組みを実装するのを目標にします。
まず、PWAとは何かを調べてみました。
PWAとは
上でも触れた、「webページをネイティブアプリのように見せる」技術ですがPWA化することで以下のような効果があります。
1)オフラインで動作ができる
必要なデータを予めキャッシュしておくことで電波のない場所でも動作が可能になります
2)動作が高速になる
キャッシュの更新が最低限のため無駄にデータを読み込み直すことがありません
3)アプリのホーム画面にアイコンが追加できる
PWA化しているwebページにアクセスするとブラウザの操作メニューに「ホーム画面に追加する」項目が追加され、ここから登録すると他のネイティブアプリと同様に「アプリ」としてショートカットが登録されます。
またアプリ一覧から起動した際に、ネイティブアプリのように「スプラッシュスクリーン」（起動時にアイコンとタイトルが表示されるもの）が表示されます。
4)アプリの審査が不要
実態はアプリではないので審査や申請に必要なアカウント・開発環境自体も不要です。
5)ブラウザが対応していれば、機種間の違いを意識しなくて良い
閲覧しているブラウザが対応していれば機種も問わず、動作確認も最低限に出来ます。
6)プッシュ通知が可能
上記でも触れましたが、ブラウザがバックグラウンドで動いている時でもプッシュ通知を受け取れます。
7)バックグラウンドでの同期が可能
バックグラウンドで通信可能なため、アプリ起動時に（手動で更新しなくても）最新のデータが常に入っている状態が実現できます。
どのようにPWA化するのか
完成されたwebページがあれば、そちらに下記のファイルを読み込ませ「HTTPS」に対応したサーバにアップロードするとPWAとしてwebページを動作させることが出来ます。（具体的なコードやどう配置するかは次回の記事で説明します。）
1)Service Worker(PWAで必要な処理を記述するJavaScriptファイル)
2)Manifest(PWAの仕様について記述するJSONファイル)
3)アイコン…ショートカットアイコン、プッシュ通知時のアイコンや起動画面で配置する画像
PWA化されたwebページの例
・Twitter Light
UIはアプリ版とほぼ同じ。そしてアプリと同様に通知がリアルタイムでプッシュ通知として届きました。
・Googleフォト
https://photos.google.com
UIがネイティブアプリのようになり、キャッシュしたページのオフラインでの閲覧も可能でした。
次回の記事では PWA化された webページを実際に作成してみようと思います。
参考文献）プログレッシブウェブアプリ PWA開発入門 (NextPublishing)
採用情報
朝日ネットでは新卒採用・キャリア採用を行っております。
