Tweet
Tweet

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