Merge pull request #49 from DeOwl/patch-1

Added Vite PWA and https

Author: iu5git

Diff for: tutorials/pwa/PWA.md

@@ -191,7 +191,132 @@ self.addEventListener('fetch',() => console.log("fetch"));
 
 Нажимаем `Добавить на главный экран`. Готово - иконка должна появиться на рабочем столе.
 
-## 3. Добавление адаптивности
+### Vite PWA
+
+При работе с Vite так же существует более простой способ настройки PWA - библиотека vite-plugin-pwa.
+Во-первых, необходимо установить библиотеку с помощью команды:
+
+```shell
+npm install -D vite-plugin-pwa
+```
+После этого необходимо настроить библиотеку в `vite.config.ts`
+```ts
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    VitePWA({ registerType: 'autoUpdate' })
+  ]
+})
+```
+На данном этапе если вы развернете приложение на Github Pages или запустите его в режиме preview, то вы увидите работающий manifest.json, но его не будет при запуске в режиме dev.
+Это происходит потому, что по умолчанию VitePWA не работает в режиме разработчика. Для того чтобы это исправить, можно добавить данное поле VitePWA в `vite.config.ts`
+```ts
+VitePWA({
+  registerType: 'autoUpdate',
+  devOptions: {
+    enabled: true,
+  },
+})
+```
+
+Теперь, у нас есть и manifest, но при этом manifest, отображаемы на сервера — это созданный по умолчанию manifest, а не тот, который мы создали выше. Для указания собственного manifest его надо прописать как отдельное поле VitePWA в `vite.config.ts`
+```ts
+VitePWA({
+  registerType: 'autoUpdate',
+  devOptions: {
+    enabled: true,
+  },
+  manifest:{
+    name: "Tile Notes",
+    short_name: "Tile Notes",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#fdfdfd",
+    theme_color: "#db4938",
+    orientation: "portrait-primary",
+    icons: [
+      {
+      	"src": "/logo192.png",
+      	"type": "image/png", "sizes": "192x192"
+      },
+      {
+      	"src": "/logo512.png",
+      	"type": "image/png", "sizes": "512x512"
+      }
+    ],
+  }
+})
+```
+Теперь перейдем к Service Worker. в vite-plugin-pwa уже есть работающий Service Worker который также производит кеширование, в отличие от прописанного нами. Данный Service Worker при запуске Github Pages вы можете увидеть, но он не будет active. Для того чтобы он заработал, нам нужно его зарегистрировать. 
+Для этого перейдем в `main.tsx` и зарегистрируем Service Worker.
+
+Подключим registerSW:
+```ts
+import {registerSW} from "virtual:pwa-register";
+```
+И после кода, где мы подключили наше приложение, пропишем:
+```ts
+if ("serviceWorker" in navigator) {
+  registerSW()
+}
+```
+На данном этапе настройка Service Worker закончена, и при запуске build на Github Pages можно будет увидеть и Mainfest.json и Service Worker. Убедительно проверьте, что в Manifest нет ошибок, которые могли бы повлиять на установку PWA. Эти ошибки отмечены во вкладке Manifest в отдельной группе. Если ошибок нет, то после скачивание PWA вы должны иметь возможность перейти в авиарежим и при этом приложение все еще будет работать, даже если его закрыть и открыть снова.
+
+Важно! Если при импортировании registerSW появляется ошибка об отсутствии модуля, необходимо перейти в `tsconfig.app.json ` и в `CompilerOptions` добавить:
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "vite-plugin-pwa/info.d.ts",
+      "vite-plugin-pwa/client.d.ts"
+    ],
+```
+
+Однако, как вы могли заметить, при запуске где-либо кроме Github Pages, Service Worker либо вообще не запускается, либо выдает ошибку `The script has an unsupported MIME type ('text/html').`
+В дополнение к этому, на вашем телефоне (если у вас Android) не будет возможности скачать PWA по ip адрессу. 
+
+Обе эти ошибки связаны с тем, что для работы PWA сайт должен работать по протоколу https, а не http. Как настроить сайт для работы с https рассмотрим ниже.
+## 3. Настройка https на React
+
+Для того, чтобы сайт работал по протоколу https он должен иметь сертификат. Данные сертификаты подтверждаются несколько одобренных компаний за небольшую сумму, но для нас будет достаточно автоматически сгенерированного локально подтвержденного сертификата.
+
+Для работы с сертификатами, во-первых, установим модуль mkcert
+```shell
+npm install mkcert
+```
+После этого нам нужно создать Authority которая будет подтверждать наш сертификат. Сертификаты, подтвержденные данным образом, реально работают только при работе на localhost. 
+
+После создания Authority необходимо создать сам сертификат. Для этого использует команды:
+```shell
+mkcert create-ca
+mkcert create-cert
+```
+
+После выполнения данных команд у вас появится 4 новых файла: ca.crt, ca.key, cert.crt, cert.key.
+
+
+`ca.crt` и `cert.crt` - это публичные ключи Authority и сертификата соответственно, а ca.key и cert.key - приватные ключи. 
+
+##### Никогда не выкладывайте частные ключи в общий доступ, даже на GitHub!
+
+После создания данных ключей остался один шаг - настроить `vite.config.ts`, перед началом установив `vite-plugin-mkcert` и `@types/node`:
+```ts
+import mkcert from 'vite-plugin-mkcert'
+import fs from 'fs';
+import path from 'path';
+
+server:{
+  https:{
+    key: fs.readFileSync(path.resolve(__dirname, 'cert.key')),
+    cert: fs.readFileSync(path.resolve(__dirname, 'cert.crt')),
+  },
+}
+```
+После добавления данного кода, вы можете открыть ваш сервер по вашему основному ip(не localhost и не vpn) и увидеть, что Service Worker подключён.
+
+
+## 4. Добавление адаптивности
 Зачем это нужно? Адаптивность помогает вашему веб-приложению нормально выглядить на устройствах с разными размерами экрана, а также влияет на продвижение сайта в поисковых системах. Сделать это можно c помощью использования относительно новых моделей макета (flexbox, grid), а так же через media queries в css. [Здесь](https://ru.hexlet.io/courses/css-adaptive/lessons/media-queries/theory_unit) можно почитать про последние.
 
 ### Практические примеры:
@@ -576,4 +701,4 @@ export const Navbar = () => {
 
 ![](./assets/13.png)
 
-[vite-gh-pages]: https://rashidshamloo.hashnode.dev/deploying-vite-react-app-to-github-pages
+[vite-gh-pages]: https://rashidshamloo.hashnode.dev/deploying-vite-react-app-to-github-pages