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
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
Avatar for Cygames cygames
PRO
2
730
robocopy の怖い話/scary-story-about-robocopy
Avatar for emi emiki
0
450
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
Avatar for Yoichi Kawasaki yokawasa
3
1k
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
Avatar for knt44kw knt44kw
0
140
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
Avatar for Hayato Tan htan
1
190
株式会社島津製作所_研究開発（集団協業と知的生産）の現場を支える、OSS知識基盤システムの導入
Avatar for Kuniharu, AKAHANE (赤羽根/州晴) akahane92
1
1.3k
Findy Freelance 利用シーン別AI活用例
Avatar for nesskazu ness
0
250
反脆弱性(アンチフラジャイル)とデータ基盤構築
Avatar for CUEBiC Inc. cuebic9bic
2
150
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
Avatar for CUEBiC Inc. cuebic9bic
2
190
Google Agentspaceを実際に導入した効果と今後の展望
Avatar for MIXI ENGINEERS mixi_engineers
PRO
2
250
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
Avatar for emi emiki
0
130
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
Avatar for Mutz mutsumix
0
160

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
420
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Done Done
Avatar for chrislema chrislema
185
16k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Scaling GitHub
Avatar for Zach Holman holman
461
140k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k

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