ServiceWorker登録
if (“serviceWorker” in navigator) {
// 既定のスコープを使用して、
// サイトのルートに置かれているサービスワーカー(ws.js)を登録します。/は必要
navigator.serviceWorker.register(“/sw.js”).then(
(registration) => { console.log(“サービスワーカー登録成功:”, registration);
},
/*catch*/ (error) => {
console.error(`サービスワーカー登録失敗: ${error}`);
}, );
} else {
console.error(“サービスワーカーに対応していません。”);
}
Service worker ファイル 参照サイトapp.js の最初のコードブロックは、以下の通りです。これは、サービスワーカーを使用するためのエントリーポイントです。
const registerServiceWorker = async () => {
if (“serviceWorker” in navigator) {
try {
const registration = await navigator.serviceWorker.register(“/sw.js”, {
scope: “/”, });
if (registration.installing) {
console.log(“Service worker installing”);
} else if (registration.waiting) {
console.log(“Service worker installed”);
} else if (registration.active) {
console.log(“Service worker active”);
}
} catch (error) {
console.error(Registration failed with ${error});
}
}
};
// …
registerServiceWorker();
ServiceWorkerの書き方
const addResourcesToCache = async (resources) => {
const cache = await caches.open(“v1”);
await cache.addAll(resources);
};
self.addEventListener(“install”, (event) => {
event.waitUntil(
addResourcesToCache([
“/”,
“/index.html”,
“/style.css”,
“/app.js”,
“/image-list.js”,
“/star-wars-logo.jpg”,
“/gallery/bountyHunters.jpg”,
“/gallery/myLittleVader.jpg”,
“/gallery/snowTroopers.jpg”,
]),
);
});
PWAに関連するリンク
pwaの作成でServiceeWorkerの登録するscriptの書き方 ⇒ 参照ページ
サービスワーカーを使い始めるための情報
Offline_and_background_operation オフライン操作とバックグラウンド処理
PWA実装 #React – Qiita
【イラスト付き】Servie Worker API【利用方法】
PWA manifest.jsonに関すること。manifest.jsonでRicher PWA install UI wo’nt be avaialbe on desktop. Please add at least one screenshot for which form factors is not set or set to a value other than wide.という警告がでていた。
Enabling Richer PWA Install UI on Desktop — Amit Merchant — A blog on PHP, JavaScript, and more