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

既存サイトをPWA化した話

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
Swift Sequence の便利 API 再発見
Avatar for treastrain / Tanaka Ryoga treastrain
1
260
Agent の「自由」と「安全」〜未来に向けて今できること〜
Avatar for katayan katayan
0
350
要件定義の精度を高めるための型と生成AIの活用 / Using Types and Generative AI to Improve the Accuracy of Requirements Definition
Avatar for haru860 haru860
0
320
鹿野さんに聞く！CSSの最新トレンド Ver.2026
Avatar for tonkotsuboy_com tonkotsuboy_com
6
2.9k
Claude Code / Codex / Kiro に AWS 権限を 渡すとき、何を設計すべきか
Avatar for Kazuki Adachi k_adachi_01
4
1.1k
そのSLO 99.9%、本当に必要ですか？ 〜優先度付きSLOによる責任共有の設計思想〜 / Is that 99.9% SLO really necessary? Design philosophy of shared responsibility through prioritized SLOs
Avatar for VTRyo vtryo
0
570
AI時代に越境し、 組織を変えるQAスキルの正体 / QA Skills for Transforming an Organization
Avatar for miisan mii3king
5
4.3k
大学職員のための生成AI最前線 ：最前線を、AIガバナンスとして読み直すためのTips
Avatar for gmoriki | 森木銀河 gmoriki
2
4k
2026年春のAgentCoreアプデ 細かいやつ全部まとめ
Avatar for みのるん minorun365
3
220
Forget technical debt
Avatar for Uwe Friedrichsen ufried
0
180
多角的な視点から見たAGI
Avatar for Terisuke terisuke
0
130
How to learn AWS Well-Architected with AWS BuilderCards: Security Edition
Avatar for Kosuke ENOMOTO coosuke
PRO
0
120

Featured

See All Featured
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.7k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
280
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Design in an AI World
Avatar for tapps tapps
1
210
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
290
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
190
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
390
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
120
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k

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