Как я устал вручную писать сервис-воркеры и сделал next-pwa-pack, чтобы больше не страдать

Сколько лет уже кто-то говорит: «А можно, чтобы оно работало без интернета и ставилось на домашний экран?» И каждый раз после этой фразы начинается медленный спуск в персональный ад — ты лезешь в документацию по PWA, где всё разваливается на ровном месте, service worker живёт своей жизнью, кеш то работает, то ломается, App Router рушит весь твой кастомный пайплайн, а пользователи сидят на старых версиях, потому что вручную обновлять им, конечно, влом. Словом, если ты когда-то пробовал прикрутить оффлайн-режим к Next.js-проекту, ты наверняка вспоминал всех, кто придумал этот стек. Я — точно. Поэтому, как человек, у которого было слишком много кофе и слишком мало терпения, я сделал единственное разумное: написал свою обёртку. Так и появился next-pwa-pack — дроп-ин пакет, который превращает любой Next.js-проект в полноценное PWA, буквально одной строкой. Да, даже с App Router. Просто заворачиваешь свой layout в PWAProvider, и всё: приложение можно установить, оно кэширует страницы, работает оффлайн, синхронизирует вкладки и даже показывает отладочную панель, чтобы не гадать, сработало ли что-нибудь. Воткнул — и живи дальше. А то: Сервис-воркер? Напиши вручную. Кешировать HTML? Сам придумай как. Синхронизация вкладок? Ну это уже магия, удачи. Обновление кеша после деплоя? Ну ты ж senior, сам справишься. 🤡 И ты сидишь, как идиот, с 300 вкладками про Workbox, cache-first , network-only , костылями из Stack Overflow 2019 года, и потеешь. Если раньше каждый запрос «сделай оффлайн» вызывал у меня флэшбэк на тему next-pwa, неподдерживаемых версий, кривого кеша и плясок с бубном вокруг обновлений — теперь всё это ушло. Я хотел простой setup, который просто работает: предзагрузка, нормальные TTL, понятное обновление и синхронизация. Без фокусов, без багов, без “подожди, сейчас DevTools открою”. Погнали дальше!

https://habr.com/ru/articles/935024/

#nextjs #progressive_web_apps #app_router #serviceworker #reactjs #react

There's now an #IPFS #ServiceWorker Gateway that supports subdomain resolution!

👉 To make content on the IPFS network accessible in a web #browser, you need a #HTTP gateway. This one automatically adds a service worker, speeding up subsequent access and improving #decentralization:

https://inbrowser.link/

Here's a link to my "How to host static websites on IPFS" #howto using it:

https://ipfs--howto-data0-one.ipns.inbrowser.link/

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

Привет! Меня зовут Сергей Васильев, я фронтенд-разработчик в AGIMA . Наша команда часто работает с PWA — прогрессивными веб-приложениями. Они стали особо популярны в последние три года, когда из-за санкций некоторым корпорациям пришлось отказаться от мобильных приложений. Но и раньше многие компании с интересом смотрели на это решение. Ниже расскажу, как сделать из обычного веб-приложения прогрессивное: вместе настроим Web App Manifest и Service Worker. Если вам еще не доводилось работать с PWA — текст точно для вас.

https://habr.com/ru/companies/agima/articles/901736/

#pwa #web_app_manifest #serviceworker #javascript #google_chrome #frontend #html

Side quest sneak peek: a browser extension that visualizes (Service Worker) Cache Storage for web sites.

Decided to build this after seeing how difficult it is too see what's stored in Service Worker cache. They can (accidentally) take up quite a lot of storage space.

Repo: https://github.com/cheeaun/stakataka
Not released yet, under review in Chrome Web Store.

#WebDev #FrontEnd #BrowserExtension #ServiceWorker

The code for this component can be found on GitHub at the following address: https://github.com/mapcomponents/react-map-components-apps/tree/main/multi_tab

and you can have a look at the demo from the screen recording here: https://catalogue.mapcomponents.org/en/component-detail/MultiTab

#serviceworker #react #WebDevelopment #GitHub #GIS

Est-ce qu’on peut faire une web app sans framework JS aujourd’hui ?
La réponse c'est oui !
ES modules et Service Worker ont changé la donne.
Pourquoi ? https://alethgueguen.com/une-web-app-sans-framework-js-cest-oui
#webDev #webApp #serviceWorker #sobrieteNumerique

【実践】PWAで作るクロスプラットフォーム対応のメモ帳アプリ
https://qiita.com/yonaka15/items/8b3ef79565aaafddf5ae?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #JavaScript #ServiceWorker #PWA #webmanifest

Todo-лист на максималках: разбираем архитектуру крупного приложения

В этой статье я покажу, как устроена многослойная архитектура крупного реактивного web-приложения, и особенности его запуска под Electron. Материал будет полезен, если вы планируете начать свою разработку, хотите попробовать себя в роли архитектора, вас не пугает Shared Workers, Service Workers или, в конце концов, вы хотите это попробовать или разобраться.

https://habr.com/ru/articles/868194/

#Electron #sharedworker #worker #тай #фронтенд #serviceworker #s3 #react #redux

“A Local-First Case Study” by @jakelazaroff

🔗 https://jakelazaroff.com/words/a-local-first-case-study/

> It helps a lot that various libraries in the ecosystem compose well. Just snapping together ProseMirror, Yjs and Y-Sweet gave me a collaborative rich text editor with shared cursors. Adding in `yjs-indexeddb` made it work offline. This was all mostly out of the box, with very little setup; the degree to which everything Just Works is…

#PWA #ServiceWorker #offline

⚓️ https://nicolas-hoizey.com/links/2024/10/07/a-local-first-case-study/

“Building a Single-Page App with htmx” by @jakelazaroff

🔗 https://jakelazaroff.com/words/building-a-single-page-app-with-htmx/

> It’s a simple proof of concept todo list. Once the page is loaded, there is no additional communication with a server. Everything happens locally on the client.
>
> How does that work, given that htmx is focused on managing hypermedia exchanges over the network?
>
> With one simple trick: the “server-side” code runs in a service…

#ServiceWorker #htmx

⚓️ https://nicolas-hoizey.com/links/2024/10/07/building-a-single-page-app-with-htmx/

#JavaScript #ServiceWorker that occassionally checks an #RSS feed and creates a notification if new items have arrived.

#WebDev

“A Local-First Case Study” by @jakelazaroff

🔗 https://jakelazaroff.com/words/a-local-first-case-study/

> It helps a lot that various libraries in the ecosystem compose well. Just snapping together ProseMirror, Yjs and Y-Sweet gave me a collaborative rich text editor with shared cursors. Adding in `yjs-indexeddb` made it work offline. This was all mostly out of the box, with very little setup; the degree to which everything Just Works is…

#PWA #ServiceWorker #offline

⚓️ https://nicolas-hoizey.com/links/2024/10/07/a-local-first-case-study/

“Building a Single-Page App with htmx” by @jakelazaroff

🔗 https://jakelazaroff.com/words/building-a-single-page-app-with-htmx/

> It’s a simple proof of concept todo list. Once the page is loaded, there is no additional communication with a server. Everything happens locally on the client.
>
> How does that work, given that htmx is focused on managing hypermedia exchanges over the network?
>
> With one simple trick: the “server-side” code runs in a service…

#ServiceWorker #htmx

⚓️ https://nicolas-hoizey.com/links/2024/10/07/building-a-single-page-app-with-htmx/

@schizanon @phanpy

not bad at all! a lil janky tho. noticeably more so than the standard masto ui 🫠

could be the browser tho. weirdly enough it works fine in firefox wrapper #zenbrowser but doesn't load in my usual vanilla #firefox 🤔

think #cookieautodelete is killing the #serviceworker 🤓

#foodservice #serviceworker #nobillionaires #taxtherich #eattherich

Turbo pet peeve at work is when a customer acts wayyy too familiar. It’s fine if I see you several times a week, or hell! Even once a week! Just some kind of regularity. But I *just* met this dude today and he’s all “where did ya go? I needed a drink and you’re on break!” Like dude idk you like that. Also he needed attention from either me or the other bartender constantly. We got other customers man, don’t worry I’ll be over to listen to your life story after I clear service bar.

