Upgrade to Pro — share decks privately, control downloads, hide ads and more …

既存サイトをPWA化した話

Avatar for LuckOfWise LuckOfWise
April 17, 2018
Technology
2
2.4k

 既存サイトをPWA化した話

SonicGarden Tech #1 岡山 で発表した資料です。

実際のサイトを例にPWA化していくまでの流れを説明しました。

Avatar for LuckOfWise

LuckOfWise

April 17, 2018
Tweet

Other Decks in Technology

See All in Technology
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか？
Avatar for Masahiro Yoshizawa muziyoshiz
1
100
VCC 2025 Write-up
Avatar for bata_24 bata_24
0
180
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
Avatar for mikami cm_mikami
0
120
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
Avatar for massyuu massyuu
0
110
Trust as Infrastructure
Avatar for Bryan Cantrill bcantrill
0
340
SoccerNet GSRの紹介と技術応用：選手視点映像を提供するサッカー作戦盤ツール
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
170
非エンジニアのあなたもできる＆もうやってる！コンテキストエンジニアリング
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
3
910
AWSにおけるTrend Vision Oneの効果について
Avatar for shima shimak
0
130
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
Avatar for upamune / Yu SERIZAWA upamune
1
420
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
Avatar for po3rin po3rin
2
250
o11yで育てる、強い内製開発組織
Avatar for _awache _awache
3
120
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
Avatar for moriyuya moriyuya
4
530

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.3k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k

Transcript

  1. 既存サイトをPWA化した 株式会社ソニックガーデン 野上　誠司

  2. 自己紹介 野上　誠司（のがみ　せいじ） @LuckOfWise 岡山在住 気さくなプロトタイププログラマー まかない店長

  3. お品書き • ベタなHTMLで作られたサイトをPWA化 • WordPressで作られたサイトをPWA化 • Railsで作られたサイトをPWA化

  4. ベタなHTMLで作られたサイトを PWA化

  5. 方針 • とりあえずLighthouseでスコアが100になる ことを目指す • 細かい説明は置いておく

  6. None
  7. None

  8. Manifest.json

  9. None
  10. None
  11. None

  12. theme-color

  13. None
  14. None

  15. Service Worker

  16. None
  17. None

  18. Service Workerが登録されていることを確認

  19. None

  20. Cache

  21. Cache方針 • 基本的にはキャッシュしたものを返す • まだキャッシュしてないものにアクセスしたらキャッシュする • コンテンツの内容を変えたらキャッシュのkeyを変えて古いのを削除する

  22. None
  23. None

  24. Chromeでキャッシュされてるの確認するのはこのへん見るよ

  25. 全体の差分はこちら https://github.com/osokayama/osokayama.gi thub.io/pull/104

  26. WordPressで作られたサイトを PWA化

  27. None
  28. None

  29. プラグインインストールでおｋ

  30. None
  31. None
  32. None

  33. Railsで作られたサイトをPWA化

  34. None
  35. None

  36. gem 'serviceworker-rails'

  37. rails g serviceworker:install

  38. manifest.json, theme-color

  39. None

  40. push

  41. push server ブラウザ Web Service Worker app server ① endpoint取得

    ②endpoint送信 ③pushをリクエスト ④push

  42. OneSignal

  43. 色んなデバイスや複数人に一気に送るのに便利

  44. URLを設定していると通知をタップすると該当の WPAアプリが開く

  45. 参考サイト • 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