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 Conference 2021
Search
Chinen
June 26, 2021
Programming
0
910
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
Chinen
June 26, 2021
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
86
Web Push対応状況2023
chinen
0
430
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
350
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
310
Other Decks in Programming
See All in Programming
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
300
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
400
Polars入門
daikikatsuragawa
1
160
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
120
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
160
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
410
Let's learn code review
riofujimon
2
570
AppRouter Panel Talk
yosuke_furukawa
PRO
1
450
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Embracing the Ebb and Flow
colly
80
4.2k
Docker and Python
trallard
35
2.7k
Git: the NoSQL Database
bkeepers
PRO
423
63k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Infographics Made Easy
chrislema
238
18k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Six Lessons from altMBA
skipperchong
22
3k
Why Our Code Smells
bkeepers
PRO
331
56k
Statistics for Hackers
jakevdp
790
220k
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水曜 オンライン開催