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

Other Decks in Technology

See All in Technology
APIセキュリティを組織で実現するには~注力する点と設計・実装に入れたい対策~
Avatar for RiiiM(りむ) riiimparm
3
930
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
Avatar for LayerX layerx
PRO
0
860
Redmine 7.0で私が開発した新機能の狙いと背景
Avatar for MAEDA Go vividtone
1
110
[RSJ26] Building a VLA Model Based on Self-Distilled Classification
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
190
データエンジニアリングワークショップ：Auto LoaderとSparkで学ぶデータパイプライン構築
Avatar for Databricks Japan databricksjapan
PRO
0
150
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
150
KPIだけでは評価できないプロダクトが考えるべき Evalsという第二の評価系 / Beyond KPIs: Evals as a Second Evaluation Framework for Products #PdEConf
Avatar for Aki / @LoveIdahoBurger aki_iinuma
4
3.5k
プロダクト思考 × 基盤思考を AIで実現する Compound Engineering
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
250
Driving AI Adoption Using In-House GPUs to Serve Qwen
Avatar for po3rin po3rin
2
440
Autonomous AI Databaseサービス・アップデート（FY27）/ adb-service-update-jp-fy27
Avatar for oracle4engineer oracle4engineer
PRO
0
110
AI活用の現在地、 ちゃんと見えてますか？/XPfest-2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
140
Guerilla InnerSource in enterprises, during the AI hype
Avatar for Oleg Nenashev onenashev
PRO
0
150

Featured

See All Featured
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
510
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
510
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.2k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
320
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.8k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
470

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)