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
既存サイトをPWA化した話
Search
LuckOfWise
April 17, 2018
Technology
2
2.4k
既存サイトをPWA化した話
SonicGarden Tech #1 岡山 で発表した資料です。
実際のサイトを例にPWA化していくまでの流れを説明しました。
LuckOfWise
April 17, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.5k
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.3k
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
820
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
700
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
140
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
360
Swiftは最高だよの話
yuukiw00w
2
290
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
220
Introduction to Bill One Development Engineer
sansan33
PRO
0
240
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
130
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
240
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Scaling GitHub
holman
459
140k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
The World Runs on Bad Software
bkeepers
PRO
68
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
BBQ
matthewcrist
88
9.7k
How GitHub (no longer) Works
holman
314
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Balancing Empowerment & Direction
lara
1
89
Transcript
既存サイトをPWA化した 株式会社ソニックガーデン 野上 誠司
自己紹介 野上 誠司(のがみ せいじ) @LuckOfWise 岡山在住 気さくなプロトタイププログラマー まかない店長
お品書き • ベタなHTMLで作られたサイトをPWA化 • WordPressで作られたサイトをPWA化 • Railsで作られたサイトをPWA化
ベタなHTMLで作られたサイトを PWA化
方針 • とりあえずLighthouseでスコアが100になる ことを目指す • 細かい説明は置いておく
None
None
Manifest.json
None
None
None
theme-color
None
None
Service Worker
None
None
Service Workerが登録されていることを確認
None
Cache
Cache方針 • 基本的にはキャッシュしたものを返す • まだキャッシュしてないものにアクセスしたらキャッシュする • コンテンツの内容を変えたらキャッシュのkeyを変えて古いのを削除する
None
None
Chromeでキャッシュされてるの確認するのはこのへん見るよ
全体の差分はこちら https://github.com/osokayama/osokayama.gi thub.io/pull/104
WordPressで作られたサイトを PWA化
None
None
プラグインインストールでおk
None
None
None
Railsで作られたサイトをPWA化
None
None
gem 'serviceworker-rails'
rails g serviceworker:install
manifest.json, theme-color
None
push
push server ブラウザ Web Service Worker app server ① endpoint取得
②endpoint送信 ③pushをリクエスト ④push
OneSignal
色んなデバイスや複数人に一気に送るのに便利
URLを設定していると通知をタップすると該当の WPAアプリが開く
参考サイト • Manifestファイルについて ◦ https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja • SericeWorker ◦ https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja •
cache ◦ https://developer.mozilla.org/en-US/docs/Web/API/Cache • client, clients ◦ https://developer.mozilla.org/en-US/docs/Web/API/Client ◦ https://developer.mozilla.org/en-US/docs/Web/API/Clients • Navigator ◦ https://developer.mozilla.org/en-US/docs/Web/API/Navigator