[B! PWA] awgbookmarkのブックマーク

SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報

awgbookmark 2019/09/30

PWA

リンク

PWA（Progressive Web Apps／プログレッシブウェブアプリ）でpush通知するための手順 - Qiita

最近巷で話題になっているPWAことProgressive Web Apps（プログレッシブウェブアプリ）今回は、PWAでpush通知をするための手順を記載します。まずはPWAとはなにか？以下、Googleの公式サイトからの引用です。 [引用] https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ja プログレッシブウェブアプリはウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコ

awgbookmark 2019/09/30

PWA

リンク

PWA 入門〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita

What's PWA ? Progressive Web Apps （プログレッシブ　ウェブ　アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます導入事例大手WEBサイトからで導入がはじまりつつありますコンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi

awgbookmark 2018/05/02

PWA

リンク

「ホーム画面に追加」からはじめる『PWA(Service Worker)』 - Qiita

Android ChromeでService Workerが使えるようになり、徐々に盛り上がりを見せそろそろ使ってみても良いんじゃ・・・という匂いも感じ始めています。ブラウザプッシュでの通知やキャッシュなどの機能にService Workerの注目が集まりがちですが、これらの実装はかなり複雑でやっかいです。その中でも一番実装が簡単なService Worker(?)がホーム画面に追加の機能です。この機能はService WorkerのJSは１文字書く必要がないので、Service Workerの実装を始める前にやっておくのも良いと思います。実際に実装してみると、下からにゅるっと出てきます条件 HTTPS接続（または localhost） Android Chrome 42以上が必要です。SSLは https://letsencrypt.org/ で無料で入れられるので入れましょ

awgbookmark 2018/05/02

PWA

リンク

Web App Install Banners | Web Fundamentals | Google Developers

ウェブアプリマニフェストは、プログレッシブウェブアプリの情報と、ユーザーのパソコンまたはモバイルデバイスにインストールされたプログレッシブウェブアプリの動作をブラウザに伝える JSON ファイルです。一般的なマニフェストファイルには、アプリ名、アプリで使用するアイコン、アプリの起動時に開く URL などが含まれています。マニフェストファイルを作成するマニフェストファイルには任意の名前を付けることができますが、一般的には manifest.json という名前で、ルート（ウェブサイトの最上位ディレクトリ）から提供されます。この仕様では拡張機能は .webmanifest にすることが推奨されていますが、ブラウザは .json 拡張機能もサポートしているため、デベロッパーにとってわかりやすい場合があります。一般的なマニフェストは次のようになります。 { "short_nam

awgbookmark 2018/05/02

PWA

リンク

【3ステップではじめる】PWAによる「ホーム画面に追加」バナーの実装 - エンジニアのたまご

概要 PWAのService Workerを使って、Webサイトに訪れた時に、「ホームに追加する」バナーの表示をする機能を実装をしました割りと簡単に実装できたので、その方法をご紹介します！ ↓こんなバナーが表示されるようになります ▲Polymer Shop demoのバナー表示例概要 PWA(Progressive Web Apps)とは Service Workerについて SWの動作環境【3ステップではじめる】「ホーム画面に追加」バナーの表示通知条件 1. アイコンやアプリ名などの設定を行う：manifest.json 2. serviceWorker.jsを作成する 3. 作成したファイルをheaderで読み込むデバッグ方法 Android実機からの確認 Desktop Chromeからの確認気をつけておくこと PWA(Progressive Web Apps)とは P