PWA: Progressive Web All-the-things

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
Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
Installable: to the home screen through browser-provided prompts, allowing users to "keep" apps they find most useful without the hassle of an app store
Linkable: meaning they're zero-friction, zero-install, and easy to share. The social power of URLs matters.

重要なのは、この説明は、ウェブをどのように見たいかについて少しだけ明確になった瞬間を示しており、私たちのサイトが「PWA」であるかどうかを理解するのに役立つツールを持っています。アレックスはさらに進んで、「PWAをPWAとする技術的側面」(1)のいくつかを定義しました。

このポストの誇大宣言が途方に暮れると、なぜ誰もがこれらのものをつくるのではないのですか? まあ、それは難しいかもしれません。非常に難しい。私たちは開発者や企業に多くのことを求めています。いくつかのケースでは、AppShellに焦点を当てることはサイトの完全な再構築であり、他の場合はAppShellは正しいアーキテクチャではありません。多くの場合、価値観や物語は必ずしも明確ではありません。

私は幸運にもビジネスや開発者に、ウェブ上での構築に対する懸念、特にビジネスや開発者がPWAについて語っていることを聞いた事柄について直接話すことができるようになりました:

We've got our site... but we are also making a PWA.

— Many B2B sites we spoke (actually, I saw this a lot in India)

面白い。彼らは違いますか?頻繁にはないが、PWAは彼らが知っている「もの」であり、それは打ち上げるための別の製品だ。 m。*サイトと同じように、モバイル版のデスクトップサイトでは、PWAは別のものにすることができます。

I've got a PWA. It just does Push notifications.

— Too many people.

ワウ。それはPWAではなく、ネイティブアプリが持っていたテクノロジーを使用しているだけです。

I'm only building a blog... it's not a PWA

— Many bloggers we spoke to.

うーん。コンテンツサイトがなぜ動くのが重要なのかを明確にすることはできませんでした。

I don't care about making it installable.. I don't need a Service Worker.

— Many publishers we spoke to.

ハァッ。人々はAppとインストールを関連づけ、サイトや経験がAppインストールのように行動しなければならないと考えて、一部の人々をコンセプト全体から外してしまいます。 2015年には、ニンジンに関する非常に興味深い議論がありました。

I don't need an app on desktop. I just need users to click 'checkout'

— Many retailers we spoke to.

OK。それはかなり明確です。ユーザーまたはビジネスへの価値は存在せず、PWAの特性に優先順位を付けるビジネスを停止するだけで十分です。

Progressive Web Apps are just better sites.

— Many developers we speak to.

実際、私は多くの偉大なWeb開発者からこのことをたくさん聞いています。

私はあなたに長い間PWAに「PW」を押し込んでいたJeremy Keithの記事をチェックすることをお勧めします。最近の講演では、

There's a common misconception that making a Progressive Web App means creating a Single Page App with an app-shell architecture. But the truth is that literally any website can benefit from the performance boost that results from the combination of HTTPS + Service Worker + Web App Manifest.

— Jeremy Keith. "Any Site can be a Progressive Web App"

私の個人的な気持ちは、誰もPWAのAで本当にハングアップしているということです。これはコンセプトのブランド化の成功と失敗です。 「App」は名前の中にあり、「App」は多くのユーザーや企業を意識しているため、団体はかなり明確です。

私たちのチームの間では、自分自身や他の多くの人々が、PWAのコンテキストで、特にモバイルネイティブの経験と競合するという点で、「App」という言葉を強く押しました。 Andrew Bettsの投稿は、私たちのオリジナルのポジショニングに対して良いサマリーを持っていましたが、私が間違っているとは思わないのですが、それほどモバイル中心ではないフォームファクタを中心に、 。

私は、Chromeウェブストアについて話していたときにこれを視聴者に尋ねていました。 Gmailはアプリですか、サイトですか?簡単なアプリです。 Twitterはアプリですか、サイトですか? App ..それは?私がちょうどコンテンツを読んでいるなら、それはまだウェブサイトのように感じます。 Wikipediaはアプリですか?サイト、絶対に;それはそれですか?エディタとしては、ツールのような感じです。

最終的には、サイトがアプリであるかアプリケーションがサイトである場合、実際にはあまり重要ではないと私は考えています。人々はWeb上で「アプリ」、ゲーム、VRボビン、小売店、伝統的な「サイト」のすべてを作成することができ、メディア、エンターテインメント、出版、ユーティリティ、コマースなどの特定のユースケースに対応できます。

「インストール性」(「白菜の袋」を参照)を除いて、PWAの元の定義を分かれば、私は開発者がアレックスのポイントのいずれかで自分のサイトを改善しても、ユーザーはより良いエクスペリエンスを得ることができ、ユーザーがより良い経験を得ると、Webを大切にしている人々はWebと有意義な関係を保ち、Webを使い続けることができます。どのようにすべてのビジネスと開発者が焦点を当てるべきかを知る方法でPWAの語りを適用するにはどうすればよいですか?


私は、業界で見たような挑戦に基づいて、若干のピボットを考えていましたが、私は開発者とビジネスが彼らの努力に集中できる場所の重要性に優先順位をつけようとしました。 (注:私はBizKinを送るかもしれない)

私たちは、次のようなウェブのユニークな機能を活用することで、ビジネスと開発者が成功することを望んでいます。ボタンをクリックするだけで、できるだけ多くのユーザーにアプローチできます。単一のコードセットを使用してデバイス間で最高のエクスペリエンスを実現することで、ユーザーを保持する。ユーザーとの直接的かつ友好的な関係を構築することによって、ユーザーと有意義な関係を築くことができます。

私は、Webを使用する際にユーザーが感じるべき原則のセットとしてこれを明確にしようとしました。あなたの経験は以下の通りでなければなりません:発見可能、安全、速く、滑らかで、信頼できる、意味ある

発見可能にする:ユーザーが自分の経験を見つけることを可能にする。ウェブはリンクとページで構成されています。理想的には、すべてのページと状態には、アグリゲータ、メッセージ、電子メール、または看板など、あらゆるサイトから誰かに送信できるように、ディープリンクが必要です。レンダラーがそれを読むことができるように、コンテンツを提供する必要があります。

安全にする:ユーザーとコンテンツ所有者は、Web上に構築された経験を信頼して、アイデンティティ、機密性、データの完全性を保護することができます。

速くする:ユーザーがあなたのサイトへのリンクを持っていたら、彼らはあなたの経験にあり、ユーザーが持っているネットワークやデバイスとは無関係に、利用し始めることができます。

それをスムーズにする:ユーザーがあなたのサイトにいるとき、その経験はすべてのユーザーのジェスチャーに反応し、インタラクティブです。アニメーションは滑らかで鮮明で、フィードバックは瞬時に、スクロールは絹で、ナビゲーションは瞬時に行われます。理想的には、RAILの点でウェブパフォーマンスを考えるならば、あなたは 'RAI'に集中しています。

それを信頼できるものにする:信頼できないネットワークやデバイスに直面した場合、サイトのユーザーはできるだけ中断することがほとんどありません。ユーザーがどこにいても、その経験はうまくいくはずです。

価値あるものを提供する:貴重な価値を提供し、価値を提供する高品質な体験を通じて、ユーザーのニーズを満たす必要があります。これはかなりふわふわしているように見えるかもしれませんが、ディオンアルマーはそれについてうまく説明しました。焦点は、ユーザーのニーズを解決する、エンターテインメントであること、購入を円滑にすること、知識の向上や仕事の迅速な完了といったサイトのことです。それはすべてのUXについてです。

これらの基本的な目標を満たす現代的な経験。高速で、信頼性が高く、安全で滑らかです。それは、現代のAPIを使用してますます可能な**となっており、オープンなウェブの範囲とその中心を活用することで、発見可能となります。 PWAは、ユーザーの期待に基づいてこれらの「基本目標」を自然に満たすべきであり、より多くの技術と機能が登場するにつれてその経験を引き続き構築する必要があります。

プログレッシブウェブ アプリ - プログレッシブウェブオール - ザ - もの。

これは私が来年にわたってPWAを推進したいところです。どう思いますか?

ハーレーンバトラに感謝します.

{{ }}

{{ }}

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.