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
130
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.8k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
590
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
220
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
520
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
180
CSC509 Lecture 03
javiergs
PRO
0
330
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
A Tale of Four Properties
chriscoyier
160
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Speed Design
sergeychernyshev
32
1.1k
Building an army of robots
kneath
306
46k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Visualization
eitanlees
148
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Building Adaptive Systems
keathley
43
2.8k
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水曜 オンライン開催