Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

既存サイトを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
書き手が人でもAIでも正しくなる道、 SREを埋め込んだDeveloper Platform / tech drivers day8
Avatar for mekka chmikata
4
760
Microsoft のサポート ライフサイクルを理解する
Avatar for Murachi Akira murachiakira
PRO
0
210
Kiro Crewで「みのるん式」仕事術やってみた
Avatar for みのるん minorun365
PRO
3
1.1k
日本AIベンチャーレポート2026
Avatar for KentaroFujii kentarofujii
0
230
Draft AIエージェントの トークン消費を最小化する 8つの原則
Avatar for kinopee kinopeee
5
1.7k
AIエージェント時代、Kaggleにどう取り組むか
Avatar for Naoya Takashima takanao
1
180
freeeにおける AI を用いた ブラウザ動作確認の自動化の取り組み
Avatar for freee freee
PRO
0
220
Codex を使った障害対応机上演習の実際
Avatar for Kuniwak orgachem
PRO
0
360
構造で守らせる　データ・法務・セキュリティ・開発チームとつくる AI時代のデータガバナンスとデータ基盤のリアル
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
1
520
Filter What the LLM Reads: RAG Governance with AgentCore Gateway
Avatar for やくも yakumo
0
110
reInvent2026stby LT00 "Change your life!"
Avatar for Shinichiro Kawano shinichirokawano
1
290
シンプルな設定ファイルで実現する AWS IAM Identity Center の ユーザー管理Terraformフレームワークを公開しました / Simplifying AWS IAM Identity Center User Management: An Open-Source Terraform Framework
Avatar for Takashi Yamaguchi yamaguchitk333
0
320

Featured

See All Featured
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
410
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
580
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
440
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Music & Morning Musume
Avatar for Bryan Veloso bryan
48
7.5k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
740
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
560
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.2k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.3k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.2k

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