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
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
Avatar for Riotaro OKADA okdt
PRO
9
600
Yahoo!ニュースにおけるソフトウェア開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
350
EKS Pod Identity における推移的な session tags
Avatar for z63d z63d
1
200
あとはAIに任せて人間は自由に生きる
Avatar for Kentaro Kuribayashi kentaro
3
1.1k
LLM時代の検索とコンテキストエンジニアリング
Avatar for shibuiwilliam shibuiwilliam
2
1.1k
[CVPR2025論文読み会] Linguistics-aware Masked Image Modeling for Self-supervised Scene Text Recognition
Avatar for So Uchida s_aiueo32
0
210
mruby(PicoRuby)で ファミコン音楽を奏でる
Avatar for Katsuhiko Kageyama kishima
1
230
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
Avatar for Yuji Oshima yuj1osm
1
130
LLMエージェント時代に適応した開発フロー
Avatar for Yuya Hirayama hiragram
1
410
TypeScript入門
Avatar for Recruit recruitengineers
PRO
16
4.2k
トヨタ生産方式(TPS)入門
Avatar for Recruit recruitengineers
PRO
2
220
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
Avatar for mtx2s mtx2s
3
910

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
790
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Side Projects
Avatar for Sacha Greif sachag
455
43k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k

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