Наш подписчик во ВКонтакте поделился небольшим PWA-приложением, которое будет полезно тем, кто изучает веб-разработку.

Fylik — приложение, которое позволяет обмениваться файлами. Для это не нужно регистрироваться, обмен файлами полностью анонимный, а все загруженные файлы доступны на главной странице: https://fylik.ru

У Fylik открытый REST API и на нём можно тренироваться в написании клиентов под разные ОС и интеграции приложения с другими сервисами. А ещё можно покопаться в открытых исходниках клиентской и серверной частей проекта на GitHub.

Клиент: https://github.com/imilleriks/fylik-client
Сервер (API): https://github.com/imilleriks/fylik-server

Если хотите, чтобы о вашем проекте мы тоже рассказали, то пишите о нём в специальном обсуждении ВКонтакте либо просто кидайте в предложку или сообщения паблика: https://vk.com/tproger_web

#pwa

⁠Хуки в React

В последней версии React 16.8 появились хуки, цель которых — упростить процесс разработки компонентов.

Хуки позволяют переиспользовать шаблонный код, разбить один компонент на несколько маленьких функций по их назначению, а не на основе методов жизненного цикла. Также с их помощью можно использовать больше возможностей React без написания классов.

В официальной русскоязычной документации React есть раздел, посвящённый хукам. Там есть правила и примеры использования готовых хуков, пример создания кастомных и ответы на популярные вопросы по теме: https://ru.reactjs.org/docs/hooks-faq.html#which-versions-of-react-include-hooks

А чтобы закрепить тему на настоящей практике, рекомендуем статью, в которой разрабатывается чат с использованием хуков React: https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/

#reactjs #pwa

Есть ли у вас какая-нибудь идея приложения, которую вы постоянно откладываете? Возможно, вам не хватает мотивации? Тогда почитайте статью, в которой веб-разработчик рассказывает, как он за пару дней написал инструмент для форматирования кода.

Подробно описал процесс проектирования приложения, его разработку, используемые инструменты и библиотеки: https://css-tricks.com/how-i-created-a-code-beautifier-in-two-days/

А если хотите просто посмотреть на инструмент, то переходите сюда: https://www.surrealcms.com/beautify/

#фронтенд #pwa #vue

Подробный гайд по созданию PWA-приложения про кофе с использованием HTML, CSS и JavaScript:

https://tprg.ru/8zVw

#фронтенд #pwa

Как оптимизировать PWA

Благодаря тому, что прогрессивные веб-приложения не нужно скачивать, а работать они могут как онлайн, так и без доступа в интернет, их популярность всё больше растёт.

В этой статье рассматриваются способы оптимизации PWA, которые позволят приложению загружаться быстрее, работать стабильнее в офлайн режиме, повысить привлекательность для пользователей и не только:

https://tprg.ru/5YMq

#pwa

​Прогрессивные веб-приложения в 2021 году

Mozilla отказывается от прогрессивных веб-приложений, а Apple старается лишний раз не вспоминать о них. При этом появляются новые решения, позволяющие быстро создавать такие приложения, и многие компании их используют. Так какие перспективы у PWA в этом году?

В этой статье автор постарался разобраться в этом вопросе, изучив его с различных сторон:

https://tprg.ru/jSpm

#pwa

​Разработка PWA с поддержкой распознавания лица и голоса

Благодаря технологии PWA современные сайты уже способны заменить некоторые стандартные мобильные и десктопные приложения. А с возможностью добавить поддержку распознавания лица и голоса отличий от привычных приложений становится ещё меньше.

Как добавить такую возможность — в статье:

https://tprg.ru/VRgX

#pwa

​Ваше PWA-приложение может сломаться в августе 2021 года

Дело в том, что в Chrome 93 и Edge 93 меняются критерии, допускающие установку такого приложения.

О причинах такого решения, последствиях и способах решения читайте в статье:

https://tprg.ru/WNp0

#pwa

​Превращаем устанавливаемые сайты в настоящие приложения

Прогрессивные веб-приложения стирают границы между приложениями и веб-сайтами. Они сочетают в себе как возможности сайтов, так и работу в автономном режиме, чтение файлов и так далее.

Но отличить PWA от полноценной программы можно легко по внешнему виду, точнее по верхней полоске окна, выдающей браузерное происхождение программы. Хотя так было раньше, теперь мы можем избавиться от него, оставив только классические три кнопки в углу окна.

О том, как это сделать, узнаете в статье:

https://tprg.ru/E7Uc

#pwa

​Превращение страницы GitHub в прогрессивное веб-приложение

Благодаря этой небольшой инструкции вы сможете превратить свой сайт в GitHub Pages в PWA приложение:

https://christianheilmann.com/2022/01/13/turning-a-github-page-into-a-progressive-web-app/

#github #pwa

​7 проблем создания прогрессивных веб-приложений

PWA работает в четыре раза быстрее, чем обычные веб-сайты. Тем не менее, есть некоторые общие проблемы при его создании. Давайте рассмотрим их вместе, чтобы заранее быть готовыми к их устранению:

https://dzone.com/articles/7-challenges-to-creating-your-ecommerce-shops-pwa

#pwa

​Создание прогрессивного веб-приложения с помощью Django и Angular

