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

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
680
SelfIntroduction
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
56
Laravelで設計する際の ベストプラクティスを探る
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
2.3k
MackerelでECS on Fargate 監視してみた
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
920
WebエンジニアによるWebエンジニアのための今だからこそおすすめしたいLinux環境
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
1
110
本番環境をECSで構築した話
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
920
Laravel5でjobque実装した話
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
120
Laravel5でJob_Queue実装した話_v1.0.1
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
1
61
社会人による社会人のための友達づくりのすゝめ
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
57

Other Decks in Technology

See All in Technology
COBOL婆さんの伝説
Avatar for フクイ poropinai1966
0
130
AI バイブコーティングでキーボード不要？！
Avatar for Sam Akada samakada
0
660
AI時代 に増える データ活用先
Avatar for ono.takayuki takahal
0
350
変化の激しい時代をゴキゲンに生き抜くために 〜ストレスマネジメントのススメ〜
Avatar for KAKEHASHI kakehashi
PRO
1
180
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ～解像度を圧倒的に高めPdMの価値を最大化させる方法～
Avatar for KAKEHASHI kakehashi
PRO
3
3.3k
コミュニティ・勉強会を作るのは目的じゃない
Avatar for uutan1108 ohmori_yusuke
0
280
The 7 pitfalls of AI
Avatar for Uwe Friedrichsen ufried
0
150
自動テストだけで
リリース判断できるチームへ - 鍵はテストの量ではなくリリース判断基準の再設計にあった / Redesigning Release Criteria for Lightweight Releases
Avatar for えわ ewa
1
1.3k
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
280
M5Stack CoreS3とZephyr(RTOS)で Edge AIっぽいことしてみた
Avatar for misoji engineer iotengineer22
0
400
ServiceNow Knowledge 26 の歩き方
Avatar for ServiceNow Japan Meetup manarobot
0
260
コードや知識を組み込む / Incorporate Code and Knowledge
Avatar for Kenji Saito ks91
PRO
0
190

Featured

See All Featured
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
130
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
330
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
12k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
170

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)