Даденият пример е с препратка от https://googlechrome.github.io/samples/service-worker/basic/. Това е просто ръководство, за да започнете с service worker за страницата на вашия профил в GitHub.

Какво прави Service Worker?

  • Предварително кешира HTML, JavaScript и CSS файловете, необходими за показване на тази страница офлайн. (Опитайте, като презаредите страницата без мрежова връзка!)
  • Почиства предварително кешираните записи, когато името на кеша се актуализира.
  • Прихваща мрежовите заявки, връщайки кеширан отговор, когато е наличен.
  • Ако няма кеширан отговор, извлича отговора от мрежата и го добавя към кеша за бъдеща употреба.

Нека да започнем

  1. Създайте акаунт в GitHub, посетете https://pages.github.com/ и следвайте стъпките за създаване на сайта.

2. След като вашият сайт бъде създаден, уверете се, че SSL е активиран на сайта, тъй като `navigator.serviceWorker` няма да работи без SSL.

2. Подгответе страницата на вашия профил

3. Добавете service-worker.js към хранилището

4. Добавете поддръжка за service worker към вашия index.html точно преди вашия краен body таг.

5. Проверете в браузъра дали офлайн режимът работи или не. Проверете сайта си в Chrome и отидете в раздела Application и изберете Service Workers от лявото меню. Проверете дали service-worker.js е регистриран или не. поставете отметка в квадратчето за офлайн и опреснете страницата, за да проверите офлайн версията на страницата.

6. Извършете и натиснете вашите промени, за да видите дали username.github.io работи в офлайн режим.

Не забравяйте винаги да добавяте вашите ресурси към service-worker.js, за да активирате функционалността в офлайн режим. Тази опция позволява огромни възможности за създаване на прогресивно уеб приложение (PWA). За да накарате сайта си да работи като приложение, подгответе вашите JavaScript файлове да използват localStorage вместо API извиквания, за да активирате интерактивност дори когато сте офлайн и по-късно, поддържайте сървъра за данни в синхрон с localstorage.

Моля, клонирайте GitHub repository, за да научите повече и да отстраните грешки в настройката.

Краен резултат

Вижте работещия пример на адрес https://grvsooryen.github.io/

Първоначално публикувано в wantsonline.blogspot.com.