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

Transcript

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


2. 知念 昌史 / まぁし@chocodogmagic
 TAMのフロントエンドエンジニア 兼 フリーランス
 • 沖縄でリモートワーク/元・美容師
 •

   技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • ものづくりが好き
 ◦ イラスト、ゲーム、アプリ、漫画、小説 
 • ベテランポケモントレーナー
 • ゼルダの伝説 ブレス オブ ザ ワイルド（今頃やり始め た）


3. Shifterとは


4. None

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を確認すると・・・

13. None

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水曜
 オンライン開催