Прогрессивные веб-приложения (PWA) — это веб-приложения, которые используют различные методы проектирования и технологии, чтобы выглядеть и вести себя как обычные мобильные или настольные приложения.

В этом руководстве предлагается создать простую викторину в виде PWA, которая сочетает в себе лучшие аспекты как веб-приложений, так и нативных приложений, используя Python и Django для серверного API и Angular с TypeScript для внешнего интерфейса:

https://www.twilio.com/blog/build-progressive-web-application-django-angular-part-1-backend-api

#pwa #django #angular

​Как запустить мобильное приложение за три недели с помощью PWA?

PWA — промежуточная технология между сайтами и нативными мобильными приложениями. По сути, это «прокачанная» копия веб-сайта, размещенная на устройстве пользователя и не требующая отдельной разработки для iOS или Android.

Какие задачи решают PWA-приложения, есть ли у них ограничения и почему Frontend-разработчики справляются с PWA-разработкой лучше других. Читайте в статье: https://tproger.ru/articles/kak-zapustit-mobilnoe-prilozhenie-za-tri-nedeli-s-pomoshhju-pwa/

В конце материала — инструкция по интеграции прогрессивного веб-приложения в сайт.

#pwa #фронтенд

​Превращаем сайт на Django в PWA-приложение

Верстать веб-страницы не так уж сложно, разместить сайт на сервере тоже не самая сложная задача. Но давайте пойдём дальше и, несколько усложнив себе задачу, сделаем не просто сайт, а полноценное приложение на примере Django-проекта! Фронт есть, бэк — тоже. Так что дело за малым, добавляем необходимый код к тому, что уже имеется и всё готово.

Подробнее:

https://habr.com/ru/post/682790/

#django #pwa

​Как запустить мобильное приложение за две недели с помощью PWA

В статье рассказывается, какие задачи решают PWA-приложения, есть ли у них ограничения и почему Frontend-разработчики справляются с PWA-разработкой лучше других. В конце материала — инструкция по интеграции прогрессивного веб-приложения в сайт.

#pwa

​​​​Apple тестирует отключение PWA для Европы в новом обновлении iOS

Недавно в Евросоюзе вступил в силу закон, который заставляет Apple добавить сторонние магазины приложений на iOS. В ответ Apple представила новые условия для разработчиков, которые вроде и не нарушают закон, но как будто извращают его.

Во-первых, это конские комиссии. Во-вторых, это возможное ограничение progressive web apps (PWA). Это веб-сайты, которые благодаря современным браузерам могут быть практически неотличимы от нативных приложений.

Такие PWA компания изначально не контролирует. Например, из-за санкций Apple удалила мобильные приложения многих банков из AppStore, но PWA помог решить эту проблему и банки запустили полноценные веб-копии нативных приложений.

В последней бете iOS 17.4 разработчики нашли доказательства того, что компания тестирует отключение их работоспособности для европейских пользователей. То есть теперь такие приложения работать перестанут. Прогрессивные веб-приложения будут открываться в браузере, они не смогут присылать уведомления и хранить локальные данные.

#pwa

Разница между SPA и PWA

Мы часто сталкиваемся с терминами SPA (Single Page Application) и PWA (Progressive Web App). Давайте разберемся, что они означают и в чем их основные отличия.

SPA — это веб-приложение, которое загрузится однажды и будет динамически обновлять контент на странице без необходимости перезагрузки. Это значит, что после начальной загрузки сайта пользователю не нужно ожидать, пока загрузится новая страница. Все взаимодействия происходят на одном HTML-документе, что делает работу с приложением более плавной и быстрой. Примеры SPA: Gmail, Google Maps.

Для создания простого SPA можно использовать библиотеки или фреймворки, такие как React или Vue.js. Вот небольшая структура на React:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
            <p>Это простое SPA приложение.</p>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

PWA — это приложение, которое использует возможности современных веб-технологий, чтобы обеспечить пользователям функциональность, схожую с нативными приложениями. PWA могут работать офлайн, отправлять push-уведомления и устанавливаться на устройство как обычные приложения. Это достигается с помощью таких технологий, как service workers и манифест приложения.

Для создания простого PWA вам нужно добавить файл манифеста и service worker. Пример манифеста:

{
    "name": "Мое PWA приложение",
    "short_name": "PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Основные отличия:

1. SPA нацелено на улучшение пользовательского опыта за счет динамической загрузки данных, в то время как PWA — на создание полноценного приложения, доступного на разных устройствах и с функциональностью, как у нативных приложений.

2. SPA может быть частью PWA. PWA включает все возможности SPA и добавляет дополнительные функции, такие как работа в офлайн-режиме, установка на устройство и поддержка push-уведомлений.

3. SPA чаще всего использует JavaScript-библиотеки и фреймворки (React, Angular, Vue), тогда как PWA требует дополнительных технологий, таких как сервисные работники и манифесты.

#простымисловами #spa #pwa

Разрабатываем PWA. Полная инструкция по работе с Web App Manifest и Service Worker

Пошаговое руководство о том, как превратить обычное веб-приложение в прогрессивное (PWA) с помощью настройки Web App Manifest и Service Worker​.

#pwa