Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
Chinen
June 26, 2021
Programming
0
790
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
Chinen
June 26, 2021
Tweet
Share
More Decks by Chinen
See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
35
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
170
Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02
chinen
0
450
実践PWA 2020 / charitycon_oki2020
chinen
0
370
Shifterを選定するまでに検討したこと / shifter-meetup0603
chinen
0
510
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
chinen
1
330
ポートフォリオ作る話 / PWA Night vol.12
chinen
0
51
Vue.jsの基礎 / v-okinawa meetup #2
chinen
0
110
Vue.js初級編 / v-okinawa meetup #1
chinen
0
240
Other Decks in Programming
See All in Programming
How useEvent would change our applications
koba04
1
1.8k
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
850
byte列のbit表現を得るencodingライブラリ作った
convto
1
200
競プロへの誘 -いざな-
u76ner
0
380
Unboxing Rails 7
claudiob
1
120
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-grapecity
grapecity_dev
0
140
iOSアプリの技術選択2022
tattn
6
2.6k
職場にPythonistaを増やす方法
soogie
0
330
You CANt teach an old dog new tricks
michaelbukachi
0
120
Viteはいいぞ/Vite is Good
dojineko
1
110
「新卒だけ」じゃない!学び直しを支えるミクシィの技術研修を紹介
mixi_engineers
PRO
0
210
モバイルファーストデザインの爆速実装を考える
tanabee8
0
130
Featured
See All Featured
BBQ
matthewcrist
74
7.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Code Reviewing Like a Champion
maltzj
506
37k
Building an army of robots
kneath
299
40k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
Facilitating Awesome Meetings
lara
29
3.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
450
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.6k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
The Cult of Friendly URLs
andyhume
68
4.7k
Transcript
Shifter Staticのサイトを PWAにしよう 2021/6/26 まぁし / 知念 昌史
知念 昌史 / まぁし@chocodogmagic TAMのフロントエンドエンジニア 兼 フリーランス • 沖縄でリモートワーク/元・美容師 •
技術コミュニティ運営 ◦ PWA Night(東京)/ v-okinawa(沖縄) • ものづくりが好き ◦ イラスト、ゲーム、アプリ、漫画、小説 • ベテランポケモントレーナー • ゼルダの伝説 ブレス オブ ザ ワイルド(今頃やり始め た)
Shifterとは
None
高速でメンテナンスフリーな WordPressウェブサイトのための ソリューションです。 https://www.getshifter.io/ja/
1.Shifter Static • WordPressインストール済みの環境 • 静的化してホスティング • CDN配信 2.Shifter Headless
• WordPressインストール済みの環境 • REST APIを提供
1.Shifter Static • WordPressインストール済みの環境 • 静的化してホスティング • CDN配信 2.Shifter Headless
• WordPressインストール済みの環境 • REST APIを提供
基本はWordPress
PWAにしたい
とりあえずホームに追加 1. metaタグを追加 2. manifest.jsonの作成 3. Service Workerを読み込む ※Shifterの環境には直接ファイルをアップロードできない ※WordPressテーマ内に追加する
このときの僕はまだ気づいていませんでした・・・ これがしたい
Androidのブラウザでページを開いても インストールバナーが出ない・・・ (Mini-Info bar) • HTTPSになっている • アイコン用の画像も設置済み • パスも間違っていない
だめだった これが出てほしい →
PCのChrome開発ツールで consoleを確認すると・・・
None
Service Workerのscopeがおかしい • Service Workerの置かれている階層以下のみscopeにできる • WordPressテーマの中に入れると「/wp-content/themes/テーマ名/sw.js」 • サイトのドキュメントルート直下「/」をscopeにしたい •
Shifterではドキュメントルートにファイルをアップロードできない • PWA対応できない・・・\(^o^)/
プラグインに頼る
WordPress用のPWAプラグイン いろいろある・・・Shifterは静的にファイルを生成したものをhostingするのでプラグインで 自動生成するファイルは出力できるのか?
サポートに問い合わせるも プラグインに不具合あり (2020年6月頃)
ありがとうサポートのみなさん(2021年1月) 解 決
対応プラグイン - PWA 参考記事をもとにインストールしてみる https://support.getshifter.io/en/articles/2684304-h ow-to-create-a-progressive-web-app-with-wordpr ess-on-shifter
だめだった(その2) Androidのブラウザでページを開いても インストールバナーが出ない・・・ (Mini-Info bar) プラグインも有効にしている! Shifterで静的にgenerateするはずのmanifestファイルやsw.jsが無い? headタグ内で読み込みもしてない・・・なんで? /wp-json/wp/v2/web-app-manifest このディレクトリで
ファイルが作られるらしいが 404 not found
初歩的なあるある オリジナルで新規デザインした自作テーマを使っていたため、 wp_head() と wp_footer() がテーマに入っていなかった。 <?php wp_head(); ?> <?php
wp_footer(); ?> PWAプラグインは wp_head でmanifest のタグ出力とファイル生成、 wp_footer でService Workerのファイル生成をしていた
プラグインが生成する manifestは functions.phpで カスタマイズ ※Service Workerも同様
無事にホームへ追加できた!
ShifterでPWA対応する注意点 1. サイト直下に自由にファイルが置けないため、生成するプログラムを書くか WordPressのPWAプラグインを入れる 2. 対応しているPWAプラグインは、manifestの設定やService Workerでやりたい処 理をfunctions.phpに定義する必要がある(プラグイン入れただけではうまくいかな い) 3.
オリジナルのテーマを使っている場合、wp_head/wp_footerが 抜けていないか確認 クセがあるけどうまく設定すれば PWA + CDNで爆速のWordPress静的サイトが公開できるよ!
ありがとうございました!!! Twitter @chocodogmagic まぁし フォローしてね!! PWA Night 毎月第3水曜 オンライン開催