Ipfs-companion: Display a Landing Page on New Installs / Big Updates

[lidel]

As @diasdavid noted in https://github.com/ipfs-shipyard/station/pull/516#issuecomment-348672527:

Also, @lidel pretty soon you can start recommending users to install an IPFS node through station so that they can use ipfs-companion with go-ipfs.

Exciting times! In parallel to js-ipfs effort, good old go-ipfs will become a lot more user-friendly thanks to ipfs-station's refresh happening there right now.

While we could and probably will recommend it in store listing and on preferences screen,
there is an opportunity here for better communication between extension and its users.

(I'm parking this issue here so we have a game plan when Station is ready)

Here's an Idea: display a landing page to greet new users

tl;dr Detect new install/upgrade via browser.runtime.onInstalled API and OnInstalledReason and display a landing page when certain conditions are met.

New Installs

• Open a new tab with byte-size information and links about distributed web
  It is crucial to keep this short, sweet and engaging. _Less is more_.
• Detect if they are already running IPFS API on default port and preconfigure extension (read and set local HTTP gateway address, like suggested in #309) to work out-of-the-box 🚀 ✨
• If IPFS API is offline, inform the user that extension requires a working node to be fully functional and _kindly suggest_ one-click installation of ipfs-station with go-ipfs (think "big green button that says _install IPFS Station_, and there is a yarn-like kitten asking user to click on it" 🙃 )

Updates

• While we have landing page logic in place, we could inform users about new features in just installed update (think "animated GIF demo of a new feature")
• Much lower priority than "on-new-install"
  This should be non-invasive, so we probably want to do it manually, only on MAJOR and MINOR updates (http://semver.org/) and only when a new feature is worth taking user's time.

[daviddias]

👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽 💯% on board!

PS: I love how you always create very thorough issues for proposals! Thank you ❤️

[nunofmn]

I would like to give a go at this issue.

Maybe I could start by building some mockups of the landing and update pages, in order to discuss content and appearance of the pages?

[lidel]

@nunofmn Sounds like a plan! 👍

ps. I think it will be a static web page, probably not shipped with extension itself, but loaded from public gateway (extension will only have IPFS address embedded, just like go-ipfs does with WebUI).

[nunofmn]

New Install page mockup

I tried to keep an appearance similar to the IPFS website.

I would suggested to sub-divide the content of the page in three different sections:

Learn more

• Just some minimal text talking about the main ideas of the project and the distributed web concept, and then present 2-4 links redirecting the user to videos/articles/FAQs about IPFS.

Applications

• Link to 2-4 applications/demos/examples using IPFS.
• We could also add a link at the end of the section redirecting the user to tutorials on how to develop applications using IPFS. Something similar to: _"Developer? Learn how you can use IPFS to build distributed web applications."_.

Contribute _(not shown in the image)_

• A simple call to contributions button, redirecting the user to some page explaining how could help the project.

[ghost]

ps. I think it will be a static web page, probably not shipped with extension itself, but loaded from public gateway (extension will only have IPFS address embedded, just like go-ipfs does with WebUI).

There's use cases where we're offline, though. Not saying it has to ship with the extension, just take it into account :)

(As for the WebUI, we're actually planning to eventually have different packages of go-ipfs that include various tools and datasets.)

[nunofmn]

New Install page (missing IPFS client)

[lidel]

Neat! LGTM 👍

I think it makes sense to keep and maintain these static pages in this repo (at least for now).
Perhaps in a directory named landing-pages (on the same level as add-on and tests)?

[nunofmn]

Ok 👍
I will open a WIP PR soon with the static pages.

[lidel]

Quick update: we have two new repositories dedicated to IPFS GUI / UX:

• https://github.com/ipfs-shipyard/pm-ipfs-gui (PM'ing)
  
  
  
  • https://github.com/ipfs-shipyard/ipfs-ui-style-guide (work-in-progress)
  
  

I imagine there will be heavy cross-pollination between this issue and eg. style guide.
Be sure to watch that repo.

tl;dr check my short summary at https://github.com/ipfs-shipyard/pm-ipfs-gui/issues/27.

[lidel]

In Q3 we have a related OKR:

There is a smooth 3-step user onboarding flow (offer, install, welcome) for companion and desktop

CCing @fsdiogo to check this issue (#324) and an initial stab in PR https://github.com/ipfs-shipyard/ipfs-companion/pull/326 – both are relevant "prior art" and include some initial discussions about the "welcome" step :)

[lidel]

Continued in https://github.com/ipfs-shipyard/ipfs-companion/issues/564