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

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

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

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

Used in JavaScript MeetUp Okinawa Vol.3

Avatar for NakanishiTetsuhiro

NakanishiTetsuhiro

April 28, 2018
Tweet

More Decks by NakanishiTetsuhiro

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

Other Decks in Technology

See All in Technology
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
Avatar for M-Yamashita myamashii
1
750
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
Avatar for CUEBiC Inc. cuebic9bic
2
180
P2P通信の標準化 WebRTCを知ろう
Avatar for Akira Takahashi faithandbrave
5
1.7k
サービスを止めるな！ DDoS攻撃へのスマートな備えと最前線の事例
Avatar for coconala_engineer coconala_engineer
1
200
振り返りTransit Gateway ～VPCをいい感じでつなげるために～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
4
220
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
18k
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
Avatar for sato-s satos
5
3.3k
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
Avatar for Sho Nakatani laysakura
1
310
安定した基盤システムのためのライブラリ選定
Avatar for KAKEHASHI kakehashi
PRO
3
140
スプリントレビューを効果的にするために
Avatar for Miho Nagase miholovesq
1
110
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
Avatar for watany watany
20
7.7k
TROCCO今昔
Avatar for gtnao gtnao
0
130

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
282
13k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
108
19k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k

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)