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.5k
既存サイトをPWA化した話
SonicGarden Tech #1 岡山 で発表した資料です。
実際のサイトを例にPWA化していくまでの流れを説明しました。
LuckOfWise
April 17, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Retrospectiveを振り返ろう
nakasho
0
130
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
170
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
160
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
300
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
120
serverless team topology
_kensh
3
240
Okta Identity Governanceで実現する最小権限の原則
demaecan
0
170
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
120
.NET 10のBlazorの期待の新機能
htkym
0
150
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.7k
Code Reviewing Like a Champion
maltzj
526
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Invisible Side of Design
smashingmag
302
51k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Context Engineering - Making Every Token Count
addyosmani
8
310
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
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