このドキュメントは 以下の２つのドキュメントをよりプリミティブに理解するための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と

当初は better AppCache1 として開発が始まった Service Worker2 ですが、ページとは独立したライフサイクルを持つことでイベント駆動型のサービス3実行基盤としての色合いが強くなっています。本記事では、イベント駆動型のサービス実行基盤とは何なのか、そこへと発展していった流れについて紹介します。 なお本記事は Service Worker の使い方を紹介するものではありません。Service Worker をある程度理解している開発者を想定読者としています。また、本記事はすべて私の個人的な意見や調査に基づくものであり、所属する組織、団体とは一切関係ありません。前置きおわり。 AppCache、そして Service Worker へ 冒頭でも述べた通り、Service Worker は当初 better AppCache として開発が始まりました4 5 6。AppC

ServiceWorker とは本質的に リクエスト＆レスポンスモデルであるので、それをサーバーサイドで実装で一種のサーバーロジックとして動かしてしまって良いはずだ ー という発想に目から鱗だったので、ちょっと考えてみたいと思う。 www.publickey1.jp ここで試せる。 https://cloudflareworkers.com/#a9bc9ef6b4248289c71518581df30bc7:https://tutorial.cloudflareworkers.com Cloudflare はCDN業者なので、 それに特化して Service Worker as a Service みたいな表現はしていないが、実態としてはサーバーサイド ServiceWorker だ。Fastly では varnish のミドルウェアなどでキャッシュ破棄設定のロジックやリダイレクトを書いて

Intro Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。 しかし、Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで開発やデバッグもなかなか難しいと思います。 そこで特に難しい部分、そして分かっていないと実際にデプロイした際に難しいと思う部分について、実際に動きを確認しながら解説したいと思います。 なお、Service Worker の基本的な概念などについては、他のチュートリアルなどを見て理解している前提で進めます。 思いつきで撮ったので色々ミスも有ります、また Chrome Dev Tools の UI はどうせ変わるのでそのつもりで見てください。 TODO になっている動画は、そのうち撮って追加します。 List claim controllerchange updatefound up

サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシーサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。 サービスワーカーの概念と使い方 サービスワーカーは、あるオリジンとパスに対して登録されたイベント駆動型のワーカーです。 JavaScript ファイルの形を取り、ナビゲーションやリソースへのリクエストを横取りや改変したり細かい粒度でリソースをキャッシュすることで関連付けられたウェブページやサイトを制御し、それぞれの状況（もっとも顕著な例は、ネット

html5j Webプラットフォーム部 第19回勉強会 W.A.S.M featuring PWA https://html5j-webplat.connpass.com/event/74013/

8. フロントエンドに関連するSEO情報 1. WRS (JSレンダリング) 2. MFI (Mobile First Index) 3. PWA (Progressive Web Apps) 4. AMP (Accelerated Mobile Pages) 5. 構造化マークアップ (Schema.org , json-ld) 10. 1. WRS Date Article 2014年5月 「JavaScript実行後のHTMLのインデックスを行っている」と Googleが発表 2014年5月 WebマスターツールにJavaScriptレンダリングテスト機能を 追加 2015年3月 SEO検証！ GoogleはAngularJSを正しくクロールするのか？ （2015年2月版） はじめに JSで描画したHTMLも検索対象として解析させる為の 取り組み。 11. 1. WRS Date A

概要 PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの ※ 2020/04/05 追記: PWAに関する仕様の策定当初はモバイルでのユースケースが主だったと記憶していますが、PWAはモバイルに限定されたものではなく、実際にデスクトップでの活用例も増えています。参考: PWAs: building bridges to mobile, desktop, and native (Google I/O '18) AMP = モバイルのWEBページを高速化するためのもの どちらもGoogleが主軸となって策定されている、モバイルページを進化させるためのプロジェクトおよび技術。ネイティブアプリの代替技術ではなく、ブラウザAPIの進化によってネイティブアプリのようなUXをウェブページで提供することが主眼。 1. PWAとは Progressive Web Appsの

この記事では、Angular v5でリリースされた新しい @angular/service-worker（Angular Service Worker）を、Angular CLI v1.5のプロジェクトに導入するクイックスタートを紹介します。Angular Service Workerについての包括的な解説についてはMaxim Salnikov氏が投稿した以下の記事を参考にしてください。 A new Angular Service Worker — creating automatic progressive web apps . Part 1: theoryA new Angular Service Worker — creating automatic progressive web apps. Part 2: practiceこの記事は以下の動作環境を対象としています。 _ _ __

ゼロから作るKubernetesによるJupyter as a Service ー Kubernetes Meetup Tokyo #43

I recently wrote an article called “Native Apps are Doomed.” I was surprised at how many people were defending native apps. In all honesty, the user experience story for native apps has never been impressive. The numbers paint a bleak picture for native app success rates that teams need to be aware of when they make important decisions about how to build a new app. Native apps face two gigantic hu

木村賢(Satoshi Kimura) @kimuyan PWAはユーザーエクスペリエンスを向上させるもの。 Webアプリであることにはかわりなく、いままでやってきたものをよりよくするもの。 #PWATokyo 2017-09-22 09:41:34

pwa_study - connpassに参加してきたのでメモ。 用語 SW = Service Worker XSS = cross site scripting Fetch = Fetch API ウェルカムLT クライアントサイドDDDが行われるようになってきた クライアントサイドにロジックが寄ってきてる 難しい Service Workerもクライアントサイドにそういうロジックや仕組みがよってきたという現象の一つなのでは Service Worker Lifecycle - laco スライド: Service Worker Lifecycle by Suguru Inatomi SWのライフサイクル Service Worker のライフサイクル  |  Web  |  Google Developers これよめば大体分かる スライド -> 記事読むと良い register -

PWA Study( https://web-study.connpass.com/event/65267/ ) で発表した資料です。

Treebo is India’s top rated budget hotel chain, operating in a segment of the travel industry worth $20 billion. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production. What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interact

Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests, and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to p

if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/sw.js') .then((registration) => { registration.update() .then(() => { registration.unregister(); }); }); }

App Shell モデルという設計パターン App Shell モデルは、共通のガワ部分を構成する HTML、CSS、JavaScript をシェルと定義し、その中に入る動的なコンテンツ部分と構造的に分離して扱えるように設計されます。 アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。 アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからす