In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

3 Essential Steps to Convert Your Website to a Progressive Web App

3 Essential Steps to Convert Your Website to a Progressive Web App

by Silviu Serdaru on Jul 24 2018

Thinking to convert your website to a progressive web app? And why shouldn't you?

Since the benefits are obvious:
 

  1. you “end up” with a website behaving like a native web app
  2. … one that works offline (and “offline” is the new black these days, right?), having its own home-screen icon 
  3. improved user experience: not only that your site goes mobile, but users don't even need to get your site-turned-into-an-app downloaded from an app store and then installed on their devices
     

Furthermore:

Putting together a PWA out of a regular website (or blog) is unexpectedly easy! Basically, any site/blog can be turned into a progressive web app...

No need to let yourself discouraged by terms such as:
 

  • service workers
  • web app manifest (or “manifest.json)
     

… for the whole process is actually far less complex than it sounds.

Here, see for yourself: go through the 3 essential steps it takes to convert your website to a progressive web app:
 

But First: All You Need to Know About PWAS— Benefits & Common Misconceptions

A succinct and clear enough definition of progressive web apps would be:

A PWA is a website that behaves like a native mobile app once visited on a mobile device.

Whereas a more detailed and comprehensive one would go something like this:

A PWA is a sum of modern web capabilities (and basic mobile capabilities) that enable users to save it on their own mobile devices (thus enjoying a native app-like experience) and access it offline, too.

And now, without getting into the old “native mobile app vs PWAs” debate, let me point out to you some of progressive web apps' most “luring” benefits:
 

  • as compared to native apps, the setup process, on users' end, is significantly simplified: PWAs get instantly installed on their home screens, with no need to visit an app store for that
  • they can get accessed offline, as well, via the home screen icon (a huge step forward from responsive web design)
  • installation is conveniently lightweight: a few hundred KB
  • essential files get cached locally (needless to say that this makes them faster than the standard web apps)
  • they feature modern web capabilities: push notifications, cameras, GPS
  • updates are run automatically, with no user interaction
  • not only that they work offline, too, but once the network connection is restored, they synchronize the data 
     

And now, before we virtually convert your website to a progressive web app, let's go, briefly, through some of the most common misconceptions about PWAs:
 

a. A progressive web app is literally an... “application”.

Not necessarily:

A progressive web app can be a blog, an online shop, a collection of... dog memes, you name it.

Do not take the term “application” too literally when referring to PWAs. It's more of a concept, a code optimization technique which, once leveraged, "turbocharges” your app-like website or blog to deliver content faster.
 

b. Progressive Web Apps Are Developed Specifically for iOS or Android.

On the contrary! Probably one of PWAs' “hardest to resist to” advantage is that:

They're platform-independent.

So, you don't need to:
 

  • develop separate codebases
  • comply with platform-specific submission guidelines
     

c. Your Site Has to Be a JS-Based Single Page One So You Can Turn it Into a PWA.

Nothing of that sort!

If you're currently running... something on the web (be it a set of static HTML files), then you can easily make a PWA out of it! 

And now, let's go straight to the 3-step set up process of a PWA out of your regular website:
 

Step 1: Go HTTPS to Convert Your Website to a Progressive Web App

There's no way around it: the HTTPs protocol is the ONLY way to go when it comes to progressive web apps!

All data exchanges need to be served on a secure domain: over an HTTPs connection!

And how do you switch from HTTP to HTTPs? You get yourself an SSL certificate from a trusted authority.

Now, there are 2 ways to get hold of it:
 

  1. if your site runs on your own server (or at least you have root access to your server), consider setting up the LetsEncrypt certificate.
  2. if your website runs on a shared hosting, then both the process and the cost of your SSL certificate (for yes, there will be a monthly or an annual fee) depends greatly on your provider.
     

Step 2: Create a Web App Manifest 

“But what is a web app manifest?”, you might ask yourself.

A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name...

It's this information that will let browsers know how precisely they should display your app once saved as a home-screen icon.

Now, before I go ahead and share a working example with you — one including the must-have entries of any web app manifest — I should also highlight that:

A link to this JSON text file should be placed in the <head> of all your PWA's pages:

<link rel="manifest" href="/manifest.json">

