PWA for WordPressを試してみた

ABC2018AでPWAのカンファレンスを聞いて(途中で疲れていたせいか寝てしまったけどｗ)PWA for WordPressについてお話があったので、お試しで導入してみた。
PWA for WordPressはルートディレクトリにWordpressが配置されていることが前提の為、僕のWordpressではうまく動かない！

まずは、PWA for WordPressがmanifestとserviceWorkerのjsをどこに保存しているか確認。
blogディレクトリ直下にある。
Chromeでエラーを確認し、ルートディレクトリにコピー。
とりあえず、なんかインストールできた！
できたけど、ブログじゃなくて、ルートのindex.htmlが出てくる・・・

そこで、カンファレンスで登壇していた方に相談。

以下の2つの変更で、blogディレクトリのserviceWorkerのjsを読み込むようになりました。

プラグインのpublic/class-pwa4wp-public.php の85行目を以下のように変更
echo "<script>if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/" . PWA4WP_SERVICEWORKER_FILE . "');}</script>";
↓
echo "<script>if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/" . PWA4WP_SERVICEWORKER_FILE . "',{scope:'/blog/'});}</script>";

Manifest設定のstart_urlとscopeに/blog/を設定

ただし、これだけだとblogディレクトリに保存されるManifestが読み込まれないため、以下を変更を行う
echo '<link rel="manifest" href="/' . PWA4WP_MANIFEST_FILE . '" />';
↓
echo '<link rel="manifest" href="/blog/' . PWA4WP_MANIFEST_FILE . '" />';

ここまでの変更をして、Androidで再読み込み・・・うまくいかない
キャッシュをクリアしてもうまくいかない。
Windows10のChromeではインストールできた！
ちなみに、WindowsのChromeでPWAを使う場合、Chromeでchrome:flagsをアドレスバーに入力して、PWA関係の設定をEnableにすればOK

なぜ、Androidがうまいかないのか・・・謎である。
もしかすると、HTML内にhttpのリンクとかあるせいなのか・・・？