How To Build A Progressive Web App?

Why?

Progressive Web Apps are all about an amazing experience. You PWA should combine the best of the web and the best of apps. In the example above (yep, the ‘Noter web app‘) you can see that it is useful from the very first visit in a browser tab, to the launch from a home screen. As the user progressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, it persistent and your notes are always there. It got an icon on the home screen and loads as a top-level, full screen experience. If you wish to add push notifications (which are great way to re-engage with your users) – pay attention to the tips in the image below.

How?

• First step: I strongly recommend trying out the PWA code lab so you understand how the approach to this type of app may be similar (or not) from what you’re used to do.
• Tech: Evaluate whether you’re going to just use vanilla JS for your app or a library/framework. See here for barebones PWA config or try Web Starter Kit for a starting point with a build process (=Gulp). Your PWA should supports the application shell architecture for faster first-paint and persistent.
  • Offline support: There are few libraries  for helping you with Service Worker pre-caching (sw-precache) and runtime caching (sw-toolbox). You can check this code lab for building your first offline web app as a starting point.
  • User Interface: Like anything on the web, there are lots of options for your UI. Some of the example PWAs take advantage of Material Design and there are libraries for using it available for vanilla JS, Polymer Paper elements, Angular Material and community efforts like Material UI for React.
  • Icons: I find both iconfinder.com and realfavicongenerator to be good resources. If you have the budget, it’s always great to get something polish from a designer.
  • Performance: Please follow the RAIL performance model:
    • Cable:
      • First load (network-bound), First paint at 1s or sooner, Speed Index of 1,000 or less, <100ms for response, <16ms for each frame.
      • Second load: first paint at 300ms or sooner, Speed Index of 1,000 or less.
    • 3G:
      • First load (network-bound), 3G (normal, as defined by WPT): First paint at 2s or sooner (including TLS handshake), Speed Index of 3,000 or less.
      • Second load (disk-bound because SW): First paint at 300ms or sooner, Speed Index of 1,000 or less.
    • Test your work with WebPageTest and Chrome DevTools.
• Examples
  • Smaller Pictures – A great web app that will help you shrink photos.
  • Air Horner – The ‘must have’ web app for the olympics in the summer.
  • Voice Memos – Very useful when you have conversations with your spouse.
  • Offline Wikipedia – If you need to read something on the plane.
  • Guitar Tuner – For the ones that needs to tune their guitar.
  • Zuperkulblog – Good if you thinking on a PWA for publishers.
  • Snapdrop – an Apple Airdrop in HTML.
  • More on this pwa-list.

The main features for progressive web app

Misc

• Alex Russell – intro post to the topic.
• The Angular team have also started an early ng2-application-shell project based on the app-shell architecture.
• Addy Osmai great post: “Getting started with PWA”
• FlipKart’s case study – With lots of good technical tips.

 Be strong and build something amazing!

Advertisements

How To Deal With High Gear Media API Using PHP And XPath

For the serious players in the automotive industry on the net there is a new way to improve their sites. We had this feed for a while, but now with the new improvements and after big players (e.g. yahoo autos) have been happy with it, we wanted to share it with others around the world.
For developers that are not used to work with XML, XPath and other goodies, here is a short sample of code that will show you how easy it is to fetch our full feed. Unlike the previous post about our regular RSS feed, I’ve used here some basic functionality that anyone that used php (5.2+) will have under their belt.

<?php
/**
* @author Ido Green
*
* @since 04/10/2010
*
* @abstract Simple example how to fetch High Gear Media Full API using xPath
*
* @see greenido.wordpress.com
*
* @copyright HighGearMedia INC. 2010
*
*/error_reporting(E_ALL); // Always good to have it in development mode
$feed = new DOMDocument();
$feed->load('http://www.thecarconnection.com/api?uid=YourApiUserKey&cat=bottom-line');
if (isset($feed->documentElement)) {
$xpath = new DOMXPath($feed);
// Lets register TheCarConnection namespace
$xpath->registerNamespace('tcc', 'http://www.thecarconnection.com/rss');
// Now we looping on all the items and for each one we are extracting some data
foreach ($xpath->evaluate('//item') as $entryNode) {
// Simple way to get the title,desc per item
echo "Title: " . $xpath->evaluate('string(title)', $entryNode), "\n";
echo "Description " . $xpath->evaluate('string(description)', $entryNode), "\n";
// and some more interesting capabilities of xPath - we fetching the spec that is under tcc namespace for car details
echo "Make: " . $xpath->evaluate('string(tcc:review[1]/tcc:cardetails[1]/tcc:make[1])', $entryNode), "\n";
echo "Model: " . $xpath->evaluate('string(tcc:review[1]/tcc:cardetails[1]/tcc:make[1])', $entryNode), "\n";
echo "Rating: " . $xpath->evaluate('string(tcc:review[1]/tcc:cardetails[1]/tcc:rating[1])', $entryNode), " Out of 10\n";
echo "============\n";
}
} else {
echo 'Error: Could not fetch the feed';
}


 

