What is that?
Buzz word time! Progressive Web App (will be written as PWA in the following post), promoted by Google, basically means delivering user an app-like web app. It concludes the following features:
- Responsive - available on many devices: desktop, phone and tablet.
- Reliable - accessible even if the network is down.
- Fresh - always up-to-date, updating without getting through app store.
- Safe - can only be accessed via HTTPS.
- Discoverable - unlike native app, since it’s an web app, content should be discoverable by the search engines.
- Engaging - PWA can be access like an native app. You can access them by adding them to home screen, and provide them an seamless full screen experience.
but that sounds very…unclear. We want to know how it was made right. Here is the heart of Progressive Web App:
- Service Worker - the first pillar of PWA. It’s an API that hijacks networking request, and responds browser with additional messages.
- Cache Storage - the second pillar of PWA. A member of Web Storage. An API developer often use with Service Worker. It caches request as key and responds with cached value if corresponding key is found.
- Web App Manifest - a JSON-based manifest file provides ability to set things like app icon name or display mode and many other things.
Platform support
In the current status, service worker is not available on iOS, which says your app still can’t benefit from PWA, but the good news is even if the working environment hasn’t support yet, your app will fallback to the traditional caching strategy. Your app still works without modifying codes!
PWA vs Native
PWA is an improvement to the web and user experience, making it more like an native app, but that doesn’t mean it’s going to replace native app or against native app on par.
PWA is just a collection of features and it’s not a platform like native. A fair fight should be “browser vs native”.
If you take a look at what web can do, you might think “cool I can finally develop something like native does on mobile!” However the current compatibility on iOS still has long way to go, if you take a look on those API closely, you will find out most of them only available on Chrome on Android.
How does it work?
Please check pwa-test written by me. It’s a simplified version of Your Frist Progressive Web App.
I don’t want to write every step down here, because, first, I am lazy, and more important, I think Your Frist Progressive Web App has done a great job on tutoring. I believe it already provides all the details you need.
However there are still some pitfalls when developing with service worker, in order to save your time, here you go.
Higher level API
After read all the tutorials, you found you have to write many codes to achieve PWA, but… you are a lazy programmer like me, and wondering “where’s the higher level API candy?” Well, people heard you. Here comes some candies!
- sw-toolbox - a collection of service worker tools to help developing offline web app.
- sw-precache - a helper for integrating service worker with building chain like gulp.
- webpack-offline-plugin - a webpack plugin for building offline web app.