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
2026年6月23日 Syncable Tech + Start Python Club にて
Avatar for Kimikazu Kato hamukazu
0
140
ロボティクスの技術 / Robotics Technology
Avatar for Kenji Saito ks91
PRO
0
110
OTel × Datadog で 「AI活用」を計測し、改善に繋げる
Avatar for Yuki Shiho shihochan
1
400
Lightning近況報告
Avatar for Koji NAKAMURA kozy4324
0
180
RAG を使わないという選択肢
Avatar for tatsutaka tatsutaka
1
270
不要なレビューをAIにまかせて AIコーディングの環境改善を加速した
Avatar for shoota shoota
1
220
AWS Security Hub CSPMの成功・失敗体験
Avatar for cm-usuda-keisuke cmusudakeisuke
0
250
AIのReact習熟度を測る
Avatar for uhyo uhyo
2
650
手塩にかけりゃいいってもんじゃない
Avatar for ming ming_ayami
0
610
あなたの知らないPDFのアクセシビリティ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
220
スタートアップにAmazon EKSは早すぎる？ マルチプロダクト戦略を加速する Platform Engineeringの実践 / Is Amazon EKS Too Soon for Startups? Practical Platform Engineering to Accelerate a Multi-Product Strategy
Avatar for elmo elmodev09
0
330
Android の公式 Skill / Android skills
Avatar for Yuki Anzai yanzm
0
160

Featured

See All Featured
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.7M
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
230
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
250
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
330
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
350
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.5k

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