タグ

関連タグで絞り込む (5)

タグの絞り込みを解除

PWAに関するshukaido170のブックマーク (15)

  • Windows 10 1803の新機能「PWA」とは？　PWAのUWPアプリ化を試してみる


    ※適用バージョン‥Windows 10 version 1803︵build 17134︶以降 はじめに PWAは、Googleが提唱し、Microsoftもプッシュしています。先日開催されたBuild 2018で﹁Progressive Web Apps﹂または﹁PWA﹂のタグが付けられたセッションは10件もありました︵ちなみに、前回・前々回で紹介した﹁timeline﹂を検索すると2件しかありません︶。 GoogleもMicrosoftも推すPWAですが、デスクトップアプリやスマホアプリの開発者にとっては耳慣れない言葉だと思います。TwitterアプリがPWA化したという最近のニュースで知った人も多いのではないでしょうか。そして、MirosoftのWebサイト﹁開発者向けの最新の Windows10機能﹂でPWAの解説を読んでみても︵次の画像︶、ちょっとピンと来ないだろうと思います
    Windows 10 1803の新機能「PWA」とは？　PWAのUWPアプリ化を試してみる

  • ネイティブアプリの時代が終わる？ Appleが「PWA」対応を決めたわけ


    2018年の2月に入って、PWA︵Progressive Web Apps︶についていくつか大きな動きがありました。PWAは、HTML5の限界を突破するためにGoogleが推進しているクライアント︵ブラウザ︶側の高機能化技術で、Webアプリにネイティブアプリ並の操作性や表現力を持たせようとするものです。 以前、PWAについて書いた記事の中で、 AppleにはAppleの事情があり、﹁はいそうですか﹂とはいかない部分もある と書きましたが、どうやらAppleはmacOSとiOSの﹁Safari﹂でPWAをサポートする方向になったようです。 AppleもiOS/macOSをProgressive Web Apps︵PWA︶対応へ。次のSafari 11.1でService Workerなど実装 Microsoftは、その前の週にPWAを﹁Windows10﹂で“ネイティブに”採用することを発
    ネイティブアプリの時代が終わる？ Appleが「PWA」対応を決めたわけ

  • 結局 PWA は来るの？来ないの？


    昨日 Twitter でこんな記事を発見しました。 PWA が来るって言っているエンジニアは今すぐ辞めろ ﹁instagram の PWA が最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、オワコンであった。﹂ もしかしてこれのことかな？ Instagram PWA is sooooooo impressive. I probably won't be able to distinguishitwithits native app. InstagramのPWAが、デキが良すぎて感動してる。ネイティブアプリと見分けられる自信ない。 pic.twitter.com/DS8TfceBZ6 — Eiji Kitamura / えーじ (@agektmr) 2018年1月26日 確かに、この言い方は若干煽り気味のと
    結局 PWA は来るの？来ないの？

  • WEB PUSHをASP.NETとか使ってC#でやってみる - プログラムの事とか

    EdgeもPreview版では対応しているらしいしハードルも当初に比べると下がっているらしいので試してみました WEB PUSHの詳しいあれこれはググってください、私はよくわかってませんので 今回の記事で出来上がったものはこちらに上げてあります github.com 簡単な動き サーバー側で公開鍵と秘密鍵を準備する クライアント側で通知先のURLとか作る 通知したい人が上の情報を使って通知する って感じらしいです 鍵の作り方とかよくわかってないので偉い人の作ってくれたライブラリをつかいましょう 作ってみる Webサーバー まずは基本となるWebページをASP.NET MVC5のテンプレート使って準備して Install-Package WebPush そのままなやつがNuGetにあるので入れましょう、これが面倒なところをみんなやってくれます。らくちんちんちんですね クライアント表示時に公開

    WEB PUSHをASP.NETとか使ってC#でやってみる - プログラムの事とか

  • 新しいアプリの形になるか――Microsoft、「プログレッシブWebアプリ」に関する取り組みが前進


    新しいアプリの形になるか――Microsoft、﹁プログレッシブWebアプリ﹂に関する取り組みが前進‥﹁Webの将来の鍵を握る﹂技術を推進 Microsoftは、﹁Microsoft Edge﹂ブラウザのプレビュー版で﹁プログレッシブWebアプリ﹂︵PWA︶の基盤技術の一部をデフォルトで有効にした他、Microsoft StoreでのPWAの提供に向けたロードマップを打ち出した。 Microsoftは2018年2月6日︵米国時間︶、﹁プログレッシブWebアプリ﹂︵PWA︶に関するプレビュー段階の技術のアップデートと、Microsoft StoreでのPWAの提供に向けたロードマップを発表した。﹁PWAに関するビジョンの実現への大きな一歩だ﹂としている。 MicrosoftはPWAが、﹁Webの将来の鍵を握る﹂と考えている。同社のPWAの定義は、﹁ネイティブアプリのように振る舞うWebサイト
    新しいアプリの形になるか――Microsoft、「プログレッシブWebアプリ」に関する取り組みが前進

  • Firebase Cloud Messaging の Web Push を試してみた


    広告システム開発部の佐藤禎章です。 今回は、Firebaseサービスの一つである Cloud Messaging を使用して、ブラウザへ Push 通知を送る仕組みを揃えてみました。 試しやすく単純な仕組みに出来るので、 node を使用して全部 JavaScript で書いてあります。 node : v4.6.0 npm : 2.15.9 今回作成するものの全体は、下記 Github リポジトリに投入してあります。 これをそのまま clone して、API Key などの設定を投入すれば、そのまま使えます。 https://github.com/medi-y-sato/fcm-test-node 前提知識 : Service Worker とは今回の Push 送受信には Service Worker というものを使用します。 これは何かとざっくり言うと、 Webページとは別にバックグラ
    Firebase Cloud Messaging の Web Push を試してみた

  • ChromeでW3C Push APIを使ってみた - Qiita


    ※ (2017/7/4: Chrome以外のブラウザとの相互運用性を考慮する場合は、Web Pushへの移行を推奨します。Web Pushについては[改訂版] Web Pushでブラウザにプッシュ通知を送ってみる[旧仕様対応版]にまとめています。(なお、AndroidやiOSへのFirebaseプッシュ通知と統合して運用する場合は、Firebase JavaScript SDKの利用を検討した方がよいかもしれません。)) ※ (2015/11/27: 関連してFetchAPIの使い方を簡単ながら別記事に書いてみました。) もう既に、ググると参考記事がいくらでも出てくるような内容ではありますが、個人的にいろいろと上手く行かなかったりしたこともあるので、参考までにまとめてみました。 さて、Chrome 42 (Android版を含む(!))では、Service Workersとの組み合わせで
    ChromeでW3C Push APIを使ってみた - Qiita

  • 超詳解！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
    超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート

  • webブラウザにPush通知送るサーバとjsのサンプル - DRYな備忘録

    このドキュメントは 以下の２つのドキュメントをよりプリミティブに理解するためのDRYな備忘録です。 Adding Push Notifications to a Web App  |  Web  |  Google Developers The Web Push Protocol  |  Web  |  Google Developers 背景 かつて サーバからブラウザにプッシュ通知を送りたい（非WebSocket、非ロングポーリング） - DRYな備忘録　これ書いたけど、改めてProgressive Web Appのドキュメント行ったらアホみたいに分かりづらくなってて不条理を感じたので書きます。 サーバからPush通知がブラウザに対して送れて、ブラウザのjsが閉じててもServiceWorkerが生きてるからNotificationが出る、っていうやつです。最近だとウェブのGmailと

    webブラウザにPush通知送るサーバとjsのサンプル - DRYな備忘録

  • Web Push によるブラウザプッシュ通知 | エキサイト公式　エンジニアブログ

    このエントリーは、エキサイト Advent Calendar 2016 の 12/01 の記事です。 エキサイトとしては初のAdvent Calendar参戦です。 Advent Calendar については Wikipedia が詳しいですが エンジニア界隈では クリスマスまで技術等の投稿をリレーで公開していく企画として 毎年多くの人の投稿で盛り上がっています！ ぜひすべての投稿をウォッチしてください！ アプリでお昼など 定期的 あるいは 即時的 にプッシュ通知で情報を送ることは一般的ですが、 近頃は各種ブラウザの対応に伴い、Web でもプッシュ通知を使って新着情報を届けるサービスが出てくるようになりました。 この Web でのプッシュ通知の技術全体を称して Web Push と呼ばれています。 Web Push は ServiceWorker (Notifcations API + P

    Web Push によるブラウザプッシュ通知 | エキサイト公式　エンジニアブログ

  • FRESH! における Web プッシュ通知機能 〜実装編〜 | CyberAgent Developers Blog


    はじめまして。FRESH! でフロントエンドの開発をしている池田 (こりら) です。 この記事では、Web Push の実装概要や FRESH! における Web プッシュ通知機能 〜機能設計編〜 をもとに、実際に FRESH! でどのように Web Push 通知機能を実装したのかを紹介します。 アジェンダ Web Push の実装概要 Web Notifications API Web Push API Firebase Cloud Messaging (FCM) Service Worker push イベント notificationclick イベント FRESH! における Web プッシュ通知の実装 FCM に関連する処理をユーティリティ化 通知に関する実装 チュートリアルの実装 チャンネルページ・登録情報の管理ページの実装 各ブラウザの個別対応 Chrome (59) Fi
    FRESH! における Web プッシュ通知機能 〜実装編〜 | CyberAgent Developers Blog

  • Web Push 通知を実装してみた – rilakkuma3xjapan's blog

    tag は画面上に表示されるものではないので, 使い方がわかりにくいかもしれませんが, これは主に, すでに表示されている通知を置き換えるために使います. 通常, 1件以上の通知が表示されている状態でさらに通知を生成すると, 既存の通知とは別に新たな通知が表示されます. しかし, tag の値が既知の通知と一致する場合は, 新しい通知が別に表示されるのではなく, 当該通知の中身が新しいもので置き換えられます. tag オプションをうまく活用することで, 通知まみれになるのを防止することができます. ユーザーがデスクトップ通知をクリックしたときに何らかの処理を実行するには, Notification インスタンスに対して, イベントリスナーを設定します. notification.addEventListener('click', (event) => { console.dir(event

    Web Push 通知を実装してみた – rilakkuma3xjapan's blog

  • Introduction to Service Worker: How to use Service Worker - HTML5 Rocks


    Service Worker は非常に有用ですが、最初は扱いが難しい場合があります。Workbox により、Service Worker が使いやすくなります。 ただし、Service Worker は困難な問題を解決するため、そのテクノロジーの抽象化も、理解がなければ難しいものです。したがって、Workbox の詳細に入る前に、これらのドキュメントの最初の数部分で基盤となるテクノロジーについて説明します。 実行中の Service Worker のリストを表示するには、アドレスバーに﹁chrome://serviceworker-internals/﹂と入力します。 Service Worker がもたらすもの Service Worker は、ウェブブラウザとウェブサーバー間のプロキシとして機能する特別な JavaScript アセットです。オフライン アクセスの提供による信頼性の向上

  • 脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法

    Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA（Progressive Web Apps）」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。 ここ最近はプログレッシブWebアプリ（Progressive Web Apps、PWA）の話題をよく耳にするとともに、これが未来のWebなのかどうかが議論の的になっています。ネイティブアプリ vs PWA論争に加わるつもりはありませんが、PWAがモバイルデバイス対応を強化し、ユーザーエクスペリエンスを向上することだけは確かです。2018年までにはモバイルからのアクセス数がほかのすべてのデバイスからのアクセス数を上回ると予測されるなかで、どうしてこの流れを無視できるのでしょうか。 良いニュースは、PWAの作成は難しくないということです。実際のところ既存のサイトをPWA化するこ

    脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法

  • やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita


    これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった︵やちまもその一人である︶． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである．20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ちなみにMicrosoft Edgeでは既に開発中34である． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が
    やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.