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
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
180
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
BtoBプロダクト開発の深層
16bitidol
0
330
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
420
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
880
Green Tea Garbage Collector の今
zchee
PRO
2
390
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
170
許しとアジャイル
jnuank
1
130
Azure Well-Architected Framework入門
tomokusaba
1
310
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
190
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Why Our Code Smells
bkeepers
PRO
339
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Side Projects
sachag
455
43k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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