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
950
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
79
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.3k
MTDDC Meetup TOKYO 2023
chinen
2
360
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.9k
WWDC2023-Recap-LT
chinen
1
140
Web Push対応状況2023
chinen
0
550
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
180
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
190
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
技術を改善し続ける
gumioji
0
170
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Introduction to kotlinx.rpc
arawn
0
770
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
Better Code Design in PHP
afilina
0
180
ML.NETで始める機械学習
ymd65536
0
240
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
React 19アップデートのために必要なこと
uhyo
8
1.6k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building Applications with DynamoDB
mza
93
6.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
669
57k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
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水曜 オンライン開催