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
AIエージェント開発のノウハウと課題
pharma_x_tech
5
2.7k
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
手を動かしてレベルアップしよう!
maruto
0
230
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
160
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
110
困難を「一般解」で解く
fujiwara3
6
740
Fraxinus00tw assembly manual
fukumay
0
120
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.1k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
530
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.2k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
KATA
mclloyd
29
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Code Reviewing Like a Champion
maltzj
521
39k
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