#bartender #restaurant #serviceworker #restaurantworker #casinoworker #OrganizeTheServiceIndustry

#Development #Guides
Full stack web push API guide · A manual on setting up web push notifications https://ilo.im/15z55c

_____
#PushNotification #PWA #WebApp #Browser #JavaScript #ServiceWorker #WebDev #Frontend #Backend

Why is #Fennec #FDroid still stuck in version 124 ​:youmu_squint:​

I need the #ServiceWorker support in #Firefox 125 ​:TenshMelt:​

Sono praticamente 36 ore che non posto e lo so che siete in astinenza, ma avevo la questione importantissima inderogabile tra le mani di risolvere quel #problema con le #PWA una volta per tutte. E ora, nonostante un’altra frazione di sanità mentale sottrattami dagli spiritelli del silicio, dolori perché sto seduta per ore alla scrivania e tutta storta, e sonno perché ieri sera ho perso un sacco di tempo a debuggare un errore stupidissimo rimanendo sveglia fino alle 2 per poi arrendermi perché stavo veramente morendo, quantomeno ce l’ho fatta… 🤯️

Cercando con estrema #disperazione ieri mattina, mi accorgo di una cosa documentata alla bene e meglio, trovando prima una menzione su MDN ad un permesso webRequestFilterResponse.serviceWorkerScript, che servirebbe a regola per permettere alle #estensioni di intercettare i caricamenti dei Service Worker, e poi un thread bugzilla (#1636629) che pare abbia portato proprio all’introduzione di questa separazione di permessi. Ho scaricato il #codice dimostrativo per il bug, l’ho un attimo sistemato per tenere conto di questa misura di sicurezza poi introdotta e, certo abbastanza, il coso riusciva a fare quello che io volevo dall’inizio, senza ricorrere a bruttissime e fragilissime #hack (che a questo punto io nemmeno divulgo visto che non ho dovuto implementarle, per non sporcarmi la reputazione come developer, che già è molto bassa visto che prediligo il #webdev). 🔮️

A questo punto era quasi solo questione di rifiniture, un po’ creare il popup per le impostazioni della mia #estensione (che però mi ha richiesto diverse ore di design e implementazione fatti in contemporanea, perché volevo farle bene, non buttarci dentro bottoni a cazzo per il gusto di), e un po’ capire come #programmare il worker che gestisce #cache e richieste di rete #offline. Solo che qui ho sclerato perché… inizialmente con il codice preso da Chrome for Developers non andava, e pensavo fosse un problema mio, ma invece sembra proprio colpa loro, le loro demo non vanno proprio in #Firefox (ma non ho testato nemmeno in Chromium)… quindi ho provato quello offerto da MDN, ma anche qui nada, solo che ormai stavo crollando e quindi vado a mimir… stamattina vedo meglio e quest’ultima implementazione in effetti scopro che funziona, ma a me non andava perché, nel modo in cui iniettavo il #ServiceWorker trasformandolo da oggetto a stringa, una variabile che referenziavo non era accessibile nel contesto di esecuzione effettivo dello script, e quindi l’accesso alla cache falliva, ma io non me ne sono accorta subito perché già gli strumenti di #debugging del #browser sono mezzi scassati per questi casi speciali, ma io poi avevo pure un try-catch di mezzo che quindi sopprimeva gli errori alzati dall’interprete… la #pazzia. 😫️ 😩️

C’è un #casino di mezzo con la pubblicazione di #addon per #Mozilla, quindi praticamente ora il mio è in revisione, ma se tutto va bene dovrebbe prossimamente apparire sulla pagina https://addons.mozilla.org/en-US/firefox/addon/offline-caching/; in ogni caso, chi volesse usarlo da subito (come me sul telefono in primis) può scaricare da qui il file firmato da installare a mano. Edit: un’oretta dopo, l’estensione è approvata! 💖️

https://octospacc.altervista.org/2024/03/28/pwgoduriaaaa/

#addon #browser #cache #casino #codice #debugging #disperazione #estensione #estensioni #Firefox #hack #Mozilla #offline #OfflineCaching #pazzia #problema #programmare #PWA #ServiceWorker #webdev