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
640
SelfIntroduction
nakanishitetsuhiro
0
50
Laravelで設計する際の ベストプラクティスを探る
nakanishitetsuhiro
0
2.2k
MackerelでECS on Fargate 監視してみた
nakanishitetsuhiro
0
890
WebエンジニアによるWebエンジニアのための今だからこそおすすめしたいLinux環境
nakanishitetsuhiro
1
96
本番環境をECSで構築した話
nakanishitetsuhiro
0
900
Laravel5でjobque実装した話
nakanishitetsuhiro
0
110
Laravel5でJob_Queue実装した話_v1.0.1
nakanishitetsuhiro
1
56
社会人による社会人のための友達づくりのすゝめ
nakanishitetsuhiro
0
51
Other Decks in Technology
See All in Technology
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
130
Agile PBL at New Grads Trainings
kawaguti
PRO
1
320
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
テストを軸にした生き残り術
kworkdev
PRO
0
180
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
4
1.2k
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
590
生成AI時代のデータ基盤
shibuiwilliam
6
3.8k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
210
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
460
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
340
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
360
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
230
Featured
See All Featured
Scaling GitHub
holman
463
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Documentation Writing (for coders)
carmenintech
74
5k
Become a Pro
speakerdeck
PRO
29
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Producing Creativity
orderedlist
PRO
347
40k
Automating Front-end Workflow
addyosmani
1370
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Git: the NoSQL Database
bkeepers
PRO
431
66k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
54k
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)