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

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

NakanishiTetsuhiro
April 28, 2018
Technology
0
1.7k

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

Used in JavaScript MeetUp Okinawa Vol.3

NakanishiTetsuhiro

April 28, 2018
Tweet

More Decks by NakanishiTetsuhiro

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

Other Decks in Technology

See All in Technology
「いちユーザーがPHPに新機能を追加するまで/PHPConference 2022」
colopl
0
400
Azure Container Apps で .NET 7 アプリを Blue-Green デプロイしてみよう！/jazug12
thara0402
0
300
那些年我們做過的 DevOps Pipeline
cheng_wei_chen
2
1.2k
OSSのアプリケーションを開発「し続ける」ための哲学 / Philosophy to continue developing OSS application
1024jp
5
260
携帯電話事業者間ローミングと緊急通報
iij_techlog
0
1.4k
Instant Payments: moving money at (almost) light speed
_aitor
0
140
PharmaX White paper
pharma_x
0
1.7k
Ideas for introducing new methods
teyamagu
0
350
Google Espresso解説(2017年)
__kaname__
1
670
Abstracting Too Early
mattstauffer
0
140
IIJmio meeting 33 IIJmio Updates
iij_techlog
0
2.4k
A1A会社紹介資料-2022-09-12
a1a
2
1.8k

Featured

See All Featured
Build your cross-platform service in a week with App Engine
jlugia
220
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
The Language of Interfaces
destraynor
148
21k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
How to name files
jennybc
44
66k
Practical Orchestrator
shlominoach
178
8.7k
What the flash - Photography Introduction
edds
64
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
970
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Building Your Own Lightsaber
phodgson
95
4.7k
Designing for humans not robots
tammielis
243
24k
Docker and Python
trallard
27
1.7k

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)