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
なぜSaaSがMCPサーバーをサービス提供するのか？
Avatar for SansanTech sansantech
PRO
8
2.8k
自作JSエンジンに推しプロポーザルを実装したい！
Avatar for Saji sajikix
1
170
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
Avatar for AEON aeonpeople
0
210
なぜテストマネージャの視点が 必要なのか？ 〜 一歩先へ進むために 〜
Avatar for Sammy(MoritaMasami) moritamasami
0
220
Agile PBL at New Grads Trainings
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
410
未経験者・初心者に贈る！40分でわかるAndroidアプリ開発の今と大事なポイント
Avatar for operandoOS operando
5
370
AWSで始める実践Dagster入門
Avatar for キタガワ kitagawaz
1
610
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
Avatar for Michiru Kato applism118
21
10k
S3アクセス制御の設計ポイント
Avatar for tommy tommy0124
3
190
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
Avatar for oracle4engineer oracle4engineer
PRO
4
10k
allow_retry と Arel.sql / allow_retry and Arel.sql
Avatar for Shintani Teppei euglena1215
1
160
Android Audio: Beyond Winning On It
Avatar for Atsushi Eno atsushieno
0
110

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
1
37
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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