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
Gen3R: 3D Scene Generation Meets Feed-Forward Reconstruction
Avatar for Spatial AI Network spatial_ai_network
0
110
AI Driven AI Governance
Avatar for Yutaka Hiroyama pict3
0
330
貴方はどのエンジニアリングを磨くのか
Avatar for hatyibei hatyibei
0
120
なぜ私たちのSREプラクティスはなかなか機能しないのか 〜システムより先に組織を見る〜 / Why our SRE practices aren't really working
Avatar for VTRyo vtryo
3
3.6k
誤解だらけの開発生産性 / Myths and Misconceptions about Developer Productivity
Avatar for Masato Ishigaki / 石垣雅人 i35_267
1
230
AICoEでAIネイティブ組織への進化
Avatar for YukiOgawa yukiogawa
0
150
Terraform共通モジュールをチーム横断で“変えられる”運用へ ― リリースと適用の分離
Avatar for kekke-n kekke_n
1
2.8k
Empower GenAI with Agile - あなたのアジャイルが生成AIのバフになる仕組み
Avatar for Hiroyuki Ito (TheHiro) hageyahhoo
1
170
ループエンジニアリングでE2Eテストを実践
Avatar for Noriyuki TAKEI noriyukitakei
0
350
KiCAD講習会②
Avatar for TUTものづくりサークル tutcreators
0
110
Road to SRE NEXTの今までとこれから
Avatar for Hiroya Onoe hiroyaonoe
0
290
AIに「使われる」時代のSaaS戦略 〜既存WebAPIのMCPサーバー化における開発ノウハウ〜
Avatar for 駅すぱあと API ekispert_api
0
310

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
210
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.7k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.4k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
180
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
680
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
300
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
310
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
870
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k

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