Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

AngularのPWA(Progressive Web Apps)機能でアプリのようなWebページを作成

次世代Webアプリケーションフレームワーク「Angular」の活用 第16回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はe2e(End-to-End)テストの実行方法を説明しました。今回は、ネイティブアプリのような使い勝手のWebページを実現するPWA(Progressive Web Apps)に関するAngularの機能を紹介します。

目次

はじめに

 Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。

 PWA(Progressive Web Apps)は、まるでネイティブアプリのような使い勝手を提供するWebページです。Webページのアプリ名やアイコンを定義する「Web App Manifest」によって、Webページをネイティブアプリのように端末にインストールできるようになります。また、Webページと独立して動作するJavaScript「Service Worker」を利用して、オフライン時表示やプッシュ通知といったネイティブアプリのような機能を、Webページで利用できます。

 Angularでは、PWAの技術をWebページに導入できるツールやライブラリーが提供されます。本記事では、AngularでPWA対応のWebページを作成する方法を説明します。

対象読者

  • Web技術でスマホアプリを作成したいWeb技術者の方
  • アプリストア経由ではなく、広くアプリを配布したい方
  • キャッシュ機能など、Service Workerの機能を手軽に活用したい方

必要な環境

 Angularの開発ではTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)が利用されます。本記事のサンプルコードもTypeScriptで記述しています。

 今回は以下の環境で動作を確認しています。Webブラウザーは、PWA機能が動作確認しやすいGoogle Chromeを利用します。

  • Windows 10 64bit版
    • Angular 6.1.2
    • Angular CLI 6.1.4
    • Node.js v8.11.4 64bit版
    • Google Chrome 68.0.3440.106

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、独自定義した「npm run pwa」コマンドを実行して、ブラウザーで「http://localhost:8080」にアクセスします(詳細は後述)。

AngularプロジェクトをPWA対応させる方法

 Angular CLIのコマンドでプロジェクトをPWA対応させる方法を、以下で説明します。

ng addコマンドでPWA機能を追加

 プロジェクトを生成してPWA機能を追加するには、リスト1のコマンドを実行します。(1)でプロジェクトを生成後、(2)でそのフォルダーに移動して、(3)でPWA機能を追加します。「ng add」は、プロジェクトに特定機能を追加するコマンドです。

[リスト1]Angular CLIでプロジェクトを生成して実行するコマンド
ng new p001-default  # プロジェクトを生成 ...(1)
cd p001-default      # プロジェクトフォルダーに移動 ...(2)
ng add @angular/pwa  # PWA機能を追加 ...(3)

 (3)のコマンドを実行すると、Web App Manifestやアイコンのファイル、Service Workerの設定ファイルが追加されます。また、既存のファイルにも、PWAに対応した変更が行われます。

図1:「ng add」コマンドで追加・変更されたファイル(p001-default)
図1:「ng add」コマンドで追加・変更されたファイル(p001-default)

Webページをビルドして実行する環境を作成

 AngularのWebページを表示させる「ng serve」コマンドでWebページを表示すると、PWA機能が有効になりません。PWA機能を有効にするには、「ng build --prod」コマンドでプロジェクトのビルドを実行して、dist/<プロジェクト名>に生成されたWebページのファイル(図2)を、SSL対応のWebサーバーでホストします。ただし、自PC(localhost)のWebサーバーにホストする場合は、非SSLでもPWA機能が利用できます。

図2:「ng build --prod」のビルド処理で出力されたファイル(p001-default)
図2:「ng build --prod」のビルド処理で出力されたファイル(p001-default)

 本記事では、Node.jsのシンプルなWebサーバープログラム「http-server」で、ビルドされたWebページのファイルをホストするよう、プロジェクトを設定します。

 まず、リスト2のコマンドでhttp-serverをインストールします。「--save-dev」は、開発用のパッケージをインストールするオプションです。

[リスト2]http-serverをインストールするコマンド
npm install http-server --save-dev

 次に、package.jsonの「scripts」要素に、リスト3のように追記します。この定義によって、ビルドとWebサーバー起動を「npm run pwa」コマンドで行えるようになります。「npm run pwarun」コマンドを実行すると、ビルドは行わず、Webサーバー起動だけを行います。なお、「%npm_package_name%」は、コマンド実行時にプロジェクト名(package.jsonに定義された「name」の値)に置き換えられます。

[リスト3]ビルドとWebサーバーの起動を行うコマンドの定義(p001-default/package.json)
"scripts": {
(略)
  "pwa": "ng build --prod && npm run pwarun",
  "pwarun": "http-server dist/%npm_package_name%"
},

 「npm run pwa」コマンドを実行してビルドとWebサーバー起動を行ったあと、Webブラウザーで「http://localhost:8080」にアクセスすると、Webページを表示できます。

図3:「npm run pwa」コマンドでWebページをビルドして表示(p001-default)
図3:「npm run pwa」コマンドでWebページをビルドして表示(p001-default)

 以下では、「ng add」コマンドでAngularに追加される、Web App ManifestやService Workerについて説明していきます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5