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
2.5k

 既存サイトをPWA化した話

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

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

Avatar for LuckOfWise

LuckOfWise

April 17, 2018
Tweet

Other Decks in Technology

See All in Technology
ECS障害を例に学ぶ、インシデント対応に備えた AIエージェントの育て方 / How to develop AI agents for incident response with ECS outage
Avatar for iselegant iselegant
5
820
Open Table Formatにおけるストレージ抽象化の比較
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
180
生成AIで始める業務改革 - 製造業編 in 福島 -
Avatar for Daiki Kanemitsu daikikanemitsu
2
610
コンテナセキュリティの最新事情 ~ 2026年版 ~
Avatar for Kyohei Mizumoto kyohmizu
8
3.1k
通話データから価値を生む 生成AIデータ基盤の実践 / CO-LAB_Tech_Night
Avatar for Sansan R&D sansan_randd
0
110
#23 Turing × atmaCup 2nd 6th Place Solution + 取り組み方紹介
Avatar for yumizu yumizu
0
150
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
350
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
Avatar for kazzpapa3 kazzpapa3
1
270
ローカルでLLMを使ってみよう
Avatar for kosmosebi kosmosebi
0
130
Getting started with Google Antigravity
Avatar for Mete Atamel meteatamel
0
270
AWS Transformを使ってCOBOLプログラムのモダナイズに挑戦
Avatar for k-kun duelist2020jp
1
100
Claude Codeで実践するスペック駆動開発入門 / sdd-with-claude_code
Avatar for 吉田真吾 yoshidashingo
2
3.1k

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
200
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
250
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
220
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.6k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
230
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
140
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
140
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k

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