You can also clone this code from github using: git clone git://gist.github.com/865542.git gist-865542

So it’s easy, right? You can load these feed for each site from our network.
For example: http://www.motorauthority.com/api?uid=YourUserKey&cat=reviews
Will give you all the reviews from Motor Authority.
For more specific custom calls you may use these parameters:

• uid – your user ID
• cat – you can choose: reviews / bottom-line / tips / blogs
  If you wish to get just the summaries of the bottom-line use: bottomline-summary
• media – Use 0 for strip html and media=1 to have our HTML format in the call.
• from/to – Use unix time stamp (e.g. 1206514800 and yes… the ‘from’ need to be lower then the ‘to‘)
• limit – Up to 100 items. The default is 10.
• limited-links – When it’s equal 1 we will give you just 5 links per item.
• version – You will only need it if you wish to get reviews for cars that are older then 2008. Then use: version=0
• morelinks – Use 1 if you wish to get links from thecarconnection.com or 0 if you don’t want links.

(*) Note that the bold parameters are mandatory.

If you wish to have quality automotive content on your site please feel free to approach High Gear Media
(feedback at HighGearMedia.com) and get a user ID. With more then 1000 new items of content per month, there are something for every car lover girl.

How To Work With High Gear Media RSS Feed In (less then) 4 Minutes

For all the girls that asked me time after time ‘How/Who/When/Why?’ and for all the ones that want to have on their blog the best automotive content around the web… This short code example will harness you with a knowledge to fetch High Gear Media customizable feed and have it on your site. The first thing you need to do in order to save yourself some leg work is to install Zend Framework.

Why reinvent the wheel, right?

The good people that work with Zend build for us some nice components that save us lots of work. For example, to parse an Atom (or RSS) feed – you should use their class and in few lines of code, you can be productive and happy.

After the installation, you can copy & paste the code below and you good to go.

<?php
/**
* @author Ido Green
*
* @since 04/01/2010
*
* @abstract Simple example how to fetch High Gear Media API (XML feed).
* You should have Zend Framework (1.9.4 and above).
*
* @see greenido.wordpress.com
*
* @copyright HighGearMedia INC. 2010
*
*/
// Set error reporting to ALL - Always good when you developing new features
error_reporting(E_ALL);
// Lets make sure we can find Zend Framework lib. (You might want to change it base on your local
// environment.
set_include_path(get_include_path() . PATH_SEPARATOR . "../");
// get the feed library
require_once 'Zend/Feed.php';
try {
$rss = Zend_Feed::import('http://feeds.highgearmedia.com/?sites=thecarconnection,greencarreports,allaboutprius');
} catch (Exception $e) {
echo $e->getMessage(); // In case something didn't work - lets see it.
exit (-1);
}
$feedItems = array();
// Loop through the items in the feed
foreach ($rss as $item) {
$itemElements = array(
'title' => $item->title(),
'description' => $item-<description(),
'link' => $item->link(),
'pubDate' => $item->pubDate(),
'author' => $item->author()
);
array_push($feedItems, $itemElements);
}
echo "\nThe HGM feed we got:\n";
// dump all items
var_dump($feedItems);
// In case some other process want to check if we finished correctly.
exit(0);
?>

The feeds can be fully customize according to your interested topics. For example:

• http://feeds.highgearmedia.com/?sites=thecarconnection&tags=green – This will fetch you all the content from The Car Connection that is tagged with Green
• http://feeds.highgearmedia.com/?sites=thecarconnection,greencarreports,allaboutprius – This example show you how to fetch content from 3 sites:The Car Connection, Green car reports and All About Prius.
• http://feeds.highgearmedia.com/?sites=greencarreports&tags=ford – This will give you all the content from Green Car Reports that is tagged with Ford

Please feel free to share you experience using the comments.