Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
既存サイトをPWA化した話
LuckOfWise
April 17, 2018
Technology
2
2k
既存サイトをPWA化した話
SonicGarden Tech #1 岡山 で発表した資料です。
実際のサイトを例にPWA化していくまでの流れを説明しました。
LuckOfWise
April 17, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
ジョブ管理システムをAWS Step Functionsに移行する時の勘所
non97
0
450
聊聊 Cgo 的二三事
david74chou
0
320
ソフトバンクのシナジーがもたらすクラウドソリューションについて、クラウドエンジニアが話してみた。
sbtechnight
0
290
塩漬けにしているMySQL 8.0.xxをバージョンアップしたくなる、ここ数年でのMySQL 8.0の改善点 / MySQL Update 202208
yoshiakiyamasaki
1
550
ソフトバンクでのMECの取り組みについて
sbtechnight
0
300
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
74th
0
150
DeepDive into Modern Development with AWS
mokocm
1
300
やってみたLT会 Fleet Managerのススメ
yukiiiiikuma
PRO
0
350
Azure DevOps Online Vol.6 - 業務で必要なCIをみんなで考えよう
kkamegawa
0
230
Microsoft Data Analytics trends : ”Lakehouse” , ”Data Mesh"
ryomaru0825
2
100
バッファープールが大きいMySQL v5.7でDROP DATABASEが詰まった原因と対策 / Causes and Remedies for DROP DATABASE Stuck in MySQL v5.7 with Large Buffer Pool
line_developers
PRO
4
670
eBPF-based Container Networking
johnlin
2
1.1k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
319
19k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
Become a Pro
speakerdeck
PRO
3
900
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Code Review Best Practice
trishagee
44
9.7k
What's in a price? How to price your products and services
michaelherold
229
9.4k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Atom: Resistance is Futile
akmur
255
20k
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