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
900
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
260
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
930
WWDC2023-Recap-LT
chinen
1
80
Web Push対応状況2023
chinen
0
400
技術記事が書けない人はGPTに背中を押してもらおう
chinen
1
100
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
110
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
340
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
300
Other Decks in Programming
See All in Programming
So You Think You Know Git - Part 2
schacon
PRO
0
1.3k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
130
mandaRa: R言語ユーザのための新しい知識共有の場 / mandara_tokyor111
s_uryu
2
410
『データ可視化学入門』をPythonからRに翻訳した話(増強版)
bob3bob3
0
280
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
1.4k
Learning Ruby
okuramasafumi
5
370
プログラミングを楽しもう! / Enjoy Programming
chobishiba
1
680
Docker ハンズオン / docker-hands-on
suzukihoge
48
15k
私がエッジを使う理由
chimame
9
3.6k
一休.comレストランのRustバックエンド開発の様子
kymmt90
13
7.9k
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
820
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
250
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Web development in the modern age
philhawksworth
201
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Designing with Data
zakiwarfel
94
4.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Six Lessons from altMBA
skipperchong
19
2.9k
GitHub's CSS Performance
jonrohan
1023
450k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.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水曜 オンライン開催