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
はじめてのSDET / My first challenge as a SDET
bun913
1
250
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
1
130
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
250
Writing Ruby Scripts with TypeProf
mame
0
150
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
140
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
180
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
320
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
1.5k
Creating Awesome Change in SmartNews
martin_lover
1
280
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
120
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
6
540
Road to Go Gem #rubykaigi
sue445
0
470
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Site-Speed That Sticks
csswizardry
5
490
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Side Projects
sachag
452
42k
The Language of Interfaces
destraynor
157
25k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
550
Visualization
eitanlees
146
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
186
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
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