PWAをオフラインで機能させる方法

公開: 2020-01-10

プログレッシブウェブアプリとその業界を変える機能はすでにご存知でしょうが、繰り返しのために、オフライン機能であるウェブエクスペリエンスに革命を起こす可能性のある驚くべき独自のPWA機能をもう一度繰り返しましょう。。

 推奨読書：PWAとは何ですか？

コンテンツの表示が接続でのみ利用できる通常のWebとは異なり、プログレッシブWebアプリは、サービスワーカー（PWAのプログレッシブ機能の多くを担当する組み込みメカニズム）が必要なファイルをロードすると、オフラインで表示されるという点で異なります。が可能になり、ユーザーはオフラインでもアプリを操作できます。

プログレッシブウェブアプリとオフラインでの利用可能性

PWAのすべての騒ぎが何であるか、特にそのオフライン機能を知るには、メインWebサイトのオフライン表示を直接体験する必要があります。これは定義上PWAでもあります。

PWAでオフラインのときでもコンテンツを表示する

プログレッシブウェブアプリを使用すると、オフラインエクスペリエンス全体が、接続の通常のエクスペリエンスと何ら変わりはありません。それがその美しさです。これは、接続が存在しない場合でも、中断のないブラウジングエクスペリエンスを必要とするeコマースストアに特に役立つ機能です。

注：すべてのPWAサイトでは、オフライン表示をユーザーが利用できるようにする前に、まず重要なリソースを最初にキャッシュする必要があります。

PWAをオフラインで機能させる方法

完全に機能するオフライン対応のプログレッシブWebアプリの構築の詳細をすべて説明するのは複雑です。そのため、今日は基本から始めます。私たちの目標は、オフラインで動作するベアボーンプログレッシブウェブアプリを作成することです。

前提条件

プレーンなウェブサイト/ウェブアプリ。 1つのindex.html 、1つのindex.js 、1つのstyle.cssがあれば何でもかまいません。

すべての前提条件が整ったら、ベアボーンPWAをオフラインで機能させるときが来ました。

基本的なサービスワーカーの作成

まず最初に、機能的なServiceWorkerに必要なすべてのコードを含むsw.jsを作成する必要があります。

 // sw.js
self.addEventListener（ "fetch"、event => {
    console.log（"フェッチしました"+ event.url）;
}）;

Service Workerを作成したら、ブラウザがそれをサポートしているかどうかを確認し、 index.jsで参照しましょう。

 // index.js
if（ナビゲーターの "serviceWorker"）{
    navigator.serviceWorker
        .register（ "sw.js"）
        .then（（）=> console.log（ "登録されたサービスワーカー！"））;
}
//ページの残りのコード...

上記のコードは十分に単純なはずです。ブラウザがサービスワーカーをサポートしているかどうかを確認し、サポートしている場合は「登録済みのサービスワーカー！ 」。サービスワーカーを登録することで、基本的にブラウザーにサービスワーカーへの指示としてsw.jsを使用するように指示し、次に新しいサービスワーカーをサイトに関連付けます。

ここで、 sw.jsに戻り、次のコードを追加します。

 // sw.js
self.addEventListener（ "fetch"、event => {
    console.log（"フェッチしました"+ event.url）;
}）;

このコードは、今後の操作に不可欠なEventListenerを追加します。実際、Chromeを含む多くのブラウザでは、 fetchリスナーが登録されていない限り、PWAをインストールできません。

上記のコードのaddEventListenerには、リッスンするイベントとイベントオブジェクトを受け取るコールバックの2つの引数があります。このイベントが発生すると、サービスワーカーは、ウェブサイトのHTML、CSS、JS、オーディオ、画像のリクエスト、およびAPIや他のウェブサイトへのその他のリクエストを含むfetchイベントのリッスンを開始します。

SimiCartサービスワーカー — *サービスワーカーは、ChromeDevToolsを使用して確認できます*

リソースのキャッシュ

PWAをオフライン対応にするために、サービスワーカーはコンテンツの提供に一部を支払いますが、ページのリソースもキャッシュする必要があります。

ページのリソースをキャッシュするには、キャッシュストレージに制限があるため、最初にキャッシュストレージのサイズを計画する必要があります。

キャッシュストレージの制限

ブラウザごとに、キャッシュストレージを処理する方法が異なります。ただし、ほとんどすべてのサイトでキャッシュストレージのサイズに制限があります。この制限により、Amazonなどの大規模で肥満のサイトがサービスワーカーを使用してストア全体をキャッシュしないことがよくあります。

現在、この制限はエンドユーザーのデバイスに依存しているため異なります。ただし、通常は、ユーザーの最大ディスク容量の約20％である必要があります。詳細については、以下のグラフまたはプログレッシブウェブアプリのオフラインストレージに関するGoogleの公式ガイドを参照してください。

このキャッシュストレージの制限がなくなったので、次に実際にリソースをキャッシュします。

ページのリソースをキャッシュするには、保存するすべてのアセットを含むグローバル配列が必要です。

 / * 
  これが私たちがキャッシュに保存したいすべてのものです。
  アプリがオフラインで動作する/インストール可能であるためには、
  画像だけでなく、HTML、JS、CSSも保存する必要があります
  同様に-オフライン時に使用したいものは何でも。
* /
const ASSETS = [
    "https://i.imgur.com/Kbkqr2n.png"、
    "https://i.imgur.com/lgLaG0x.png"、
    "https://i.imgur.com/0iL8mxP.png"、
    "https://i.imgur.com/KDsdYeS.png"、
    "https://i.imgur.com/mK50fqL.png"、
    "https://i.imgur.com/KYGH2Qa.png"、
    "/style.css"、
    "/index.html"、
    "/offline.html"、
    「/」
];

これは、オフラインで使用したいすべてのものが保存される場所です。上記の例では、最初のいくつかの画像は、さまざまなSimiCartのロゴが保存されているImgurへのパスです。

この手順で、オフラインで使用するために必要なリソースのリストの準備が整いました。 ServiceWorkerを使用してそれらをキャッシュしましょう。

sw.jsの上部にこのトップを追加します。

 // sw.js

cache_name = "SimiCart"; //キャッシュを識別するために使用される文字列

self.addEventListener（ "install"、event => {
    console.log（ "インストール中..."）;
    event.waitUntil（
        キャッシュ
            .open（cache_name）
            .then（cache => {
                cache.addAll（assets）;を返します。
            }）
            .catch（err => console.log（err））
    ）;
}）;

基本的に、このコードは、キャッシュを待機するようにブラウザーに指示しますwaitUntil()呼び出しを使用）。

キャッシュAPI、特にaddAll()を使用することで、アセットの配列をキャッシュに簡単に追加して、サービスワーカーがすぐに利用できるようにすることができます。まあ、考え直してみると、それはそれほど準備ができていません。 fetchイベントハンドラーを少し変更する必要があります。

これが今のようになります：

 self.addEventListener（ "fetch"、event => {
    if（event.request.url === "https://www.simicart.com/"）{
        //またはアプリのURLが何であれ
        event.respondWith（
            fetch（event.request）.catch（err =>
                self.cache.open（cache_name）.then（cache => cache.match（ "/ offset.html"））
            ）。
        ）;
    } そうしないと {
        event.respondWith（
            fetch（event.request）.catch（err =>
                caches.match（event.request）.then（response => response）
            ）。
        ）;
    }
}）;

上記のコードで、アプリがオフラインの場合でもリソースをキャッシュしようとしていることが明確になっているはずです。ロジックは次のとおりです。

まず、アプリはリソースをオンラインで取得しようとし、そのフェッチが失敗した場合はキャッシュされたリソースで応答します（ respondWith()を使用）。
respondWith()内で、 fetch(event.request)を呼び出してネットワークからリソースをフェッチしようとします。フェッチはPromiseベースであるため、 Promiseはネットワークへの接続に失敗した場合に拒否し、 catch()ステートメント。
catch()ステートメントでは、キャッシュされたリソースを呼び出す場所です。

以上です。これで、PWAがオフラインで作業できるようになります。とても簡単ですね。

結論

テクノロジーの世界では物事は非常に速く進んでおり、PWAに変換したり、オフライン機能などの重要な機能をPWAに統合したりするのを待つ時間が長くなるほど、あなたとあなたのビジネスの機会費用は大きくなります。

それでも、SimiCartなど、あらゆるニーズに対応できるソリューションプロバイダーはいつでもすぐに利用できます。偶然にも、あなたがオンラインマーチャントであり、万能で完璧なMagento PWAソリューションを探しているなら、あなたは適切な場所にいます。私たちは、PWAとネイティブアプリに関する5年以上の専門知識を持つ、MagentoeコマースWebサイトの既知のソリューションプロバイダーです。

SimiCartでPWAをカスタマイズする