設定方法

このドキュメントは作業中です。リリース前の情報であり、変更される可能性があります。

このページでは、サンプルアプリケーションをローカルにビルドして実行するために必要な手順について説明します。

前提条件

アプリケーションはHTMLを書くための小さなライブラリであるWebコンポーネント、JavaScript文字列リテラルを持つテンプレートlit-html、またその上に構築された小さなWebコンポーネント基本クラスであるlit-elementを使用します。

このアプリはいくつかのnpmパッケージに依存していてます。次の手順に進む前に、node.jsnpmが既にインストールされていることを確認してください。既に nodeがインストールされている場合は、最新のバージョンを使用していることを確認してください。v8.0.0以上を使用することをお勧めします。

新しいアプリを作成する

デフォルトの pwa-starter-kitテンプレートを使用する新しいアプリケーションを作成するには:

git clone --depth 1 https://github.com/Polymer/pwa-starter-kit my-app
cd my-app

これは、 現在のディレクトリにmy-app初期プロジェクトを生成します。これはおおよそ次のようになります:

my-app
├── images
|   └── ...
├── src
|   └── ...
├── test
|   └── ...
├── index.html
├── README.md
├── package.json
├── polymer.json
├── manifest.json
├── service-worker.js
├── sw-precache-config.js
├── ... (misc project config files)

各ファイルの使用方法の詳細については、ディレクトリ構造のページをご覧ください。

他のテンプレート

他のテンプレートにリストされている他のテンプレートのいずれかに基づいて新しいアプリケーションを作成するには、 pwa-starter-kitリポジトリから該当のブランチをクローンして使用します:

git clone --depth 1 -b <template-name> --single-branch https://github.com/Polymer/pwa-starter-kit my-app

たとえば、Typescriptテンプレートから開始するには (template-typescript):

git clone --depth 1 -b template-typescript --single-branch https://github.com/Polymer/pwa-starter-kit my-app

依存関係のインストール

プロジェクトの依存関係をインストールするには、

npm install

これでもう今すぐアプリを実行して、見る準備が整いました!

開発モードでアプリケーションを実行する

アプリをローカルで実行するには、

npm start

これはポート8081でローカルサーバを起動します。http://localhost:8081を開き、ブラウザでアプリケーションを表示します。このサーバーは、アプリケーションを変更している間も実行を続けることができ、ブラウザのタブを更新して表示を更新します。

8080ポートが既にコンピュータ上で使用されている場合、またはデフォルトのホスト名を変更する必要がある場合(たとえば、Dockerコンテナを使用しているため)、コマンドライン引数を使用してポートを設定できます:

npm start -- --hostname 0.0.0.0 --port 4444

テストを実行する

テストの詳細については、Application testingのページを参照してください。テストをすぐに実行するには、

npm run test

使用可能なスクリプト

アプリのルートディレクトリで:

スクリプトの完全なリストは、package.jsonファイルにあります。

ブラウザサポート

pwa-starter-kitはすべてのブラウザでネイティブにサポートされていない、かなり最近のブラウザAPIを使用します。これを回避するために、アプリはポリフィルを使用し、足りないWebプラットフォームの機能をいくつかのブラウザに追加するだけでなく、新しいJavaScript機能をサポートしていないブラウザに新しいJavaScript機能を追加する必要があります(例えばIE11などのブラウザ用のES6からES5変換や動的モジュールのインポート)。詳細については、ブラウザサポートのページをご覧ください。

次のステップ

これで、アプリの基本的な操作が完了したので、次のステップを確認してください: