Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Finder
          v2.0.0
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            Getting started
            
Progressive Web App (PWA)

          



          
          

            
Progressive Web Apps (PWAs) represent a transformative approach to building websites, combining the best of web and mobile apps. Think of it as a website built using web technologies but acting and feeling like an app. PWAs have the potential to be fast, reliable, and engaging.

            
While Finder is not a full PWA out of the box, it is PWA-ready, meaning it includes several PWA features such as a custom installation banner, static caching, and offline capabilities. This makes it easy to optimize for desktop and mobile installations.


            
            

              
How to use available PWA features in Finder

              
Finder incorporates several key PWA components to enhance user experience:

              
    
                
  1. 
                  Manifest.json file:
    This JSON file is crucial for defining the web application as a PWA. It provides metadata used when your website is added to a user's home screen, including app icons, page URLs, and display type. Here is where you configure the look and feel of your application when it operates in an "app-like" environment.
                
    2. 
                
  2. 
                  Service Worker File (service-worker.js):
    Located in the root folder, the service worker is a script that your browser runs in the background, separate from a web page, enabling features that don't need a web page or user interaction. Finder's service worker handles the caching of static resources, which ensures that your site can load offline or on low-quality networks and serves an offline page (offline.html) when connectivity is lost.
                
    3. 
                
  3. 
                  PWA module (src/js/components/pwa.js):
    This JavaScript module manages the custom PWA installation banner and the registration or unregistration of the service worker. It's controlled via the data-pwa attribute on the <html> tag. In this module, users can modify the content of the installation banner and set how often it appears. The service worker's scope can also be adjusted here.
                
    4. 
              

              
All files related to PWA features are thoroughly commented to help users understand and modify them as needed.

            



            
            

              
How to disable PWA functionality entirely

              
If you decide not to use PWA features, you can easily disable them:

              
    
                
  1. 
                  Disable PWA in HTML:
    Remove or set the data-pwa attribute to false in the <html> tag.
                
    2. 
                
  2. 
                  Remove Service Worker:
    Optionally, delete the service-worker.js file if it's no longer needed.
                
    3. 
                
  3. 
                  Remove PWA module:
    Optionally, delete the src/js/components/pwa.js module and its import statement in src/js/theme.js.
                
    4. 
                
  4. 
                  Clear cache:
    To ensure that all service worker settings are fully reset, clear the cache. Instructions for doing this in Chrome are shown below:    
                  
    
                    
    
                      Cache storage
                    
    
                  
    
                
    5. 
              

            



            
            

              
Advanced topics

              
While Finder covers basic PWA functionalities, some advanced features are beyond its scope but can greatly enhance the capabilities of PWAs:

              
    
                
  1. 
                  Advanced (dynamic) caching:
    Techniques like using IndexedDB for complex or dynamic data sets.
                
    2. 
                
  2. 
                  Background sync:
    Allows web apps to synchronize data in the background, enhancing offline usability.
                
    3. 
                
  3. 
                  Push notifications:
    Enables direct user engagement through push notifications.
                
    4. 
                
  4. 
                  Native device features:
    Access to device capabilities such as camera, geolocation, motion sensors, etc., through modern web APIs. These features allow PWAs to provide a more app-like experience by integrating closely with the user's device.
                
    5. 
              

              
For more in-depth exploration of these advanced features, refer to trusted online resources.

              

                
                

                  Please note: These features are not supported by Finder's technical support.
                

              

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize