Building a serverless multiplayer game that scales: Part 2 | Amazon Web Services
AWS Compute Blog Building a serverless multiplayer game that scales: Part 2 This post is written by Vito De Giosa, Sr. Solutions Architect and Tim Bruce, Sr. Solutions Architect, Developer Acceleration. This series discusses solutions for scaling serverless games, using the Simple Trivia Service, a game that relies on user-generated content. Part 1 describes the overall architecture, how to deploy
自社運営のWebアプリをPWA化した際にハマった話（OAuthなど） - APC 技術ブログ
はじめに 先進サービス開発事業部の高橋です。主にフロントエンド開発を担当しています。今回は私たちの部署で運営しているソーシャルRSSサービス「NEIGHBORS」をPWA化した際にやったことを書いていこうと思います。 NEIGHBORS | ひとりの興味をみんなの知識に とはいえ、比較的短期間で実装するという目標を掲げていたということもあり、プッシュ通知みたいなすごくネイティブっぽい機能は実装しておらず、キャッシュコントロールやホームに追加してアプリっぽく振る舞うといった比較的簡易な形で落ち着かせています。なので、この記事ではPWAの実装自体について詳しく記載していくというよりは、それまで動いていた機能がPWAというかServiceWorkerを使うことでうまく動かなくなった点に重きを置いています。 PWAとは PWA(Progressive Web App)とは、ざっくりいうと、Webア
ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Service workers offer incredible utility, but can be tricky to work with at first. Workbox makes service workers easier to use. However, because service workers solve hard problems, any abstraction of that technology will also be tricky without understanding it. Thus, these first few bits of documentation will cover that underlying technology before getting into Workbox specifics. To view a runnin
Firebase Cloud Messaging(FCM)を利用したWebPush通知の実装について - Qiita
最近FCMを利用したWebPush通知を実装する機会があったため、 その備忘録として簡単にまとめておきます。 WebPushについて FacebookやGmail、SlackやChatworkなどを利用されているとブラウザの画面右上に飛んでくる通知。 （※ 画像はサンプルで開発したWebPush通知のスクショです） これをFCMを利用して実装してみました。 FCMとは FCMとは、Firebase Cloud Messagingの略で、 W3CをIETFで標準化が進むWebPushをFCMを利用して通知を送信できるようになりました。 これまでは、Firefoxでは事前のキーやIDが必要なくWebPushを送信出来ていましたが、 GoogleChromeではAndroidのアプリケーションと同様に GoogleCloudMessaging（GCM）の登録やキーとIDの取得が必要な状態でした。
Firebase Cloud Messaging (FCM) で Web Push 通知を実装してみた – rilakkuma3xjapan's blog
Overview 「Web Push 通知を実装してみた」で Web Push 通知の概要と, web-push モジュールを利用した Web Push 通知の実装を記載しました. しかしながら, web-push モジュールを利用した Web Push 通知は鍵のやりとりが少々煩雑で実装も複雑になってしまいます. Firebase Cloud Messaging (FCM) を利用すると, 鍵のやりとりの代わりにトークンを利用することで Web Push 通知を簡単に実装することができます. What is Firebase Cloud Messaging ? クロスプラットフォームのプッシュ通知のためのソリューションです. 詳細は, こちらのドキュメントを参考にしてください. How to use Firebase Cloud Messaging ? Firebase console
PWA形式のWebサイトを構築してAndroidスマートフォンにインストールする - Qiita
はじめに 1つ前の記事でPWAについて簡単に解説しました。 端的にまとめれば、PWA化によるWebサービスの高速化とは、キャッシュをJS（Service Worker）によって制御して、いかに回線に頼らずに機能やコンテンツを提供するかという部分が肝になります。 今回の主題は、PWAとしてWebサイトを構築するという部分ですが、背景は「Webサービスを高速にユーザに提供できるようにする」です。 ただ、工夫された状態では学習には不向きだと思いますので、今回は最小構成でPWAとしてブラウザに認識させるというところから始めたいと思います。 そのため、この記事ではPWAの数ある機能のうちの最も基礎となる部分を実装する方法について紹介します。 「PWAである」≒「最新のGoogle Chromeの環境でインストール可能」 という条件で作ってみたいと思います。 実装内容 必要となるファイルはそこまで多く
PWA： ServiceWorkerを使って、キャッシュをコントロールする(オフラインハンドリング) - Qiita
はじめに 前回の記事 (https://qiita.com/OMOIKANESAN/items/5b23fa8ea9ea0d181df5) で、最小構成でPWAのWebサイトを作成する方法についてご紹介しました。 今回は、別のページを作成して、「オフラインのときの挙動を制御する」に取り組みました。 前回も、オフライン状態で動作するページを作成しましたが、複数のページにまたがるような、つまりは通常のWebサイトでの使い方には触れなかったので、今回はページを跨ったときのオフライン表示をコントロールしようというのが主題です。 コードの概要 今回も前回同様に、なるべく最小構成でのオフラインハンドリングを目指しました。 すべてこの記事内に書くと冗長になってしまうため、GitHubへアップロードしましたので、適宜参照してください。 トップページが目次になっていて、それぞれの花の名前を選択すると、選択し
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より)
2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。 進化する Web ～ Progressive Web Apps の実装と応用 ～ from Osamu Monoe この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。 Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事
WebサイトをPWA（Progressive Web App）に変える簡単な手順（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The easy way to turn a website into a Progressive Web App 原文公開日: 2017/11/21 著者: Alexandre Plennevaux Webサイトを簡単にPWA（Progressive Web App）に変える方法（翻訳） Progressive Web Appって何？ PWAは基本的にWebサイトの一種で、モバイルでアクセスするときにユーザーのデバイスに保存可能で、ネイティブアプリと同じように振る舞います。読み込み画面を備えていて、ChromeのUIを非表示にでき、接続が切れてもコンテンツが表示されます。最大のメリットはユーザーのエンゲージメント（engagement）を促進することです。AndroidのChromeブラウザ（他のモバイル用ブラウザについてはわか
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
[RFC]WebPush実装まとめ（Chrome/Firefox/Android/Edge）
Web Pushを実装したまとめ。動作確認済のデモソース付。 2018/08/24 公開されたRFCに準拠し、内容をアップデートしました。 旧仕様のaesgcmから、新仕様のaes128gcmに説明を変更しました。 2017/04/22 初公開 WebPushとは WebPushに使用される暗号の話 楕円曲線暗号（ECC）とは ServiceWorker APIについて WebPushを実装するための手順 HKDF 登録 通知メッセージの暗号化 VAPIDの生成と署名 ヘッダの生成とデータ送信 補足 URL safe Base64（base64url encode）について ASN1 DER formatについて WebPush実装に必要なライブラリ JavaScript側の実装 ServiceWorker API ServiceWorkerの登録 ServiceWorkerスクリプト（登
![[RFC]WebPush実装まとめ（Chrome/Firefox/Android/Edge）](https://cdn-ak-scissors.b.st-hatena.com/image/square/799c3c05a41d460421726aaa1584e104e2982f63/height=288;version=1;width=512/https%3A%2F%2Fadiary.adiary.jp%2Fpub-dist%2Fdefault-logo.png){kind=logo}
PWAの基礎知識（その9）「Push API/VAPID編」
Webブラウザにプッシュ通知を送れるPush APIは魅力的な機能ですが、各ブラウザによって実装が異なっていたり、Firebaseでプロジェクトを登録したりするのが手間でした。それを共通化し、さらにプロジェクト登録不要で使えるようにする仕組みがVAPIDになります。 今回はこのVAPIDを使ったPush APIの使い方です。 必要なもの 今回はVAPIDに対応したライブラリ、web-pushを使います。今回はNode.jsのライブラリです。zaru/webpushというRuby向けのライブラリもあります。 初期設定 まずサーバ側で秘密鍵と公開鍵を用意します。これは以下のコードで可能です。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than wha
create-react-appで作った雛形のコードがService Workerで何をしているのか - Qiita
create-react-appコマンドを実行すると、React.jsプロジェクトの雛形を作れます。 その雛形のsrcディレクトリ以下にregisterServiceWorker.jsというファイルがあります。 また、ビルドするとservice-worker.jsというファイルが生成がされます。 雛形のコードがService Worker上でしている事と、上記ファイルについてまとめてみました。 Service Workerについて Service Workerとは、リッチなオフライン体験・定期的なバックグラウンド同期・プッシュ通知など、いわゆるPWAの機能を実現するために基盤となる技術です。 （詳しくはGoogleのドキュメントにて解説されています。Service Worker の紹介） Service Workerによって実現できる機能は様々ですが、create-react-appで作っ
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
Service Workerの基本とそれを使ってできること - Qiita
Service Workerとは ブラウザが Web ページとは別にバックグラウンドで実行するスクリプト オフラインのアプリを実現・サポートするために作られたものです ちなみに、ブラウザの対応状況はこんな感じ http://caniuse.com/#search=service%20workers 特徴 DOM にアクセスできない DOM を操作したい場合は、Service Worker がコントロールしているページ(js)と postMessage でメッセージのやり取りをして行う リクエストをプロキシすることが可能 Service Worker はブラウザが必要に応じて起動・終了するので、変数の値を保持しておけない Cache、IndexedDB 等で値を保存して、必要になった時に取り出すようにする Promise を多用する https か localhost 上でしか動作しない ラ
プログレッシブウェブアプリ詳解 ─ 過去・現在・未来
Web技術でアプリ開発2016特集・第5弾は、プログレッシブウェブアプリ (Progressive Web Apps)をご紹介させていただきます。 はじめに プログレッシブウェブアプリ(Progressive Web Apps)という言葉が初めて登場したのは2015年8月のAlex Russellによる記事Progressive Web Apps: Escaping Tabs Without Losing Our Soulです。当時オフラインやプッシュ通知など、モバイルウェブを飛躍的に進化させる画期的な機能が次々と追加されていた状況において、このムーブメントを呼称するための言葉が求められていました。Google社内でいくつもの候補が挙げられましたが、Service Workerの発案者としてAlex Russellが推したのが、この「プログレッシブウェブアプリ」でした。 また、当初Goog
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Workbox Broadcast Cache Update | Workbox | Google Developers