Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

06753262e041911692e9a771b1877036?s=47 Chinen
June 26, 2021

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

06753262e041911692e9a771b1877036?s=128

Chinen

June 26, 2021
Tweet

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