Я хочу протестувати службовців, але у мене налаштований віртуальний хост, і я, здається, не можу ввімкнути https на localhost.
Як я можу додати в білий список свою локальну віртуальну хост-адресу для тестування службовців, коли я намагаюся зареєструватися для службовця на localhost? Chrome каже, що https потрібен, щоб увімкнути службовця. Як я можу подолати це обмеження принаймні для місцевого тестування.
Відповіді:
Взагалі, вам потрібно обслуговувати як свою сторінку, так і сценарій службовця через HTTPS, щоб використовувати службовців. Обгрунтування описано в статті Віддайте перевагу безпечному походженню для нових потужних можливостей .
Існує виняток із вимоги HTTPS, яка полегшує локальний розвиток: якщо ви отримуєте доступ до своєї сторінки та сценарію службового працівника через http://localhost[:port]або через http://127.x.y.z[:port], тоді працівники служби повинні бути ввімкнені без подальших дій.
В останніх версіях Chrome ви можете обійти цю вимогу під час локальної розробки за допомогою chrome://flags/#unsafely-treat-insecure-origin-as-secure, як пояснюється у цій відповіді .
Firefox пропонує подібну функціональність через devtools.serviceWorkers.testing.enabledналаштування.
Зверніть увагу, що ця функціональність призначена лише для полегшення тестування, яке інакше не могло б відбутися, і ви завжди повинні планувати використання HTTPS під час обслуговування робочої версії вашого сайту. Не просіть реальних користувачів проходити кроки ввімкнення цих прапорів!
devtools.serviceWorkers.testing.enabled.
Якщо ви хочете налагодити підключеного службовця служби мобільного пристрою для реального тестування поведінки прогресивного веб-додатка, параметри запуску ssl chrome не допомагають, і вам точно не потрібно купувати сертифікати.
@ chris-ruppel згадав про встановлення проксі-програмного забезпечення, але насправді існує простіший спосіб використання переадресації портів :
Припускаючи, що ви підключаєте та налагоджуєте пристрій за допомогою Chrome:
Після цього ви можете зателефонувати за URL-адресою " http: // localhost: 8080 " на своєму мобільному пристрої, і на нього відповість "localhost: 80" на вашому фактичному ПК / тестовому сервері . Ідеально працює з сервісними працівниками, ніби це ваша локальна машина, що працює на вашому мобільному телефоні.
Працює також для переадресації декількох портів та різних цільових доменів, якщо ви пам'ятаєте використовувати непривілейовані порти на своєму мобільному пристрої. Дивіться знімок екрана:
Джерелом цієї інформації є документація до віддалених пристроїв Google: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (але станом на квітень 2017 року не дуже зрозуміло читати це проста відповідь)
Я часто хочу налагодити та протестувати на реальному пристрої. Один із методів, який я придумав, включає маршрутизацію мережевого трафіку телефону через Чарльза Проксі під час локальної розробки. На відміну від усіх рішень для Chrome, це працює з будь-яким браузером на вашому телефоні.
localhostна моєму мобільному пристрої тепер дозволяє зареєструвати та протестувати Сервісного працівника.У моєму випадку найпростішим способом перевірки pwa було використання ngrok. https://ngrok.com/download увійдіть, отримайте ur маркер та встановіть його!
Під час запуску ./ngrok http {your server port}обов’язково використовуйте https, який буде показаний у терміналі після запуску цієї команди вище.
Ви також можете використовувати https://surge.sh , це для розміщення статичної веб-сторінки, якщо ви зайдете сюди: https://surge.sh/help/securing-your-custom-domain-with-ssl зможе подивіться, як налаштувати сертифікат ssl
Як згадував Джефф у першій відповіді, вам не потрібні https на рівні localhost для тестування працівників служби. Службовці реєструватимуться і працюватимуть чудово, доки ви отримуєте доступ до домену localhost - без HTTPS.
Після того, як ви перевірите свою програму на localhost, і ви захочете побачити, як вона працює з https по-справжньому, найпростішим підходом буде завантаження програми на GitHub. Ви можете безкоштовно створити загальнодоступне надбання (і за допомогою HTTPS!).
Ось інструкції: https://pages.github.com/
Якщо ви хочете протестувати службовців на клієнтському пристрої, який не може запустити веб-сервер на localhost, загальний прийом такий:
Але це простіше сказати, ніж зробити. У листопаді 2016 року AMA на Reddit, представник Let's Encrypt визнав, що HTTPS у приватній локальній мережі "є справді складним питанням, і я думаю, що дотепер ніхто не запропонував задовільної відповіді".
Поширені способи присвоєння вашому комп'ютеру імені хосту включають надання стабільної внутрішньої IP-адреси, а не тієї, яка змінюється щодня або кожного разу, коли ви включаєте пристрій Інтернет-шлюзу. Вам потрібно буде налаштувати DHCP-сервер у вашій мережі, як правило, у вашому шлюзі, щоб встановити "резервування", яке пов'язує певну приватну адресу (зазвичай в межах 10/8або 192.168/16) з MAC-адресою Ethernet-картки вашої робочої станції розробки. Для цього прочитайте посібник вашого шлюзу.
Тепер, коли ваша робоча станція розробника має стабільну IP-адресу, існує компроміс між часом і грошима. Якщо ви бажаєте вивчити вдосконалене використання DNS та OpenSSL та встановити кореневий сертифікат на всіх пристроях, з якими ви плануєте тестувати:
Якщо ви не можете додати кореневий сертифікат або керувати локальним DNS, наприклад, якщо ви плануєте тестувати на пристроях, що належать іншим (BYOD), або з більш заблокованими браузерами, які не дозволяють користувачам додавати надійні кореневі сертифікати, такі як основні відеоігрових консолей, вам знадобиться повністю кваліфіковане доменне ім’я (FQDN):
A запис на приватну IP-адресу робочої станції розробника. Це надає вашій робочій станції розробки повне доменне ім’я.dns-01виклик, щоб отримати сертифікат для цього FQDN від центру сертифікації Let's Encrypt.Я думаю, що найпростіший спосіб перевірити працівника служби - це знайти безкоштовного провайдера хостингу. в наш час існує безліч сайтів, що пропонують безкоштовний хостинг. Ви можете легко розмістити свій додаток на цих безкоштовних серверах.
Я переважно використовую героку та netlify . це безкоштовно та просто у використанні.