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
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
480
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
110
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
880
Kiroから考える AIコーディングツールの潮流
s4yuba
4
670
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
17
3.2k
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
AI関数が早くなったので試してみよう
kumakura
0
150
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
120
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
230
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.6k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Why Our Code Smells
bkeepers
PRO
337
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Six Lessons from altMBA
skipperchong
28
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Documentation Writing (for coders)
carmenintech
73
5k
A Tale of Four Properties
chriscoyier
160
23k
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