Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Offline fallback page with service worker

Paul Kinlan

何年も前に、ネイティブアプリケーションがネットワーク接続の欠如にどのように対応したかについて調査しました。私は分析へのリンクを失いましたが(Google+にあると誓うことができます)、多くのネイティブアプリケーションはインターネットに密接に結び付けられているため、機能を拒否することができます。多くのWebアプリのように思えますが、それらはWebとは一線を画したものですが、経験はまだ「オンブランド」であったということです。大部分のWebエクスペリエンスでは、「Dino」が表示されます(chrome:// dinoを参照)。 Service Workerには長い間取り組んできましたが、Service Workerによってページが制御されるサイトがますます増えている一方で、ネットワークが機能していないときには、ほとんどのサイトで基本的なフォールバックの経験がありません利用可能です。 私は私たちの良い友達Jakeに、あなたが完全にオフラインで最初のエクスペリエンスを作りたくないという仮定の下で一般的なフォールバックページをどのように作り上げるかについてのガイダンスがあるかと尋ねました。 Check it out 。 説明を簡潔にするために、コードの長さは約20行にすぎないので、以下に貼り付けました。オフラインアセットをキャッシュし、「ナビゲーション」フェッチであるすべてのフェッチについて、エラーが発生したかどうか(ネットワークが原因で)を確認し、元のコンテンツの代わりにオフラインページをレンダリングします。 addEventListener('install', (event) => { event.waitUntil(async function() { const cache = await caches.open('static-v1'); await cache.addAll(['offline.html', 'styles.css']); }()); }); // See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload addEventListener('activate', event => { event.waitUntil(async function() { // Feature-detect if (self.registration.navigationPreload) { // Enable navigation preloads! await self.registration.navigationPreload.enable(); } }()); }); addEventListener('fetch', (event) => { const { request } = event; // Always bypass for range requests, due to browser bugs if (request.

Read More

Why Build Progressive Web Apps: Push, but Don't be Pushy! Video Write-Up

Paul Kinlan

Thomas SteinerによるWeb上の優れたプッシュ通知に関する素晴らしい記事とビデオ、およびサンプルです。 A particularly bad practice is to pop up the permission dialog on page load, without any context at all. Several high traffic sites have been caught doing this. To subscribe people to push notifications, you use the the PushManager interface. Now to be fair, this does not allow the developer to specify the context or the to-be-expected frequency of notifications. So where does this leave us? Read full post 。

Read More

Why Microsoft and Google love progressive web apps | Computerworld

Paul Kinlan

マイク・エルガンのPWAに関する素晴らしい記事。マイクロソフトの目標はPWAではわかりませんが、私たちは非常に単純だと考えています。ユーザーがコンテンツや機能に即座にアクセスできるように、デバイス上で対話できるようにしたいと考えています。ウェブは、接続されたすべてのデバイスのすべての人に届くはずです。ユーザーは、自分の好みのモダリティにアクセスできる必要があります(モバイル、多分)、またはアシスタントなどでの音声 私たちはまだヘッドレスウェブから遠く離れている(0)が、記事では本当に私を驚かせた: Another downside is that PWAs are highly isolated. So it’s hard and unlikely for different PWAs to share resources or data directly. 全文を読む ウェブ上のサイトとアプリは分離されていないと思われますが、ウェブはリンク可能、インデックス可能、一時的です(0)。私たちは、プラットフォームがユーザーに簡単にサイト内外の*データを取得することを許可していないため、意図しないサイロを作成しています(1)。私はRDFやそのようなことについては言及していません。コピー&ペースト、ドラッグ&ドロップ、サイトへの共有、サイトからの共有などの基本的な操作は今日のWeb上で壊れています。と窓。

Read More

Building a video editor on the web. Part 0.1 - Screencast

Paul Kinlan

あなたは、ブラウザでウェブだけを使ってビデオを作成し編集することができます。 Screenflowに似たユーザーインターフェイスを提供することで、複数のビデオ、画像、およびオーディオを1つのビデオにまとめて、YouTubeなどのサービスにアップロードできる出力ビデオを作成できるようにする必要があります。 私の前の投稿からビデオエディタの要件を簡単に説明した後、この記事ではスクリーンキャストでウェブカメラレコーダーをどのように作成したか、そしてスクリーンキャストを構築する方法レコーダー:) それはすべてき​​ちんとしていて、新しい navigator.getDisplayMedia APIを使用します。これにより、ユーザーは画面コンテンツへのアクセスを許可することができます。以下のコードは、私がこのビデオを作成するために使用したすべてのものです。 ビデオは非常に非常に生であり、現時点で私はビデオを編集することができないので、多くの間違いがあります:)私の目標は、このプロジェクトの終わりに、私は良いビデオをエンドツーエンドで作ることができるということです。 このビデオのコードデモ window.onload = () => { if('getDisplayMedia' in navigator) warning.style.display = 'none'; let blobs; let blob; let rec; let stream; let voiceStream; let desktopStream; captureBtn.onclick = async () => { download.style.display = 'none'; desktopStream = await navigator.getDisplayMedia({video:true}); voiceStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true}); let tracks = [...desktopStream.getTracks(), ...voiceStream.getAudioTracks()] console.log('Tracks to add to stream', tracks); stream = new MediaStream(tracks); videoElement.srcObject = stream; blobs = []; rec = new MediaRecorder(stream, {mimeType: 'video/webm; codecs=vp9,opus'}); rec.

