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

既存サイトをPWA化した話

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for LuckOfWise LuckOfWise
April 17, 2018
Technology
2.5k
2

 既存サイトをPWA化した話

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

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

Avatar for LuckOfWise

LuckOfWise

April 17, 2018

Other Decks in Technology

See All in Technology
Deploying a Full-Stack Bun-Native Framework on Cloudflare Workers
Avatar for daiki7nohe 7nohe
0
110
Driving AI Adoption Using In-House GPUs to Serve Qwen
Avatar for po3rin po3rin
2
470
全員がプロダクトへ向き合う組織を持続成長させるために——組織づくりのフライホイールと4象限 / The Flywheel Model and Four Quadrants for Organizational Design
Avatar for hiro-torii hiro_torii
4
920
Bet AI Day 2026丨AIを「使う」から、AIが「働く」へ ― LayerXが進める「組織AI」の社会実装
Avatar for LayerX layerx
PRO
3
2.8k
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
1.9k
Code4Lib JAPANカンファレンス2026 開会挨拶 / Code4Lib JAPAN Conference 2026: Opening Remarks
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
230
Sigmaユーザーのための有用リソース一挙公開 & Sigmaで使えるMCP #sigma_ucj /useful-resources-for-sigma-computing-users-and-mcps-with-sigma
Avatar for shinyaa31 shinyaa31
0
170
20260903 Tokyo Jazug Night #62 | Azure エンジニアよ、 その環境は本当にセキュアか？
Avatar for Olivia olivia_0707
1
640
薬剤師（ドメインエキスパート）と一緒に育てる薬局向けAIアシスタント
Avatar for KAKEHASHI kakehashi
PRO
2
120
AI時代におけるプロダクト横断勉強会の設計
Avatar for ZOZO Developers zozotech
PRO
0
170
Bet AI Day 2026丨How We Bet AI: AIとともに働く場をつくる
Avatar for LayerX layerx
PRO
2
2.8k
「図書館」という名前のままでいいのか -Code4Lib JAPANカンファレンス2026 アンカンファレンス報告- / Code4Lib JAPAN Conference 2026: Unconference Report
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
110

Featured

See All Featured
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
A Soul's Torment
Avatar for Nat Ma seathinner
7
3.6k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
280
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
980
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
310
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
290
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k

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