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

メニューボタン閉じるボタン

超高速!流行りのPWA(プログレッシブ ウェブアプリ)を開発してみよう。

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

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

そもそもPWA(プログレッシブ ウェブアプリ)とは?

pwa_top

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

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

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

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

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

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

PWA(プログレッシブ ウェブアプリ)を開発しよう!

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

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

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

サンプルコード

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

AppShell を 構築する

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

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

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

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

pwa_1

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

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

pwa_2

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

次は 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>

pwa_3

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_4

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

まとめ

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

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

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

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

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

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する