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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
660
SelfIntroduction
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
53
Laravelで設計する際の ベストプラクティスを探る
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
2.3k
MackerelでECS on Fargate 監視してみた
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
910
WebエンジニアによるWebエンジニアのための今だからこそおすすめしたいLinux環境
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
1
110
本番環境をECSで構築した話
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
910
Laravel5でjobque実装した話
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
110
Laravel5でJob_Queue実装した話_v1.0.1
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
1
59
社会人による社会人のための友達づくりのすゝめ
Avatar for NakanishiTetsuhiro nakanishitetsuhiro
0
56

Other Decks in Technology

See All in Technology
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
150
旅先で iPad + Neovim で iOS 開発・執筆した話
Avatar for ZOZO Developers zozotech
PRO
0
100
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
430
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
220
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
310
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
300
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
480
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
Avatar for adachi.ryo rvirus0817
0
360
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
Avatar for soudai sone soudai
PRO
12
5.6k
pool.ntp.orgに ⾃宅サーバーで 参加してみたら...
Avatar for Fuminori -Tany- Tanizaki(谷崎文義) tanyorg
0
1.4k
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
140
CDK対応したAWS DevOps Agentを試そう_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
440

Featured

See All Featured
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4.3k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
220
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
340
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
220
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

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)