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

既存サイトをPWA化した話

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
AIにより大幅に強化された AWS Transform Customを触ってみる
Avatar for arap / 0air 0air
0
230
FlutterでPiP再生を実装した話
Avatar for 白井翔大 s9a17
0
240
Amazon Qはアマコネで頑張っています〜 Amazon Q in Connectについて〜
Avatar for Yuuki Yamashita yama3133
1
170
契約書からの情報抽出を行うLLMのスループットを、バッチ処理を用いて最大40%改善した話
Avatar for SansanTech sansantech
PRO
3
330
GitHub Actions侵害 — 相次ぐ事例を振り返り、次なる脅威に備える
Avatar for GMO Flatt Security flatt_security
11
6.9k
RGBに陥らないために -プロダクトの価値を届けるまで-
Avatar for RightTouch righttouch
PRO
0
130
パワポ作るマンをMCP Apps化してみた
Avatar for iwamot iwamot
PRO
0
260
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
ThetaOS - A Mythical Machine comes Alive
Avatar for Martijn aslander
0
230
Bref でサービスを運用している話
Avatar for Sugar Sato sgash708
0
220
ハーネスエンジニアリング×AI適応開発
Avatar for Ryohei Kamiya aictokamiya
1
910
GitHub Advanced Security × Defender for Cloudで開発とSecOpsのサイロを超える: コードとクラウドをつなぐ、開発プラットフォームのセキュリティ
Avatar for yuriemori yuriemori
1
120

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
New Earth Scene 8
Avatar for Sydney Stone popppiees
2
1.9k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
280
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
270
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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