3分でWebサイトを PWA としてアプリ化させてみる

最近 PWA って言葉をよく聞きます。

PWAはこの略 ⇒ 「Progressive Web Apps(プログレッシブ ウェブ アプリ)

なんか長ったらしい名前だけど、普通のサイトをアプリ化できるってことです。

  • ホーム画面にアイコンも作れるし、
  • アドレスバーも隠せるし、
  • プッシュ通知とかも送信できるし、、、

こんなのが普通のWebサイトで使えるなんて・・・一昔前は信じられなかったです。

僕も少し興味があったので、実際にあるWebサイトをPWA化してみました

同じようにPWA化したい人のために、
ここではWebサービス・サイトをPWA化する手順をまとめてみます。

手順1.manifest.jsonを作成する

PWA化で絶対にやらないといけないこと

それが manifest.json の作成

いわゆるマニフェストファイルというやつで、
この名前のファイルをWebサイトのルートディレクトリに作成 します。

 

▼ 内容はたとえばこういう感じ(最小構成)

このJSON内のプロパティについては次の通り

  • name
    PWA化したいWEBサイト・サービスの名前。
  • short_name
    PWA化したいサイト・サービスの省略名
  • description
    どういう内容のサービスなのか一応書いておく。この内容がどこに表示されるかは不明
  • start_url
    ホーム画面のアイコンをクリックしたときなどに最初に開くURL。この例の ?pwa=1 みたいにPWA専用のパラメーターを設定しておくといいかも
  • display
    この値に "standalone" を指定するとネイティブアプリのような見た目になる。他にも "full_screen" , "minimal-ui" 、"browser" が指定できる
  • icons
    アイコンは 192x192 と 256x256 のサイズを用意しておけばいいらしい。あまり必要ないけど 512x512 も含めることも可能

最低限 manifest.json で必要なのが、これらの情報

作成したら サイトの一番上のディレクトリ にそのままアップしちゃえばOKです。

手順2.manifest.jsonを全ページで読み込みする

次はWebサイトのheadタグで manifest.json を読み込み

これは必ず head タグ内で読み込まないといけません。

▼ 全ページで読み込みさせておく

linkタグから rel="manifest"  を指定してマニフェストファイルを読み込み

PWA化で必ずしておくべき作業です。

手順3.サービスワーカーの作成

お次はサービスワーカー(Service Worker)の作成

これはバックグランドで動くスクリプトを制御するためのモノで、
これがあるから 次みたいなネィティブアプリ的な機能 が使えるようになります。

  • オフラインでのページ表示
  • 通知バーへのプッシュ通知
  • バックグラウンド同期

ホーム画面にアイコンが作れるだけが PWA じゃありません。

 

まあサービスワーカーの名前はなんでもいいんですが、
ここでは service-worker.js という名前で作ってみることにします。

▼ その内容がコチラ

これが最低限 PWA を動かすための最小構成(最後の行は必ず必要)

この内容で保存したら、service-worker.js をルートディレクトリに配置 しておきます。

つまり manidest.json と同じ場所でOKってことです。

手順4.ページ内でサービスワーカを登録する

最後はサービスワーカー(Service Worker)の登録

PWA化したい全ページで service-worker.js を読み込みします

この処理を書いておかないとPWAとして機能しないので大事です。

 

▼ その具体的なコード例は以下の通り

書く場所は head タグ内のどこかでイイと思います。

 

ただし・・・1つ気を付けないといけない点

それは Service Worker が全ブラウザに対応してないこと

▼ 詳しい対応状況は Can I Use を参照

当然のように IE は全バージョンで未対応。
あと Opera Mini とかモバイルブラウザの一部バージョンも未対応です。

でもChrome 、 FireFox 、その他モダンブラウザはほぼ対応してます

なので、そこまで対応状況を心配する必要ないかも

ラスト.Chrome開発者ツールでPWA化したか確認する

最後に Chrome開発者ツールで無事PWA化したか確認してみます。

その手順は次みたいな感じ

 

まず F12 キーを押して開発者ツールオープン

そのあと 【Application】 タブを開き、【Manifest】をクリック

まず開発者ツールを開いて、【Application】タブを開き、【Manifest】をクリック

 

そして 【Manifest】 のところで何かエラーが出てないかチェック

もし何もエラーが出てないならPWA化成功!

スマホからアクセスしたとき、ホーム画面にアイコン追加できるようになります。

ここまでかかった時間は3分とまでいかないけど、10分もかからないくらい

手軽にサクッとアプリ化できるのが PWA を使う利点ですね。

ここまでのPWA化手順まとめ

簡単に箇条書きすると、こんな感じ

  1. manifest.jsonを作成してルートに配置
  2. manifest.jsonを全ページで読み込み
  3. サービスワーカー(Service Worker)作成
  4. サービスワーカー(Service Worker)登録
  5. 開発者ツールなどで動作確認

PWAは難しそうと(勝手に)思ってたけど、そんなこと全然なかったです。

良く分からなくても、気になったら挑戦するのって大事ですね。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください