Awesome Progressive Web Apps
Progressive Web Appsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
必読
- Building Progressive Web Apps - O’Reilly Media - Progressive Web Apps、service workers、push notifications、background sync、IndexedDB、offline firstなどを深く掘り下げます。
- Offline Web Applications Using IndexedDB & Service Worker - Progressive Web App構築の基本概念を紹介する無料のUdacityコース。
学習リソース
- Google Developers - Your First Progressive Web App - app shellパターンを使ってProgressive Web Appsを構築するためのステップバイステップガイド。
- Awesome Service Workers - service workersを学ぶための優れたリソース集。
- Service Workers W3C Specification - service workersの公式仕様。
ブラウザーサポート
- Can I Use - Service Workers - ServiceWorker APIの最新ブラウザーサポート表。
- Is Service Worker ready? - 各ブラウザーにおけるServiceWorkerサポートの現状。
動画
- Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016 - Progressive Web Apps構築で最も一般的な技術と手法を素早く解説します。
- Intro To Progressive Web Apps - Googleによる無料Udacityコース。PWA、service workers、web app manifestsの入門を扱います。
- Offline Web Applications Using IndexedDB & Service Worker - service workersを深く学ぶ予定なら必見の無料Udacityコース。
- Progressive Web Apps (Chrome Dev Summit 2015) - Alex RussellとAndreas BovensによるProgressive Web Appsの紹介。
- Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016 - Polymerを使ってProgressive Web Appsを構築します。
事例
- Building the Google I/O 2016 Progressive Web App - web components、Polymer、material designを使用するProgressive Web Appの構築と公開。
- AliExpress Case Study - AliExpressは新しいProgressive Web Appsにより新規ユーザーのコンバージョン率を104%増加。
- eXtra Electronics Case Study - United eXtra ElectronicsはWeb Push NotificationsによりeCommerce売上を100%増加。
- Jumia Case Study - Push NotificationsがJumiaのカート放棄を減らし、コンバージョンを9倍増加。
- Konga Case Study - Kongaは新しいProgressive Web Appによりデータ使用量を92%削減。
- Suumo Case Study - 日本最大の不動産サイトはWeb Push Notificationsにより新規物件情報を強化し、通知の開封率31%を達成。
サンプルProgressive Web Apps
- PWA.rocks - Opera Dev Relations teamが集めた複数のProgressive Web Appsのショーケース。
- SVGOMG
- Guitar Tuner
- Voice Memos
- Hacker News
個別技術
Service Workers
- Awesome Service Workers - 優れたservice workerリソースを厳選して集めたコレクション。
CacheStorage API
- Offline Storage for Progressive Web Apps - ブラウザーにおけるオフラインストレージの現状。
- CacheStorage API - MozillaによるAPIドキュメントとサンプルコード。
Background Sync
- Introducing Background Sync - 優れた動画とコードサンプルを伴う、background syncの穏やかな入門。
- Background Sync Explained - 単発同期と定期同期を含む、background syncの公式「explainer」文書。
- Background Sync Spec - Background Syncの作業中仕様。
Push Notifications
- Can I Use - Push API - Push APIの最新ブラウザーサポート表。
- Chrome Platform Status - Web Notifications - Chromeなどのブラウザーにおける実装状況。
- PWA Dev Summit 2016 codelab - Push Notifications Progressive Web App、Push Notifications、service worker基礎の最新入門チュートリアル。
- Using the Push API - Push APIを紹介する記事。
- web-push-libs - 異なる技術（Node.js、PHP、Pythonなど）におけるウェブプッシュ用の役立つライブラリ集。
IndexedDB
- IndexedDB API - MozillaによるAPIドキュメント、主要概念、サンプルコード。
インストール可能なWebアプリ
- Increasing Engagement with Web App Install Banners - App Install Bannersと、Chromeがユーザーにウェブアプリを提示するようにする方法の紹介。
- Installable Web Apps with the Web App Manifest in Chrome for Android - Android向けChromeでのインストール可能なWeb Appsの紹介。
アプリアイコン
- RealFaviconGenerator - 異なるブラウザーでアプリアイコンを表示するのに必要なすべての画像、favicon、関連ファイルを生成する優れた方法。
- Android Asset Studio - Launcher Icon Generator - Androidスタイルのアイコンを生成します。
Web Share APIs
- Introducing the Web Share API - Web Share APIの高レベルな紹介。
- Web Share API explainer - いくつかの例を含むAPIの説明。提案文書の一部です。
- Web Share Target API - Web Share Target APIの提案と、高レベルなexplainer。
Awesome Performance
- Web Fundamentals - Performance - ウェブアプリのパフォーマンス最適化に関する豊富な知識を含むGoogleのパフォーマンス学習ポータル。
- Introducing RAIL: A User-Centric Model For Performance - Gang of PaulsによるRAILの代表的な紹介。
- Website Performance Optimization - ウェブサイトを高速化する無料Udacityコース。
- Browser Rendering Optimization - ジャンクのない60fpsパフォーマンスを維持するウェブアプリを作る助けとなる無料Udacityコース。
- The PRPL Pattern - パフォーマンスを重視し、Progressive Web Appsを構造化・配信するための新しいパターン。
- Browser Rendering Performance - HTML、JavaScript、CSSがブラウザーでどのように処理されるかと、それに応じてページを最適化する方法を理解します。