Ruby on Rails で Service Worker を設定する

Webworkers は HTML5 の最も有望な未来です。Rails アプリを準備しましょう。

サービス ワーカーは、Web ページとは別にブラウザーがバックグラウンドで実行するスクリプトであり、Web ページやユーザーの操作を必要としない機能への扉を開きます。

サービス ワーカーは、Web ページとはまったく異なるコンテキストでバックグラウンドで実行される分離されたブラウザー スレッドであるため、DOM、ウィンドウ、またはドキュメント オブジェクトにアクセスできません。

私たちはこれまで、Pasilobus アプリで Service Workers をしばらく使用してきました。Service Workers を使用すると、ブラウザ レベルでサーバーからのリクエストをインターセプトしてさまざまなアクションをトリガーしたり、アプリのキャッシュ バージョンを提供したりすることができ、ユーザーが切断されることがなくなります。

サービス ワーカーはバックグラウンド同期も可能にするため、インターネット接続が失われた場合でも、サービス ワーカーを使用することで、アプリは引き続きデータを処理し、接続が復元されるとすぐにサーバーに同期することができます。

Railsアプリにサービスワーカーを追加するのは簡単です。コントローラーの作成を始めましょう。

 class ServiceworkerController < ApplicationController
 layout false

 def service_worker
 end
 end

次に、サービスワーカーのルートを追加しましょう

# Service Worker 
'/service-worker.js' を取得します => "serviceworker#service_worker"

サービスワーカーを呼び出すには、アセットパイプラインにスクリプトを追加する必要があります。Rails 6 を使用している場合は、これを webpack および javascript フォルダーに追加する必要があります。

 # javascript/src/service_worker.js

 // Use feature-detection to check for ES6 support.
 function browserSupportsES6() {
 try { eval("var foo = (x)=>x+1"); }
 catch (e) { return false; }
 return true; 
}

 // ブラウザがES6をサポートしている場合にのみサービスワーカーを使用します。
 // Cache API ともちろん Service Workers 自体。
 if (browserSupportsES6() && ('caches' in window) && ('serviceWorker' in navigator)) {
 navigator.serviceWorker.register('/service-worker.js', { スコープ: '/' })
 .then(関数(reg) {
 //console.log('サービスワーカーの登録が成功しました!');
 }).catch(関数(エラー) { 
//console.log('サービスワーカーの登録に失敗しました: ' + error);
 });
 }
 

 # javascript/packs/application.js

 import "src/service_worker.js"

これにより、ユーザーがブラウザでアプリを開くとすぐにサービス ワーカーが登録されます。

そしてもちろん、実際のワーカーのビューファイルを作成します

# views/serviceworker/service_worker.js.erb

 var CACHE_VERSION = 'v1'; 
var CACHE_NAME = CACHE_VERSION + ':sw-cache-APPNAME';


関数 onInstall(イベント) {
 // console.log('[Serviceworker]', "インストール中!", イベント);
イベント.waitUntil()
 caches.open(CACHE_NAME).then(function prefill(cache) {
キャッシュを返します。addAll([
 '<%= asset_pack_path 'application.js' %>',
 '<%= asset_pack_path 'application.css' %>', 
'/オフライン.html'
 ]);
 })
 );
 }

 self.addEventListener('インストール', onInstall);

このシンプルなワーカーには、インストール イベントでトリガーされる関数が含まれており、接続が失われたときにユーザーに提供されるアセットと offline.html サンプル ページをキャッシュするようにブラウザに指示します。

また、offline.htmlファイルも追加しましょう。

 # views/errors/offline.html.erb
 
<h1>こんにちは、私はサービスワーカー.js によって提供されるページです<h1>

サービスワーカーは一定期間後に期限切れになるため、ファイルを変更すると、ブラウザはサービスワーカーを自動的に更新します。

サービス ワーカーを使用して開発する場合、作業の妨げにならないようにブラウザーで無効にしてください。

これで完了です。ワーカーの使用を開始し、ユーザー向けにカスタムのオフライン警告ページを提供しましょう。