Read More

Building a video editor on the web. Part 0.

Paul Kinlan

あなたは、ブラウザでウェブだけを使ってビデオを作成し編集することができます。 Screenflowに似たユーザーインターフェイスを提供することで、複数のビデオ、画像、およびオーディオを1つのビデオにまとめて、YouTubeなどのサービスにアップロードできる出力ビデオを作成できるようにする必要があります。 この投稿は本当に単なる声明です。私はプラットフォーム上で利用できるものと利用できないものを整理し、今日までにどのくらい得ることができるかを見るための長いプロセスを開始するつもりです。 このプロジェクトのいくつかの考えの中で、私はカール・セイガンの瞬間を持っていました。つまり、リンゴ・パイを作るために宇宙を発明する代わりに、少なくともビデオ・エディタを構築するのに必要なすべてのツールを作成する必要があります。それを行うプロセス。この記事が存在するという事実は、私がいくつかの作品を用意して準備ができていることを知っているからです。 私は、他の誰かのためのビジネスでもある大規模なモノリシックな「ビデオエディタ」を作り出すつもりはないと思っていますが、私はそれを簡単にするために必要なすべての部分を工夫するつもりですウェブ上で素晴らしい動画を作成し、多くの人にウェブ上で可能なことを見せてもらいましょう。 以下は私の大まかな1ページプロジェクト計画です: 私が持っている使用例: *私は通常、Google I / OとChrome DevSummitのすべてのデバイスデモを記録し、オーバーレイなどを追加する必要があります。チームの全員がこれを行うことができます。 *チームはしばしばスクリーンキャストを記録し、シンプルなウェブサイトからすぐにそれを行い、最終的な出力をクリーンアップできるようにしたいと考えています。 *私は鋭く保つためにいくつかの製品を作る必要があります。 ;) 入力: [p0]マイクから音声を録音する [p0]ウェブカメラからビデオを録画する[完了 - 下記参照] [p0]ウェブ上にホストされている外部動画を埋め込む [p0]デスクトップを記録する [p1]リモートストリームを記録する [p1]< canvas>を記録します。素子 [p0]ローカルデバイスからファイルをロードする [p1]ローカルデバイスからファイルを共有する(android share intent) 操作: [p1]ウォーターマークを追加する [p1]フィルター効果を画像に追加する [p0]カスタム画像をレイヤーとして追加する [p0]ビデオとオーバーレイをキューに入れる [p0]オーディオとビデオの別々のトラックをオーバーレイする [p1]特定の時間にテキストを重ねる [p0]ビデオをサイズに切り抜く [p0]ビデオの位置決めとサイズ変更を有効にする [p0]ビデオ/オーディオのトリム [p0]スプライスビデオ/オーディオ 出力: [p0] webm形式のビデオファイル [p1] MTB情報 [p1] xyz形式のビデオファイル このビデオのコードデモ const init = () => { let blobs; let rec; let stream; captureBtn.onclick = async () => { stream = await navigator.

Read More

PWA: Progressive Web All-the-things

Paul Kinlan

PWA。プログレッシブウェブアプリ。 Frances BerrimanとAlex Russellは、2015年に「プログレッシブウェブアプリ:私たちの魂を失うことなくタブを逃れる」(0)という、「プログレッシブウェブアプリ」という言葉を主張しています。 3年後、我々は長い道のりを歩んだ。当初は1つのブラウザエンジンでしか実装されていなかったサービスワーカー、マニフェスト、ホーム画面に追加、Web Pushというゆるやかな技術の集まりから、企業や開発者と業界全体に密着し始めたブランド、ブラウザベンダーは大多数の ‘PWA’スタックを実装しています。 野生のPWAの数を大まかに把握するのに役立つappディレクトリ、toolsがあります。 PWA](3)。しかし、PWAは何を定義していますか?フランシスとアレックスはこの特徴のリストを思いついた: Responsive: to fit any form factor Connectivity independent: Progressively-enhanced with Service Workers to let them work offline App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions Fresh: Transparently always up-to-date thanks to the Service Worker update process Safe: Served via TLS (a Service Worker requirement) to prevent snooping Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them

Read More

Page Lifecycle API - Philip Walton

Paul Kinlan

Philip Walton氏は、ブラウザがタブをアンロードしたときの対応方法をChrome開発者がコントロールするために、Chromeチームが取り組んでいる新しいAPIについて深く掘り下げています。 Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user. On the web, there has historically been no such lifecycle, and apps can be kept alive indefinitely. With large numbers of web pages running, critical system resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

Read More

Add to homescreen changes in Chrome 68 - Pete LePage

Paul Kinlan

Pete LePageは、Chromeのホーム画面に追加するという重要な変更について書きます Add to Home Screen changes If your site meets the add to home screen criteria, Chrome will no longer show the add to home screen banner. Instead, you’re in control over when and how to prompt the user. To prompt the user, listen for the beforeinstallprompt event, then, save the event and add a button or other UI element to your app to indicate it can be installed.

Read More

A one year PWA retrospective - Pinterest Engineering

Paul Kinlan

PinterestのPWAの概要 The verdict Now for the part you’ve all been waiting for: the numbers. Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board.

Read More

This.Javascript: State of Browsers - YouTube

Paul Kinlan

This DotのTracy Leeは、ブラウザのベンダーの多くが取り組んでいることの概要を示すために、かなりきれいなライブストリームを編成しました。 Browser representatives from Brave, Beaker, Edge, Chrome, & Mozilla get together to talk about recent updates and the state of browsers. Featured Speakers: Brendan Eich -  Creator of Javascript, Co-founder & CEO at Brave Software Paul Frazee - Works on Beaker Browser Matthew Claypotch - Developer Advocate at Mozilla Paul Kinlan - Senior Developer Advocate at Google Patrick Kettner - Edge at Microsoft Amal Hussein - Senior Open Web Engineer at Bocoup Tracy Lee - GDE, RxJs Core Team, This Dot Co-founder 全文を読む

Read More

PWACompat: the Web App Manifest for all browsers - @ChromiumDev

Paul Kinlan

Sam Thorogoodからのメッセージ: You’ve designed a webapp, built its code and service worker, and finally added the Web App Manifest to describe how it should behave when ‘installed’ on a user’s device. This includes things like high-resolution icons to use for e.g. a mobile phone’s launcher or app switcher, or how your webapp should start when opened from the user’s home screen. And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify.

Read More

Getting started with the Ambient Light Sensor

Paul Kinlan

ディーン・ヒューム氏は最近、PWAの多くの素晴らしい仕事をしています。また、彼は新しいプラットフォームAPIの多くを探っています。この場合は汎用センサーAPIです: The Ambient Light Sensor API provides developers with the means to determine ambient light levels as detected by the device’s main light detector. This information is available to developers in terms of lux units. If you are building a Progressive Web App and you want to style it differently depending on the light levels in the room, then this could be the feature for you. There are a number of use cases for this feature, such as a web application that provides input for a smart home system to control lighting, a “Kindle” style reading app, or even a web app that calculates settings for a camera with manual controls (aperture, shutter speed, ISO, etc.

Read More

Understanding Storage Quota | Workbox

Paul Kinlan

Jeff PosnickがWorkboxに書き込みます A common source of unexpectedly high quota usage is due to runtime caching of opaque responses, which is to say, cross-origin responses to requests made without CORS enabled. Browsers automatically inflate the quota impact of those opaque responses as a security consideration. In Chrome, for instance, even an opaque response of a few kilobytes will end up contributing around 7 megabytes towards your quota usage. 全文を読む

Read More

Web Share Target API

Paul Kinlan

Share Target API is now in Chrome breaking down one of the last silos of native platforms

Read More

onappinstalled - for when an app is installed.

Paul Kinlan

Use onappinstalled to detect when a progressive web app is installed.

Read More

Progressive Progressive Web Apps

Paul Kinlan

Building Progressive Web Apps progressively is possible. This is how I did it.

Read More