
Building a Progressive Web App in React, using Firestore for offline support - sconstantinides
https://blog.truthlabs.com/building-a-progressive-web-app-in-react-11c77a7fccb3
======
btown
For those wanting an open-source/self-hosted PWA solution with arbitrary
offline data, Apollo is quickly getting there. You can see an (awesome) state-
of-the-union roundup at [https://github.com/benseitz/apollo-link-
offline/issues/1#iss...](https://github.com/benseitz/apollo-link-
offline/issues/1#issuecomment-371678922) .

The real problem with all of these systems is that it's very hard to get
arbitrary offline mutations "right." For instance, a GraphQL mutation changing
nested objects would likely need to translate to a database transaction... and
although Firestore supports such transactions, it doesn't support them
offline: [https://firebase.google.com/docs/firestore/manage-
data/trans...](https://firebase.google.com/docs/firestore/manage-
data/transactions)

Of course, if you can structure your data such that it can be represented by a
CRDT - [https://en.wikipedia.org/wiki/Conflict-
free_replicated_data_...](https://en.wikipedia.org/wiki/Conflict-
free_replicated_data_type) \- offline sync comes much more naturally.
[https://irisate.com/crdt-for-real-time-collaborative-
apps/](https://irisate.com/crdt-for-real-time-collaborative-apps/) is a great
writeup that includes links to some actively-developed JS libraries.

------
akavel
I've recently started experimenting with building a PWA, and for others as
allergic to JavaScript as me, I can heartily recommend Elm, and especially
[https://github.com/halfzebra/create-elm-
app](https://github.com/halfzebra/create-elm-app) as a project bootstrapping
tool. Per its "Users Guide" at [https://github.com/halfzebra/create-elm-
app/blob/master/temp...](https://github.com/halfzebra/create-elm-
app/blob/master/template/README.md#making-a-progressive-web-app):

 _" By default, the production build is a fully functional, offline-first
Progressive Web App."_

For building a UI, you could do worse than starting with one of the following:

\- [http://package.elm-lang.org/packages/debois/elm-
mdl/latest](http://package.elm-lang.org/packages/debois/elm-mdl/latest)

\- [http://package.elm-lang.org/packages/rundis/elm-
bootstrap/la...](http://package.elm-lang.org/packages/rundis/elm-
bootstrap/latest)

\- [http://elm-ui.info/](http://elm-ui.info/)

\- more at e.g.:
[https://www.reddit.com/r/elm/comments/7713wm/elm_ui_libs/](https://www.reddit.com/r/elm/comments/7713wm/elm_ui_libs/)

------
LeanderK
I recently had to develop a quick PWA for a small conference. I had no serious
web-development experience prior (i know the basic of js, HTML and CSS) and
decided to use ionic. I expected a lot of struggle, but I was seriously
surprised, it was really easy. I can definitly recommend ionic if you want
something app-like!

It's all open-source: [https://github.com/hackundsoehne/talKIT-Event-
App](https://github.com/hackundsoehne/talKIT-Event-App) beware, I was under a
lot of pressure and often it's quick an dirty.

I built the whole thing in 2-3 days, including the backend.

~~~
tin7in
Thanks for sharing. We also started building PWAs for events recently and we
think it's a very good use case. There is too much money spent on event native
apps these days by organizers and those native apps are typically uninstalled
after the event is over.

Our project: [https://chatbird.io](https://chatbird.io) (PWAs are not
communicated on the landing page yet since we started with bots)

------
zenovision
What will happen with your Startup if Google decide to increase prices for
Firestore, just like they did with Google Maps last week (it's like 40x more
expensive now than before). Google is very famous for increasing prices and
deprecate their products - they deprecated more than 100 products now as you
can see on Wikipedia:
[https://en.wikipedia.org/wiki/List_of_Google_products#Discon...](https://en.wikipedia.org/wiki/List_of_Google_products#Discontinued_products_and_services)

------
geebee
At this point, has "progressive" come to mean "will render without javascript
(or css)"? I suppose eventually I will need to accept this definition, but I
personally do think that this concept - a valid, valuable one - should
probably have a different word. Either that, or we need a new word to describe
a web app built with progressive enhancement.

[https://en.wikipedia.org/wiki/Progressive_enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement)

The idea to progressive enhancement (to me - I understand these terms weren't
unambiguous even as they emerged) is that you start with content, add
structure (HTML), and slowly "enhance" to higher and more elaborate UI
features (CSS, javascript). You add each layer in a way that you can always
fall back to a simpler method or rendering. It is not necessary to render the
structure to access the content. It is not necessary to render the styling to
access the structure. It is not necessary to render the interactivity to
access the styling.

Now, a web app built progressively doesn't necessarily meet the criteria for
progressive enhancement, since plenty of people add html, css, javascript, and
beyond without preserving the ability to render from a previous stage. But I
think people have confused the ability to render to a previous stage with
progressive enhancement as well. It's a good quality in a javascript framework
that you can still view your site in lynx or with a pure html browser, but
writing your app upfront in a JS heavy manner and relying on the framework to
fall back for you? I think that's something other than "Progressive
Enhancement", because you didn't enhance your app progressively, you started
at the highest level of UI. I'd call that a "backwards compatible" web app.

------
sjroot
I am making an app with Vue and Firestore and am excited by the potential of
PWAs. Really, the only thing that frustrates me at this point is that Apple
doesn’t support local notifications. If they did, I really wouldn’t have to
consider making a native app at all.

~~~
socceroos
I'm building a PWA - good luck trying to get OAuth logins in Android or iOS
when the user has pinned to homescreen. ;(

~~~
sconstantinides
Take a look at
[https://firebase.google.com/docs/auth/](https://firebase.google.com/docs/auth/)

~~~
socceroos
Yeah, doesn't work if a user has already added to home screen.

------
Kiro
Stupid question but what does the Service Worker actually do? I thought they
were used for offloading work to another thread but nowadays I always see it
used for "offline mode". Why can't you just solve it with caching? Feels like
I misunderstand something.

~~~
hknd
You are probably mistaken SW for Web Workers.

Web Workers are used to offload work to another thread and can communicate
with messages

Service Workers is a new API which is now supported by all major browsers.

SW is branded as: Rich offline experiences, periodic background syncs, push
notifications and more. "A service worker is a script that your browser runs
in the background, separate from a web page, opening the door to features that
don't need a web page or user interaction."

Full article on this topic:
[https://developers.google.com/web/fundamentals/primers/servi...](https://developers.google.com/web/fundamentals/primers/service-
workers/)

