超高速！流行りのPWA(プログレッシブ ウェブアプリ)を開発してみよう。 ｜ SiTest (サイテスト) ブログ

ここ最近、Web業界のトレンドの変化が激しいですね！
日々、新しい技術がでている気がします。

来年のトレンドになりえるPWA(プログレッシブ ウェブアプリ)を
開発していくための簡単な手順を見ていきましょう。

PWA(プログレッシブ ウェブアプリ)は開発者カンファレンス「Google I/O」でクローズアップされた注目の技術です。
ざっくり説明すると、ネイティブアプリとウェブサイトをいいとこどりしたWEBアプリケーションです。

ネイティブアプリのプッシュ通知やアプリ感覚性をWEBアプリにとりいれることにより、インストール不要なブラウザで動くネイティブアプリ(のようなWEBアプリ)が実現できます。

心地よいネイティブアプリのUIをインストールせず、触れるとなるとメリットですよね。
(しかも気に入れば、インストールすることもできます。)

もう一つ、大きなメリットがPWA(プログレッシブ ウェブアプリ)にはあります。

ネットワーク接続に依存しません。
キャッシュをとることにより、オフラインやネット環境が良くない場所でも高速で動作させることができます。

ServiceWorkerやFirebase, AMP(アンプ)等、
プログレッシブウェブアプリの周辺の技術もご紹介したかったのですが、
今回は、Google Developersの「はじめてのプログレッシブ ウェブアプリ」を参考に開発していきましょう。

詳しくは、「はじめてのプログレッシブ ウェブアプリ
」に記載されておりますが、手っ取り早く開発していきたい人向けで書いていきます。

サンプルコードのダウンロード

Google Developersの「はじめてのプログレッシブ ウェブアプリ」で
お天気ウェブアプリのサンプルコード(.zip)が提供されていますので、まずこちらをダウンロードしてください。

サンプルコード

[pwa-weather] ディレクトリがダウンロードされます。

AppShell を 構築する

AppShellとは、PWA(プログレッシブ ウェブアプリ)のアーキテクチャです。
こちらのアーキテクチャが、PWA(プログレッシブ ウェブアプリ)にネイティブアプリのような特性を持たせています。
では、実装していきましょう。

先程、ダウンロードしたサンプルコードから、
[pwa-weather/step-02/index.html]
を探しだして、開いてください。

※MAMPなどでローカル環境をたて、[pwa-weather/step-02/index.html]ファイルが
ブラウザに表示されるのを確認していてください。

するとこのようなコードになっていますので、

を下記のように置き換えてください。

<link rel="stylesheet" type="text/css" href="styles/inline.css">

ブラウザを更新すると、デザインが適応されていると思います。

次は JavaScript ブートコードを埋めていきます。

1.[pwa-weather/step-03/scripts/app.js]を、
[pwa-weather/step-02/scripts/]の直下にコピーしてください。

2.[pwa-weather/step-02/index.html]内のコードを確認してください。

を下記のように書き換えてください。

<script src="/scripts/app.js"></script>

3.2と同ファイルの

<!-- Insert forecast-card.html here -->

に[pwa-weather/resouces/step3/farecast-card.html]のコードを丸ごと置き換えてください。

4.引き続き、2と同ファイルの

<!-- Insert add-new-city-dialog.html here -->

に[pwa-weather/resouces/step3/add-new-city-dialog.html]のコードを丸ごと置き換えてください。

そして、ブラウザを更新してみてください。

お天気ウェブアプリができあがっていますね。

いかがでしたでしょうか？

PWA(プログレッシブウェブアプリ)をご紹介しました。

今回、ご紹介したチュートリアルの他にも、

• ・ 最初の読み込みを高速に行えるようにする
• ・ Service Worker を使って App Shell を事前キャッシュする
• ・ Service Worker を使ってアプリケーション データをキャッシュする

といったチュートリアルが日本語で提供されていますので、実践してみてくださいね。