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

PWAで誰でも簡単ネイティブアプリ開発

Avatar for NakanishiTetsuhiro NakanishiTetsuhiro
April 28, 2018
Technology
2.2k
0

 PWAで誰でも簡単ネイティブアプリ開発

Used in JavaScript MeetUp Okinawa Vol.3

Avatar for NakanishiTetsuhiro

NakanishiTetsuhiro

April 28, 2018

More Decks by NakanishiTetsuhiro

See All by NakanishiTetsuhiro
コメントの書き方から見る 良いコードについての考察
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
700
SelfIntroduction
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
69
Laravelで設計する際の ベストプラクティスを探る
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
2.4k
MackerelでECS on Fargate 監視してみた
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
960
WebエンジニアによるWebエンジニアのための今だからこそおすすめしたいLinux環境
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
1
110
本番環境をECSで構築した話
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
940
Laravel5でjobque実装した話
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
120
Laravel5でJob_Queue実装した話_v1.0.1
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
1
69
社会人による社会人のための友達づくりのすゝめ
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
62

Other Decks in Technology

See All in Technology
2026 Apache Flink Community Checkpoint
Avatar for Robert Metzger rmetzger
0
200
JAWSコミュニティに 参加して1年経った結果
Avatar for ssakita ssakita
0
120
なぜ東京にいる私が、新潟の技術コミュニティを運営するのか by 八雲慎之助
Avatar for やくも yakumo
0
230
AWS基盤改善を支える 私たちの理念と行動指針
Avatar for Kento Suzuki kentosuzuki
0
140
「いつか使う」の「いつか」は来ない 〜AI駆動開発における「作らない」判断について〜
Avatar for Kazuki Sakamoto/ikki0006 ikki0006
0
170
eBPF 簡介 2026 版
Avatar for shunghsiyu shunghsiyu
0
190
[dbts2026]数十PBの超巨大データ×AI活用を支えるSnowflakeの実力〜大規模環境におけるアーキテクチャと運用のリアル〜
Avatar for Matsubara y_matsubara
0
120
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
Avatar for sh_fk2 sh_fk2
2
420
SREのためのFinOps入門
Avatar for Masahiro Yoshizawa muziyoshiz
1
510
Claude Codeで作ったアプリを安全に公開する/Built with Claude Japan 2026
Avatar for Shingo Yoshida 吉田真吾 yoshidashingo
0
220
自律的なチームを作るためにTechPMがやらないこと
Avatar for Naoki Yoshitake ny7760
1
530
令和の今、あらためて IAM を考える。アクセスキーを「無くせない現実」との向き合い方
Avatar for kazzpapa3 kazzpapa3
0
540

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.9k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
560
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
4
11k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
330
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
390
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
380
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1.1k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
516
110k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
580

Transcript

  1. PWAで誰でも簡単ネイティブアプリ開発！

  2. 自己紹介 中西哲大（テツさん、てっちゃん） 株式会社Re:Build Webエンジニア リモートワーク歴１ヶ月 好き：Python, Go, Linux, Laravel, Vue.js

    音楽好き（ギター弾くのと歌うの好き） PyData.Okinawaオーガナイザー

  3. PWAとは？ Progressive Web App の略 基本的には全画面表示のブラウザってイメージ バックグラウンドでService Workerが常駐している HTML +

    CSS + JSでアプリ開発できる

  4. PWAとは？ モバイルのSafariやChromeからホーム画面に追加するだけでインス トール完了 Service Workerの機能を利用するのでブラウザがService Workerに 対応している必要あり HTTPS必須 (GitHubPagesで公開可能！)

  5. Service Workerとは リッチなオフライン体験、定期的なバックグラウンド同期、プッシ ュ通知など、これまでネイティブアプリを必要としていた機能が Web にもやってきます。Service Worker はそれらの機能を提供す る基盤技術です。

  6. Service Workerのおおまかなライフサイクル

  7. AppCacheっていう似た機能が昔あった 以前にも、オフライン体験を Web にもたらすものとして AppCache というものがあった AppCache の重大な問題として、たくさんの意図しない挙動があっ たこと、シングルページ Web

    アプリにはうまく動いてくれたもの の、複数のページにまたがるサイトではうまく動いてくれないとい う設計・・・ Service Worker はこれらの弱点を避けるように設計されている 「Service Worker の紹介」https://developers.google.com/web/fundamentals/primers/service‑ workers/?hl=ja より引用

  8. ServiceWorker対応状況

  9. PWAはWebアプリとネイティブアプリのいい とこどり！ 端末がオンラインのときのみ指定したファイルをアップデート オフラインのときはキャッシュされたファイルをもとに起動 Webエンジニアも簡単に実装できる！ AppStoreやGooglePlayの審査がいらない！

  10. iOSの11.3からのPWA対応でできるようになったこと (https://medium.com/@takeshiamano/iosの11‑3からのpwa対応ででき るようになったこと‑313f638a172b)

  11. PWA、いいんじゃないでしょうか！(´ω｀)

  12. 今日の目標 1. GitHubPagesでPWAを公開 2. 色々なPWAをインストールして遊んでみる(時間があれば)

  13. サイトをPWA化するのに必要なもの ファイル名 目的 manifest.json PWAに関する設定を記述するところ sw.js ServiceWorkerに関する処理をかくところ

  14. None

  15. https://github.com/NakanishiTetsuhiro/redroom2018 https://nakanishitetsuhiro.github.io/redroom2018/

  16. それでは実際のコードを見ていきましょう

  17. シンプルなPWAサンプルここに置いておきますね (https://qiita.com/kazaoki/items/e93b88556fcd05d28ddc)

  18. PWAが色々おいてあります PROGRESSIVE WEB APPS

  19. PWAに対応しているWebサービス（一部） Twitter Instaglam SUUMO WEGO

  20. ご清聴ありがとうございました！ あとでどこかに資料アップするので詳しく見たい方はどうぞ

  21. 参考サイト シンプルなPWAサンプルここに置いておきますね (https://qiita.com/kazaoki/items/e93b88556fcd05d28ddc) vue‑pwa‑boilerplate (https://qiita.com/radiocat/items/034904a094d07c389a4f#vue‑ pwa‑boilerplate) はじめてのプログレッシブ ウェブアプリ (https://codelabs.developers.google.com/codelabs/your‑first‑ pwapp‑ja/#0)