That, of course, after you've:
 

  1. entered all the information about your PWA
  2. copied the manifest.json
  3. created a new “manifest.json” file in the root directory of your site
  4. and pasted it there 


It should be served with:
 

  1. Content-Type: application/json HTTP header or
  2. a Content-Type: application/manifest+json
     

And here's a “sample” piece of code:

{
    "name": "My PWA Sample App",
    "short_name" : "PWA",
    "start_url": "index.html?utm_source=homescreen",
    "scope" : "./",
    "icons": [
        {
            "src": "./android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffee00",
    "background_color": "#ffee00",
    "display": "standalone"
}

Once the “Manifest” section of the Chrome's Development Tools Application tab has validated your JSON file, it will generate an “Add to home screen” link to be accessed on all desktop devices.

Tip: as you convert your website to a progressive web app you don't necessarily need to configure the manifest.json file yourself — with all its different images sizes, meta tags etc. Instead, if you want to make it quick, you can just make a 500x500 sized image of your PWA and then rely on Real Favicon Generator to create all the needed icon sizes and a manifest file for you!

And this is just one of the generators you could use!
 

Step 3: Set Up Your Service Worker

This is where the “true power” of your PWA lies:

A service worker is a JavaScript file, placed in your app's root, that plays the role of a “middleman” between the browser and the host. The one which, once installed in the supported browsers, intercepts and responds to the network request in different ways.

Note: in most cases, it's for caching all the static files, so that our PWAs can function offline, too, that we use service workers.

Now that we've seen what a service worker is, here's how you create one as you convert your website to a progressive web app:
 

a. You get it registered first things first.

For this, just run this code in the JS file on your site:

 if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }

Practically, it will check whether the browser does support Service Workers and, if it does, it registers your Service Worker file.

Note: NEVER call this file, inside your website, like this:


<script src="./service-worker.js"></script> 


b. If you do not need your PWA to work offline, too, just set up an empty /service-worker.js file.

Users will just be notified to install it on their devices!
 

c. Once you've registered your Service Worker, generate your Service Worker file, too.

For this, just run this command in your terminal:

$ npm install --global sw-precache

Next, go ahead and run it on your website directory:

$ sw-precache

Et voila! You will have generated a service-worker.js including the service worker contents.
 

Test It Out!

At this stage of the "convert your website to a progressive web app" process, you should:
 

  1. check whether your service worker got properly registered and installed on Chrome
  2. run a performance audit on your PWA, using Chrome's Lighthouse Extension
     

For the first operation, go through these 3 basic steps here:
 

  1. press F12 to open your Chrome Dev Tools
  2. click on the “Application” tab
  3. next, on the sidebar, select “Service Workers” 
     

Then, check whether your service worker has been properly activated and is running normally:

Just tick the “Offline” checkbox and try reloading. Does your PWA-site still display its content, even when there's no internet connection?

Now let's run an audit using Chrome's dedicated testing tool, Lighthouse:
 

  1. press F12 again to visualize the Chrome Dev Tools
  2. select the “Audits” tab
  3. then select “Perform an audit”
  4. check all the suggested checkboxes
  5. and finally, run the audit 
     

And here's how the generated report would look like:

Convert Your Website to a Progressive Web App: Running a Performance Audit with Lighthouse

The END! This is how you convert your website to a progressive web app in 3 steps:
 

  1. enabling HTTPS
  2. configuring your web app manifest
  3. creating your service worker
     

See? Any website can be turned into a PWA and you don't need to be a senior developer to do it.

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

What’s the Fundamental Difference Between Gatsby and Next.js? How Do You Choose?
You're building a React website/application. You have your bulky list of functionalities all set, you know how you want it to look, but can't decide on the React framework to build it on: What's the main difference between Gatsby and Next.js, after all? And what's the difference between server-side rendering and static site rendering? Since both frameworks seem to be serving your main goals:   not to get tangled up in config or routing to generate a fast, fully accessible and SEO-friendly website to provide you with boilerplate application   So, what's the fundamental differentiator between Gatsby and Next? The one(s) that'll help you identify the framework that best covers your specific use case. Or, are there several of them (differentiators)? Just keep on reading:   1. But First: What Do Gatsby and Next.js Have in Common? How are they similar?    they're both React frameworks they're both great options for SEO purposes they're both great options if you need a high performance React app/website they both provide entirely formed HTML pages they both provide boilerplate application they both simplify and speed up the React app/website development cycle  they both generate SPA out-of-the-box they both provide great developer experience   In short: both Next.js and Gatsby score well in categories like speed and SEO; they're both awesome solutions to streamline app/website development in React. But the way they go about it... that's where these frameworks are fundamentally different.   2. How Does GatsbyJS Work? It builds HTML code on build time. That would be the short(est) answer to your question. But if we were to elaborate upon it: GatsbyJS is a static site generator that... generates (static) HTML code during the “build” process. How? It fetches data from external sources — APIs, Contentful, WordPress, markdown files —  and uses GraphQL to render it. Example: say you have a blog. In this case, you could use Gatsby to fetch your blog posts from... Contentful. Or any other repository where you might be storing your content (e.g. WordPress or Drupal).   3. What's Next.js? A tool for rendering pages on the server-side. And a more detailed answer would be: It's a React framework that supports server-side rendering. Meaning that it generates the needed HTML code dynamically, from the server, each time a request is being sent through. In short: your browser's provided with pre-rendered HTML code instead of empty “div”. Now, how does its distinctive way of going about building a React app/website suit you? It enables you to develop multi-page applications using static rendering and serving dynamic data from a back-end.   4. What Are They Used For? Specific Use Cases for Gatbsy and for Next.js What's the difference between Gatsby and Next.js in terms of use case? In other words: when should you choose one over the other?   4.1. Specific Use Cases for GatsbyJS 1. Blogs and small-scaled websites And I'm talking here about a particular scenario: When you have no comments section on your blog or, at least, not a very “busy” one. So, a use case where you don't need to render content every 5-10 minutes. Since blogs are static and their content doesn't change that frequently, Gatbsy's ecosystem makes the perfect fit for them.  And you have 2 options for your blog post creation and publishing process:   you write a blog post and the npm build will generate a corresponding HTML page you write a blog post in Contentful (or a CMS of your choice), publish it and recompile your blog in Netfly   2. Landing pages Again, since they use static content, landing pages make an ideal use case for GatsbyJS.  Where do you add that Gatsby “spoils” you with such a wide collection of plugins to choose from and to boost your landing page with: PWA, inline critical CSS, AMP...   4.2. Specific Use Cases for Next.js 1. Content-packed websites Dealing with lots of content? Or are you expecting your site's content load to grow, over time?  Then Next.js should be your first choice.  The reason is simple: Just imagine your Gatsby framework overstrained to rebuild all that content over and over again. Not precisely the most time-effective solution to go with, don't you think? 2. When you need more freedom for accessing your data Do you want to empower your content team to publish content on their own? Then you might want to consider Next.js.   3. To-Do Apps They make the perfect use case for server-side rendering: Next.js retrieves the content for your list, from the server, and displays the to-do's upfront.   5. The Fundamental Difference Between Gatsby and Next.js Is... … that Gatsby's a statically generator, while Next.js generates HTML dynamically.  Image by Colin Behrens from Pixabay The first creates JS/HTML/CSS at build time, while the second generates it at run time. Or, if you wish to put it this way: Gatsby doesn't depend on a server, while Next can't function without one.   6.4 Other Main Areas Where They Differ For the “Gatsby vs Next” debate doesn't end at the “static vs dynamic” comparison.  There are other factors, as well, that set these 2 React frameworks apart. And we'll outline the 4 most obvious ones:   6.1. Data Handling In case of Gatsby, the framework's the one “deciding” how you should handle data in your app. It needs to know where your data, your images and other types of content will be handled.  What's in it your for? Why would you accept this... “compromise”: to be told how to handle data in your own app? Because: Gatsby, through its rich collection of plugins, enables you to hook up your site to various data sources. This way, you gain external control over your data... By comparison, Next's totally unopinionated. Is gives you the freedom to decide your own data architecture. In short: it doesn't “tie” you to a specific technology. You're free to handle data your own way.   6.2. Deployment You can deploy Gatsby anywhere you need to, with no special configurations, since it's no more than compiled CSS, JS, and HTML. And things are equally straightforward with Next.js, as well. Since it's a Node application, you can host it anywhere you want to...   6.3. Routing With Gatsby, you have a pages directory where you're free to create all the HTML pages needed for your app/website.  Moreover, they provide you an API, as well, for creating routes dynamically. With Next.js you get a “pages” folder, as well, where you can set up your new pages and get your app running, with no routing to config.   6.4. Plugins “What's the main difference between Gatsby and Next.js?” Plugins sure are a powerful differentiator. Gatsby comes “loaded” with an entire ecosystem of plugins.  So, do you need to have your JS minified, you CSS compiled, your...? There must be a Gatsby plugin for it. Image by Michael Schwarzenberger from Pixabay   Next.js, on the other hand, doesn't “tempt” you with plugins, since its smaller scope doesn't justify the usage of plugins... The END! These are the key differences between Next.js and Gatsby, along with their common points and specific use cases. Have you had your “Aha!” moment(s) reading through our post? Have you managed to identify the right framework for your own use case?Photo by Charles ?￰゚ヌᆳ on Unsplash ... Read more
Silviu Serdaru / Nov 12'2019
React Native vs Flutter: Which One to Use to Build Your Cross-Platform App With? And Why?
They're both open-source and some highly popular options for cross-platform app development. They're both backed by huge tech communities... so your struggle is real: "React Native vs Flutter: which one should I go with?" On one hand, you have Flutter, which has gained momentum incredibly fast this year, putting the same question on most developers' lips: Will Flutter replace React Native? On the other hand, you have React Native, which has been around for +4 years now and uses "good old" JavaScript. Should you place your bid on "familiarity" and reliability or should you take the leap and go with a newer, but so promising platform instead? Speaking of which: What are Flutter's selling points more precisely? Those that have instantly propelled it in developers' radar so quickly? Why would you choose Flutter over React Native? And when is the latter the best option?   1. Why Choose Cross-Platform App Development in the First Place? Why would you go with this approach to mobile app development instead of taking the "native" path? Here are the most powerful reasons:   you get to write (most of) your code once and use it on multiple platforms you get to tap into the features of your cross-platform framework of choice to develop various types of mobile apps: social apps, eCommerce apps, interactive apps you get to build a native-like app without getting tangled up in Android, iOS or Java development   Notes:    optimizing your cross-platform app might get discouraging if you're not prepared for it expect it to be less performant than its native counterpart your platform of choice might not ship with all the functionalities that you need (Bluetooth, GPS...), so consider creating new plugins or opting for 3rd party ones to compensate for the lack of certain native features   2. React Native Is an... ... open-source JavaScript framework — or a new version of React, if you wish — launched by Facebook, used for building Android and iOS mobile apps. Source: Facebook.Github.io How does it work? What kind of "witchcraft" does happen under its hood that enables you to build a hybrid app? One that works both on iOS and Android? React Native uses a JavaScript bridge which... bridges your UI code to native components.   3. Reasons Why You Would Choose React Native over Flutter: Top 3   Source: Google Trends So, going back to our "React Native vs Flutter" dilemma: why would you go with Facebook's "prodigy"?   because it's written in JavaScript (entirely) and so it's much easier to find experienced JS developers for your app project because it's more... mature: it's been around for +4 years, which translates into reliability and a high level of popularity among developers because it streamlines the app's development cycle: it's faster (just think "ready-to-use components") to build app-like experiences with React Native than with Flutter   4. Flutter Is... ... Google's open-source SDK, written in Dart, used for building cross-platform apps. How does it work? It leverages the skia rendering engine to render Dart-based UI in both Android and iOS. Source: Flutter.dev 4 Key Features of Flutter:   design-specific features entirely customized environment platform-specific SDKs native-like performance   5. Flutter: Biggest Selling Points and Main Weaknesses What makes this "new kid on the block" so tempting among developers? Source: Stack Overflow What does it bring to the table that React Native can't provide?   it's easier to install it: when using React Native, many developers choose to use Expo precisely for this purpose; there's no way of automating the whole process and you bump into errors pretty often   it's easier to test it compared to the complicated setup that you need to do for testing a React Native app   it uses proprietary UI widget sets (by comparison, React Native uses native components), which give you more freedom to customize your UI block components   it benefits from first-party support for its iOS-style and material design widgets   it uses object-oriented design (due to Dart)   it performs better: Flutter's slightly faster since it depends on a JavaScript bridge, like React Native, for interacting with native components   it speeds up the UI designing process (React Native uses native components, while Flutter uses owner widgets)   And this last one is Flutter's most "seductive" feature:  It allows you to create a new custom layout in no time. "And why would I be hesitant to choose Flutter over React Native?" you might also ask yourself. Here are some of the aspects that might discourage you from using Flutter for building your cross-platform app:   there aren't so many developers working in Dart, the language used for writing Flutter, compared to the deep pool of JS professionals  the development process is a bit lengthier it's still relatively a young platform: you might not have a library for every functionality that you want to implement; not just yet...   6. React Native vs Flutter: You'd Be Better Off With... ... Flutter if:   you need to have your app running on both Android and iOS you're already an experienced C++/Java developer (or developers in your team are), since it'll then be easier for you to learn Dart  high performance is on top of your priority list you want a visually-appealing UI for your cross-platform app   And opt for React Native if:   you're already an experienced JavaScript developer  you put a high value on the support of a giant, mature tech community   The END! How do the scores look like on your evaluation list? Which of the 2 cross-platform solutions would you go with and why? Let us know in the comments below: Photo by Coffee Geek on Unsplash    ... Read more
Silviu Serdaru / Nov 06'2019
What Is Next.js Used For? Is It a Good Fit for Your Project? 2 Clues that You Should Use It
It sure is “the thing” these days. But does that make it “the perfect... thing” for your project, as well? For your specific project needs and priorities? What is Next.js used for more precisely? Can it handle both portfolio sites, let's say, and... particularly large web projects? Is it the best fit for both rarely and frequently updating websites? For both websites depending on a rich third-party ecosystem and those that don't use so many libraries? Let's dig up some answers on:   when (and when not to) why … to use Next.js.   1. But First: What Is Next.js? It's a lightweight React framework used for server-rendered and static web applications.  Now, if we were to highlight some of its main features, any shortlist would have to include:   (default) server-side rendering ecosystem compatibility prefetching HMR and Error reporting automatic code-splitting   Note: since it resembles PHP development so much, many developers find it easy to “jump on the Next.js bandwagon”.   2. And How Does It Work? Next.js renders your React app/website on a server (as opposed to being rendered on the client-side). Source: GoogleDevelopers So, do keep in mind that you'll need to have a server... somewhere. The main gain here is that it supports scenarios where data has to be updated in real-time. As for the drawbacks of server-rendering:   higher level of complexity: expect to write more code to get everything working properly it's a bit more challenging when dealing with third-party services a bit more difficult to deploy (compared to client-side rendering and HTML)   3. What Is Next.js Used for? What Types of Projects Would You Use It For? Now, back to the question that generated this blog post in the first place: When should you consider Next.js? When is it the best choice? Does it serve your... specific use case, for instance? In this respect, we've identified 3 types of projects that Next.js makes the best fit for:   3.1. When SEO is your top priority Do you need SSR (server-side rendering) to ensure SEO-friendly pages on your website? Then Next.js is your only option. It's built to serve precisely this type of project, where good SEO is a crucial objective.    3.2. When content gets updated particularly often Let's say that new and new data gets uploaded on your website and that the content on your web pages needs to get updated within... 3 minutes, maximum. Source: When Should You Use Gatsby? And I'm thinking here: news sites large eCommerce websites property listing websites where new comments get added and descriptions updated on a regular basis   In short: if you expect content on your future website to get updated often, then it writes Next.js all over your project.   4. Final Word Now, would you care for a piece of advice? When trying to answer questions such as:   “What is Next.js used for?” “Should I use it on my project or should I go with static?”   … make sure you evaluate both your short-term and long-term needs. In other words: your website might not need to update its content frequently right NOW, but maybe you're considering scaling it up in the future... For in that case, build performance and SEO will become some key requirements and your client-side or static architecture won't serve your goals anymore. Just make sure you coordinate your final choice with your future goals, as well.Image by Lynn Neo from Pixabay   ... Read more
Silviu Serdaru / Nov 04'2019