Slide 1
Slide 1 text
Shifter Staticのサイトを
PWAにしよう
2021/6/26 まぁし / 知念 昌史
Slide 2
Slide 2 text
知念 昌史 / まぁし@chocodogmagic
TAMのフロントエンドエンジニア 兼 フリーランス
● 沖縄でリモートワーク/元・美容師
● 技術コミュニティ運営
○ PWA Night（東京）/ v-okinawa（沖縄）
● ものづくりが好き
○ イラスト、ゲーム、アプリ、漫画、小説
● ベテランポケモントレーナー
● ゼルダの伝説 ブレス オブ ザ ワイルド（今頃やり始め
た）
Slide 3
Slide 3 text
Shifterとは
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
高速でメンテナンスフリーな
WordPressウェブサイトのための
ソリューションです。
https://www.getshifter.io/ja/
Slide 6
Slide 6 text
1.Shifter Static
● WordPressインストール済みの環境
● 静的化してホスティング
● CDN配信
2.Shifter Headless
● WordPressインストール済みの環境
● REST APIを提供
Slide 7
Slide 7 text
1.Shifter Static
● WordPressインストール済みの環境
● 静的化してホスティング
● CDN配信
2.Shifter Headless
● WordPressインストール済みの環境
● REST APIを提供
Slide 8
Slide 8 text
基本はWordPress
Slide 9
Slide 9 text
PWAにしたい
Slide 10
Slide 10 text
とりあえずホームに追加
1. metaタグを追加
2. manifest.jsonの作成
3. Service Workerを読み込む
※Shifterの環境には直接ファイルをアップロードできない
※WordPressテーマ内に追加する
このときの僕はまだ気づいていませんでした・・・
これがしたい
Slide 11
Slide 11 text
Androidのブラウザでページを開いても
インストールバナーが出ない・・・
（Mini-Info bar）
● HTTPSになっている
● アイコン用の画像も設置済み
● パスも間違っていない
だめだった
これが出てほしい →
Slide 12
Slide 12 text
PCのChrome開発ツールで
consoleを確認すると・・・
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Service Workerのscopeがおかしい
● Service Workerの置かれている階層以下のみscopeにできる
● WordPressテーマの中に入れると「/wp-content/themes/テーマ名/sw.js」
● サイトのドキュメントルート直下「/」をscopeにしたい
● Shifterではドキュメントルートにファイルをアップロードできない
● PWA対応できない・・・＼(^o^)／
Slide 15
Slide 15 text
プラグインに頼る
Slide 16
Slide 16 text
WordPress用のPWAプラグイン
いろいろある・・・Shifterは静的にファイルを生成したものをhostingするのでプラグインで
自動生成するファイルは出力できるのか？
Slide 17
Slide 17 text
サポートに問い合わせるも
プラグインに不具合あり
（2020年6月頃）
Slide 18
Slide 18 text
ありがとうサポートのみなさん（2021年1月）
解 決
Slide 19
Slide 19 text
対応プラグイン - PWA
参考記事をもとにインストールしてみる
https://support.getshifter.io/en/articles/2684304-h
ow-to-create-a-progressive-web-app-with-wordpr
ess-on-shifter
Slide 20
Slide 20 text
だめだった（その2）
Androidのブラウザでページを開いても
インストールバナーが出ない・・・
（Mini-Info bar）
プラグインも有効にしている！
Shifterで静的にgenerateするはずのmanifestファイルやsw.jsが無い？
headタグ内で読み込みもしてない・・・なんで？
/wp-json/wp/v2/web-app-manifest このディレクトリで
ファイルが作られるらしいが 404 not found
Slide 21
Slide 21 text
初歩的なあるある
オリジナルで新規デザインした自作テーマを使っていたため、
wp_head() と wp_footer() がテーマに入っていなかった。
PWAプラグインは wp_head でmanifest のタグ出力とファイル生成、
wp_footer でService Workerのファイル生成をしていた
Slide 22
Slide 22 text
プラグインが生成する
manifestは
functions.phpで
カスタマイズ
※Service Workerも同様
Slide 23
Slide 23 text
無事にホームへ追加できた！
Slide 24
Slide 24 text
ShifterでPWA対応する注意点
1. サイト直下に自由にファイルが置けないため、生成するプログラムを書くか
WordPressのPWAプラグインを入れる
2. 対応しているPWAプラグインは、manifestの設定やService Workerでやりたい処
理をfunctions.phpに定義する必要がある（プラグイン入れただけではうまくいかな
い）
3. オリジナルのテーマを使っている場合、wp_head/wp_footerが
抜けていないか確認
クセがあるけどうまく設定すれば
PWA + CDNで爆速のWordPress静的サイトが公開できるよ！
Slide 25
Slide 25 text
ありがとうございました！！！
Twitter @chocodogmagic
まぁし
フォローしてね！！
PWA Night
毎月第3水曜
オンライン開催