Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWAで誰でも簡単ネイティブアプリ開発
Search
NakanishiTetsuhiro
April 28, 2018
Technology
0
2.1k
PWAで誰でも簡単ネイティブアプリ開発
Used in JavaScript MeetUp Okinawa Vol.3
NakanishiTetsuhiro
April 28, 2018
Tweet
Share
More Decks by NakanishiTetsuhiro
See All by NakanishiTetsuhiro
コメントの書き方から見る 良いコードについての考察
nakanishitetsuhiro
0
630
SelfIntroduction
nakanishitetsuhiro
0
49
Laravelで設計する際の ベストプラクティスを探る
nakanishitetsuhiro
0
2.2k
MackerelでECS on Fargate 監視してみた
nakanishitetsuhiro
0
880
WebエンジニアによるWebエンジニアのための今だからこそおすすめしたいLinux環境
nakanishitetsuhiro
1
96
本番環境をECSで構築した話
nakanishitetsuhiro
0
900
Laravel5でjobque実装した話
nakanishitetsuhiro
0
100
Laravel5でJob_Queue実装した話_v1.0.1
nakanishitetsuhiro
1
55
社会人による社会人のための友達づくりのすゝめ
nakanishitetsuhiro
0
50
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2.1k
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
How GitHub (no longer) Works
holman
314
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Navigating Team Friction
lara
187
15k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Adopting Sorbet at Scale
ufuk
77
9.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
For a Future-Friendly Web
brad_frost
179
9.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Transcript
PWAで誰でも簡単ネイティブアプリ開発!
自己紹介 中西哲大(テツさん、てっちゃん) 株式会社Re:Build Webエンジニア リモートワーク歴1ヶ月 好き:Python, Go, Linux, Laravel, Vue.js
音楽好き(ギター弾くのと歌うの好き) PyData.Okinawaオーガナイザー
PWAとは? Progressive Web App の略 基本的には全画面表示のブラウザってイメージ バックグラウンドでService Workerが常駐している HTML +
CSS + JSでアプリ開発できる
PWAとは? モバイルのSafariやChromeからホーム画面に追加するだけでインス トール完了 Service Workerの機能を利用するのでブラウザがService Workerに 対応している必要あり HTTPS必須 (GitHubPagesで公開可能!)
Service Workerとは リッチなオフライン体験、定期的なバックグラウンド同期、プッシ ュ通知など、これまでネイティブアプリを必要としていた機能が Web にもやってきます。Service Worker はそれらの機能を提供す る基盤技術です。
Service Workerのおおまかなライフサイクル
AppCacheっていう似た機能が昔あった 以前にも、オフライン体験を Web にもたらすものとして AppCache というものがあった AppCache の重大な問題として、たくさんの意図しない挙動があっ たこと、シングルページ Web
アプリにはうまく動いてくれたもの の、複数のページにまたがるサイトではうまく動いてくれないとい う設計・・・ Service Worker はこれらの弱点を避けるように設計されている 「Service Worker の紹介」https://developers.google.com/web/fundamentals/primers/service‑ workers/?hl=ja より引用
ServiceWorker対応状況
PWAはWebアプリとネイティブアプリのいい とこどり! 端末がオンラインのときのみ指定したファイルをアップデート オフラインのときはキャッシュされたファイルをもとに起動 Webエンジニアも簡単に実装できる! AppStoreやGooglePlayの審査がいらない!
iOSの11.3からのPWA対応でできるようになったこと (https://medium.com/@takeshiamano/iosの11‑3からのpwa対応ででき るようになったこと‑313f638a172b)
PWA、いいんじゃないでしょうか!(´ω`)
今日の目標 1. GitHubPagesでPWAを公開 2. 色々なPWAをインストールして遊んでみる(時間があれば)
サイトをPWA化するのに必要なもの ファイル名 目的 manifest.json PWAに関する設定を記述するところ sw.js ServiceWorkerに関する処理をかくところ
None
https://github.com/NakanishiTetsuhiro/redroom2018 https://nakanishitetsuhiro.github.io/redroom2018/
それでは実際のコードを見ていきましょう
シンプルなPWAサンプルここに置いておきますね (https://qiita.com/kazaoki/items/e93b88556fcd05d28ddc)
PWAが色々おいてあります PROGRESSIVE WEB APPS
PWAに対応しているWebサービス(一部) Twitter Instaglam SUUMO WEGO
ご清聴ありがとうございました! あとでどこかに資料アップするので詳しく見たい方はどうぞ
参考サイト シンプルな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)