Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021

Transcript

1. Shifter Staticのサイトを
 PWAにしよう
 2021/6/26　まぁし / 知念 昌史

2. 知念 昌史 / まぁし@chocodogmagic
 TAMのフロントエンドエンジニア 兼 フリーランス
 • 沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • ものづくりが好き
 ◦ イラスト、ゲーム、アプリ、漫画、小説 
 • ベテランポケモントレーナー
 • ゼルダの伝説 ブレス オブ ザ ワイルド（今頃やり始め た）

3. Shifterとは

5. 高速でメンテナンスフリーな WordPressウェブサイトのための ソリューションです。 https://www.getshifter.io/ja/
6. 1.Shifter Static • WordPressインストール済みの環境 • 静的化してホスティング • CDN配信 2.Shifter Headless • WordPressインストール済みの環境 • REST APIを提供
7. 1.Shifter Static • WordPressインストール済みの環境 • 静的化してホスティング • CDN配信 2.Shifter Headless • WordPressインストール済みの環境 • REST APIを提供
8. 基本はWordPress

9. PWAにしたい

10. とりあえずホームに追加 1. metaタグを追加 2. manifest.jsonの作成 3. Service Workerを読み込む ※Shifterの環境には直接ファイルをアップロードできない ※WordPressテーマ内に追加する このときの僕はまだ気づいていませんでした・・・ これがしたい
11. Androidのブラウザでページを開いても インストールバナーが出ない・・・ （Mini-Info bar） • HTTPSになっている • アイコン用の画像も設置済み • パスも間違っていない だめだった これが出てほしい →
12. PCのChrome開発ツールで consoleを確認すると・・・
14. Service Workerのscopeがおかしい • Service Workerの置かれている階層以下のみscopeにできる • WordPressテーマの中に入れると「/wp-content/themes/テーマ名/sw.js」 • サイトのドキュメントルート直下「/」をscopeにしたい • Shifterではドキュメントルートにファイルをアップロードできない • PWA対応できない・・・＼(^o^)／
15. プラグインに頼る
16. WordPress用のPWAプラグイン いろいろある・・・Shifterは静的にファイルを生成したものをhostingするのでプラグインで 自動生成するファイルは出力できるのか？
17. サポートに問い合わせるも プラグインに不具合あり （2020年6月頃）
18. ありがとうサポートのみなさん（2021年1月） 解　　　　　決
19. 対応プラグイン - PWA 参考記事をもとにインストールしてみる https://support.getshifter.io/en/articles/2684304-h ow-to-create-a-progressive-web-app-with-wordpr ess-on-shifter
20. だめだった（その2） Androidのブラウザでページを開いても インストールバナーが出ない・・・ （Mini-Info bar） プラグインも有効にしている！ Shifterで静的にgenerateするはずのmanifestファイルやsw.jsが無い？ headタグ内で読み込みもしてない・・・なんで？ /wp-json/wp/v2/web-app-manifest このディレクトリで ファイルが作られるらしいが 404 not found
21. 初歩的なあるある オリジナルで新規デザインした自作テーマを使っていたため、 wp_head() と wp_footer() がテーマに入っていなかった。 <?php wp_head(); ?> <?php wp_footer(); ?> PWAプラグインは wp_head でmanifest のタグ出力とファイル生成、 wp_footer でService Workerのファイル生成をしていた
22. プラグインが生成する manifestは functions.phpで カスタマイズ ※Service Workerも同様
23. 無事にホームへ追加できた！
24. ShifterでPWA対応する注意点 1. サイト直下に自由にファイルが置けないため、生成するプログラムを書くか WordPressのPWAプラグインを入れる 2. 対応しているPWAプラグインは、manifestの設定やService Workerでやりたい処 理をfunctions.phpに定義する必要がある（プラグイン入れただけではうまくいかな い） 3. オリジナルのテーマを使っている場合、wp_head/wp_footerが 抜けていないか確認 クセがあるけどうまく設定すれば PWA + CDNで爆速のWordPress静的サイトが公開できるよ！
25. ありがとうございました！！！
 Twitter @chocodogmagic
 まぁし
 フォローしてね！！
 PWA Night
 毎月第3水曜
 オンライン開催