Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shifter Staticのサイトを PWAにしよう / PWA Night Confere...
Search
Chinen
June 26, 2021
Programming
0
970
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
Chinen
June 26, 2021
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
120
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
Model Pollution
hschwentner
1
160
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
36k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
テスト駆動Kaggle
isax1015
1
540
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
PicoRuby on Rails
makicamel
2
140
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
型で語るカタ
irof
0
670
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Invisible Side of Design
smashingmag
301
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Adaptive Systems
keathley
43
2.7k
Producing Creativity
orderedlist
PRO
346
40k
A better future with KSS
kneath
238
17k
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水曜 オンライン開催