WebサイトをPWA(Progressive Web App)に変える簡単な手順(翻訳)

概要

原著者の許諾を得て翻訳・公開いたします。

Webサイトを簡単にPWA(Progressive Web App)に変える方法(翻訳)

Progressive Web Appって何?

PWAは基本的にWebサイトの一種で、モバイルでアクセスするときにユーザーのデバイスに保存可能で、ネイティブアプリと同じように振る舞います。読み込み画面を備えていて、ChromeのUIを非表示にでき、接続が切れてもコンテンツが表示されます。最大のメリットはユーザーのエンゲージメント(engagement)を促進することです。AndroidのChromeブラウザ(他のモバイル用ブラウザについてはわかりませんが)がそのWebサイトをPWAとして検出すると、アプリをユーザーの好みのアイコンでデバイスのホームスクリーンに保存するようダイアログで促します。

PWAが重要な理由

PWAはクライアント向けビジネスで有利です。中国版Amazonとも呼ばれるAlibabaは、ブラウザにWebサイトをインストールするよう促すダイアログを表示するとユーザーのエンゲージメント率が48%向上することに注目しました(引用元)。

このことから、PWAに取り組む価値は十分あります。

このメリットを可能にしたのは、静的アセット(HTML、CSS、JavaScript、JSONなど)をユーザーのシステムに保存できるService Workerと呼ばれる技術です。これは、インストールされたWebサイトの振る舞いを記述するmanifest.jsonに沿って行われます。

PWAの例

以下のサイトは、本記事で説明しているのと同じ技術を使って私が作成したものです。

その他についてはpwa.rocksで多数の例をご覧いただけます。

セットアップ

WebサイトのPWA化は一見大変そうですが(Service Workerって何よ?)、それほど難しくありません。

1. 必要なもの: HTTPS(HTTPではなく)

PWAの一番面倒な部分は、http://ではなくhttps://を使うセキュアなドメインでWebサイトを動作させることです。
手動のHTTPS化は非常に面倒ですが、自前のサーバーを使っていればletsencryptを使って実に簡単かつ自動的にHTTPS化できます。しかも無料です。

2. ツール

2.1 lighthouse test

  • lighthouse testはGoogleが開発およびメンテナンスしている自動化テストサイトであり、Progressive、Performance、Accessibilityの3つの尺度に基いてWebサイトをテストします。各項目の点数はパーセントで表示され、それぞれ解決方法も示してくれます。

didiermotte.beをLighthouse testにかけた結果

2.2 realfavicongenerator.net

realfavicongenerator.netはPWAの表示レイヤの面倒を見てくれます。上述のmanifest.jsonファイルを生成し、Webサイトをモバイルデバイスに保存するときに必要な全バージョンのアイコンや、ページの<head>タグに追加するHTMLスニペットも生成してくれます。

注意: このサイトはアセットをサブフォルダに置くことを勧めますが、この方法だとPWA化が非常に面倒になります。作業を軽減するには、すべての画像やmanifestファイルをWebサイトのルートフォルダに置きます。

2.3 upup.jsでサービスワーカーを使う

Service WorkerはJavaScriptの技術です。私の頭では理解するのがつらいのですが、ありがたいことにとある賢いドイツ人女性が教えてくれたTal Atler氏(「オフライン優先」哲学を推進しています)が作成してくれたあるJavaScriptライブラリは、überへの接続が切れたときにもうまく振る舞えるようにしてくれます。Ola Gasidloさん、ダンケシェーン!

UpUpチュートリアルでさっと学ぶだけですぐ使えるようになります。

3. 手順

  1. RealfavicongeneratorでHTMLと画像のコードを生成し、自分のWebサイトに追加する
  2. HTTPSドメインを公開する
  3. lighthouse testを実行する
  4. 結果を分析する
  5. 問題をひとつずつ修正する
  6. 手順3.に戻って繰り返す
  7. どの項目もほぼ100点になるまで繰り返す: Progressiveは100点を目指す
  8. モバイルで実際の動作をテストする: うまくいけばAndroidで以下のようなポップアップが画面下部に表示され、Webサイトをモバイルのホームスクリーンに保存するよう促す

もっと知りたい方へ

必要なPWAの情報は以下の本にすべて盛り込まれています。

PWAで幸せになりましょう!

関連記事

CSS GridがBootstrapよりレイアウト作成に向いている理由(翻訳)

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

関連する記事

BPSアドベントカレンダー

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