ふゆにどっこい

PWAを使ってこのサイトをアプリっぽくする

なんか最近よく聞くPWAさん。
聞いてる内に1ミリだけ興味が湧いたので、一番簡単な「スマホのホーム画面に追加」機能を実装してみる

必要なものとか

・192 × 192のpngアイコン
・manifest.json
・servise worker
・サーバにあれやこれやファイルをアップロードする権限(なければサーバ管理者におねだりしてみて(‘ω’))

下準備

まずはpngアイコンの設置。
ツールは別になんでも構いませんが手元で192 × 192のPNG形式のアイコンを作成。
まあファビコンに設定している画像を使う人がほとんどだと思いますがそんなのねーよ!!って人は以下の画像を使って試してみてちょ

完成したら次はサーバにアップロード。scpでもなんでもいいので画像をサーバにアップロードしたらおk。
Permission deniedと言われたらそれはscpした際のユーザが指定したフォルダへのアップロード等の権限がないからだと思います。

manifest.jsonについて

画像ファイルの設置は完了したので次はmanifest.jsonの作成。
このサイトだとこんな感じ、値は適宜変更してくださいな〜〜

{
  "name": "ふゆにどっこい",
  "short_name": "ふゆにどっこい",
  "description": "田舎暮らしを夢見る誰かさんのメモ帳",
  "start_url": "/?utm_source=home-screen&utm_medium=pwa",
  "display": "standalone",
  "theme_color": "#161825",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "pwa-images/192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

このファイルはドメインのルートに設置。

続いてWordPressの管理画面の「テーマを編集」からheader.phpもしくはhead.php内に以下のコードを追加します。
headタグ内に記述すればおkです

<link rel="manifest" href="/manifest.json">

なんてことはないmanifest.jsonを呼び出しているだけの処理ですがこれがないと動かないので大人しく書いておきましょう。

Service Worker

ユーザが目にするWebページの裏側で実行されるスクリプトのことです。詳しくはgoogleのService Worker とはから

これらを利用するにはとりあえずService Workerを登録する必要があるので、登録処理を行なってくれるregister()メソッドを呼び出しましょう。
上記URLにもありますが以下のサンプルコードをWordPressサイトのhead.php辺りに挿入すればおk

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // 登録成功
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
  }).catch(function(err) {
    // 登録失敗 🙁
    console.log('ServiceWorker registration failed: ', err);
  });
}

続いて上のコードにあるsw.jsの作成です。
このファイルでService Workerのインストール等を行います。

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');

// fetchイベントの処理がないとService Workerが有効であると思われないらしい。。もう少し調べる
self.addEventListener('fetch', function(event) {});
});

このファイルもドメインのルートに設置。manifest.jsonと同じ階層にあれば良いでしょう。

そしてもう一度WordPressの管理画面でheadタグ内を編集。一回済ませればいいものを往復させてすんません
先ほどmanifest.jsonの記述を足したと思いますがそのすぐ下に追加

<script>
if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('service-worker.js').then(function() { console.log('Service Worker Registered'); });
}
</script> 

ホームに追加してみる(chromeで確認)

さあ実機で追加だ!!。。の前に一回PCで確認しとく。
必要ねえよ実機で早くいじくりまわしてえよって人は飛ばしちゃってくださいな〜

chromeでの確認方法は簡単です。
まずは該当サイトの開いて右クリック→検証でデベロッパーツールを開きます。
上記のコードのままであればConsoleタブのログにServiceWorker registrationほにゃららと表示されていると思います。
画像でいう真ん中のやつですね

ちなみにここでmanifest.jsonに関して404エラーが表示されている場合はタグを使って呼び出したmanifest.jsonのパス指定に誤りがあるのでもう一度サーバでどこに置いたか確認しましょ

次にApplicationタブをクリックして左の枠からManifestを選択

右端に仲間はずれみたいに置かれてる「Add to homescreen」をクリックしてみると。。。
「このサイトをシェルフに追加するといつでも〜〜〜」みたいな文字がブラウザの上ら辺に出てくると思う。

ここまで来たら成功。神

ホームに追加してみる(実機)

お待ちかね実機確認タイム。
ただ悲しいかなios標準ブラウザのsafariではまだ正式にPWAをサポートしていません(そんなことないかも。。?)のでホームに追加してもただのショートカットになるかもしれません。。ですが少しだけ作業を行えばiosでもPWAを体験することができます。
一旦簡単なAndroidから確認を行います。

・Android

1.該当サイトを開く
2.右上の三点リーダみたいなのをクリックしてホームに追加ボタンを選択。
3.「ホームに追加されました」と表示されたらホーム画面に戻って追加されたアイコンをクリックする
4.お わ り

・ios(iphoneシリーズ)

1.こちらのサイトにアクセスする
2.普段使用しているAppleIDとパスワードで登録を行い、インストール・再起動を行う。
3.再起動後、safariを開いて自身のサイトにアクセスしてフッター部のボタンから「ホームに追加」を選択してクリック
4.お わ り

他にもオフラインで操作できる機能やプッシュ通知等いろいろあるようなので遊び道具はいっぱいありそう。
おわり✋

Posted in PWA